Pre-rendering의 동작
NextJS에서 모든 페이지들은 서버측에서 pre-rendering하여 생성합니다. 이때 pre-rendering 하여 HTML 문서를 생성하는 시점을 변경할 수 있으며, 초기 렌더링에 필요한 데이터를 포함하여 HTML 문서를 생성할 수도 있습니다.
클라이언트측에서는 초기에 pre-renderinge된 HTML 문서를 전달받아 즉시 렌더링한 뒤, 이후에는 자바스크립트 코드를 통해서 화면을 동적으로 업데이트합니다.
초기에 전달받은 하나의 HTML 문서만을 사용하는 SPA로서 동작하고, 이후에는 자바스크립트로 화면을 동적으로 업데이트하는 CSR로 동작합니다.
Pre-rendering의 문제점
pre-rendering을 위해 HTML 문서의 콘텐츠를 생성해야하는데 이때 페이지 컴포넌트 함수를 실행한 결과를 콘텐츠로서 생성하게 됩니다.
이때 컴포넌트 함수의 "첫 렌더링 사이클 결과물"을 HTML 문서의 콘텐츠로서 갖게 되는데 이때 문제가 발생할 수 있습니다.
만약 페이지 컴포넌트에서 useEffect 훅을 사용하여 비동기로 서버에서 데이터를 가져와 렌더링해야하는 경우 첫 렌더링 사이클 결과물에는 서버에게 데이터를 응답받기 전이므로 해당 데이터가 없는 콘텐츠를 갖는 HTML 문서를 생성하게 됩니다.
이를 해결하기 위해서 pre-rendering을 위한 HTML 문서를 생성할 때 실행되는 페이지 컴포넌트 함수에 초기 렌더링에 필요한 데이터를 미리 가져와 props로 전달하여 실행한 결과를 콘텐츠로 갖도록 해야 합니다.
Pre-rendering 방식
pre-rendering되는 방식은 pages 폴더 내 존재하는 페이지를 나타내는 파일 내에서만 설정할 수 있습니다.
pre-rendering 방식에 대한 종류는 아래와 같습니다.
-
"Static Generation"(Static) -> 기본값
-
"Static-site Generation"(SSG)
-
"Server-side Rendering"(SSR)
