Next.js의 사전 렌더링

사전 렌더링

사전 렌더링이란 Next.js가 클라이언트 측에서 JavaScript를 사용하여 페이지를 렌더링하는 대신, 서버에서 미리 HTML 파일을 생성하는 기능입니다. 이를 통해 사용자에게 더 빠른 로딩 속도와 검색 엔진 최적화 기능을 제공할 수 있습니다.

정적 생성(SSG)

정적 생성은 빌드 시점에 HTML 파일을 미리 생성하는 방식입니다. 한 번 빌드된 HTML 파일은 CDN에 배포되어 캐싱되며, 모든 요청에 대해 동일한 페이지를 제공합니다.

특징

• 속도가 빠름
• 검색 엔진 최적화에 효과적
• 데이터가 자주 변하지 않는 페이지에 적합(ex: 블로그 게시물, 제품 랜딩 등)

서버 사이드 렌더링(SSR)

서버 사이드 렌더링은 사용자가 페이지를 요청할 때마다 서버에서 HTML 파일을 동적으로 생성하는 방식입니다. 페이지에 따라 데이터가 실시간으로 변경되어야 할 때 유용합니다.

특징

• 요청마다 최신 데이터를 보여줌
• 검색 엔진 최적화에 효과적
• 자주 변하는 데이터를 다루는 페이지에 적합(ex: 사용자 대시보드, 실시간 뉴스 등)