Next.js의 서버사이드 렌더링

• 풀스택 프레임워크
• 가장 중요한 기능 : 서버 사이드 렌더링이 가능하다.
• 클라이언트 사이드가 아닌 서버에서 페이지 콘텐츠를 준비한다……

<aside> 💡 기존 React 프로젝트에서는 클라이언트(브라우저)에서 렌더링을 진행한다… === 페이지를 그린다..

</aside>

• 문제점 : 데이터를 서버에서 페칭해 오면서 페칭하고 있는 상태에는 Loading이라는 것을 보여주게된다.
• 사용자가 기다리게하는 유저 경험이 크게 신경쓰지 않는다면 문제는 없다
• SEO는 문제가 될 수도 있다…
  • 검색을 통해 검색되고, 페이지에 데이터가 많다면 SEO가 중요하다. (기존 React는 비어있는 HTML만 보게 된다..)

<aside> 💡

</aside>

• 그 페이지가 서버에서 미리 렌더링 된다면?? === 데이터 페칭이 서버에서 진행된다면?

  • HTML이 완성된 페이지가 브라우저에 보여지고, 검색 크롤러가 데이터가 채워진 페이지를 볼 수 있게 된다.
  • 사용자가 로딩될 때 깜빡이는 화면을 보지 않아도 된다.

  <aside> 💡 React 페이지의 요소를 서버에서 미리 렌더링 해준다.

  </aside>

  🤨 리액트 자체로만으로도 서버 사이드 렌더링을 구현 할 수 있다! → 하지만 좀 어려움…

  😊 Next.js에는 서버 사이드 렌더링이 내장되어 있어 좀 더 쉽게 SSR을 구현 할 수 있다.

  • 페이지를 자동으로 미리 렌더링 해준다.
  • 즉 페이지에 접속해도 자동으로 미리 렌더링 되어 있다. → 사용자가 로딩을 기다릴 필요없다….

  <aside> 💡 클라이언트 사이드와 서버 사이드의 코드가 Next.js에서 융화된다.

  </aside>

  <aside> 💡 서버사이드 렌더링이 내장이 지원되있는 것만으로도 React 기반 프로젝트 구현에 큰 도움을 준다.

  </aside>