Next.js는 사전 렌더링(Pre-rendering)을 지원하는 합니다.
사전 렌더링(Pre-rendering)?
웹 페이지를 브라우저에 응답하기 전에 서버 측에서 페이지를 사전에 완전히 렌더링하는 기술을 말합니다.
이러한 기능을 통해 웹 애플리케이션의 초기 로딩 속도와 검색 엔진 최적화(SEO)를 향상시킬 수 있습니다.
사전 렌더링의 종류
Next.js에서 사전 렌더링은 두 가지 방식으로 이루어집니다.
정적 사전 렌더링(Static Pre-rendering)
getStaticProps
빌드 시간에 데이터를 가져와 페이지를 사전 렌더링하는 데 사용됩니다. 이 함수를 사용하면 데이터를 서버 측에서 미리 가져와 페이지를 생성할 수 있습니다. 이후에는 클라이언트 측에서 해당 페이지를 로드할 때 더 이상 데이터를 요청할 필요가 없습니다.
getStaticPaths
동적 경로를 가진 페이지를 사전 렌더링할 때 사용하는 함수로, 페이지의 가능한 경로들을 정의합니다.
서버 사이드 렌더링(Server-side Rendering, SSR)
getServerSideProps
각 요청마다 서버 측에서 데이터를 가져와 페이지를 렌더링합니다. 이는 동적 데이터를 사용해야 하는 페이지에 유용합니다.
정적 사전 렌더링(Static Pre-rendering) 장 - 단점
장점
1. 초기 로딩 속도 향상
사전 렌더링을 사용하면 웹 페이지의 콘텐츠가 서버 측에서 미리 렌더링되어 클라이언트에게 정적인 HTML 파일로 제공됩니다.
이로 인해 초기 로딩 속도가 향상되며, 사용자들은 더 빠르게 웹 페이지를 확인할 수 있습니다.
2. SEO 개선
검색 엔진 최적화(SEO)를 개선하는 데 도움이 됩니다.
검색 엔진 크롤러는 정적으로 생성된 HTML 파일을 수집하고 색인하므로 페이지의 콘텐츠가 더 빠르게 색인됩니다.
3. 서버 부하 감소
정적 사전 렌더링을 통해 페이지를 사전에 생성하므로 서버의 부하가 감소합니다.
동적 콘텐츠를 매번 요청마다 생성하는 SSR에 비해 더 가벼운 처리를 할 수 있습니다.
단점
1. 동적 콘텐츠 제한
정적 사전 렌더링은 빌드 시점에 페이지를 렌더링하므로 동적으로 생성되는 콘텐츠를 처리하기 어렵습니다. 동적으로 변경되는 콘텐츠가 있는 페이지에는 다른 방법을 사용해야 합니다.
2. 빌드 시간 지연
정적 사전 렌더링을 사용하면 빌드 시간이 늘어날 수 있습니다. 특히 많은 페이지가 있거나 데이터를 가져오는 데 오래 걸리는 경우 빌드 시간이 길어질 수 있습니다.
3. 사용자 행동에 따른 업데이트 어려움
사용자의 행동에 따라 동적으로 콘텐츠를 업데이트해야 하는 경우, 정적 사전 렌더링은 적합하지 않을 수 있습니다.