Next.js의 렌더링 전략 SSR, CSR, SSG

hahagarden·2023년 8월 24일
0

Next.js

Next.js의 주요 기능

  • 정적 사이트 생성
  • 증분 정적 콘텐츠 생성
  • 타입스크립트에 대한 기본 지원
  • 자동 폴리필 적용
  • 이미지 최적화
  • 웹 애플리케이션의 국제화 지원
  • 성능 분석

Next.js와 비슷한 프레임워크

Gatsby 정적 사이트 생성만 지원, 더 쉽고 더 빠르다.
Razzle React, Vue, Angular 등 어떤 프레임워크든 원하는 것을 쓸 수 있다.
Nuxt.js (Vue.js)
Angular Universal (Angular)

렌더링 전략

Next.js는 각 페이지를 서버가 렌더링할지, 빌드 시점에 정적으로 만들지, 전적으로 클라이언트에서 렌더링할지를 정할 수 있다.

1. SSR

서버에서 HTML을 동적으로 렌더링하고 웹 브라우저에 전송한다. 브라우저는 페이지에서 요청한 스크립트를 다운로드 한 다음 DOM 위에 각 스크립트 코드를 하이드레이션한다. 페이지를 새로 고치지 않아도 사용자와 웹 페이지가 상호 작용할 수 있다.

hydrateRoot lets you display React components inside a browser DOM node whose HTML content was previously generated by react-dom/server.

2. CSR

서버에서 자바스크립트 번들을 클라이언트로 전송한 다음 렌더링을 시작한다. CRA로 리액트 앱을 만들면 서버에서 웹 앱이 필요로하는 스크립트와 스타일만 포함된 기본 HTML만 전송하고 실제 렌더링은 클라이언트에서 이루어진다.

3. SSG

빌드시 리액트 앱을 HTML로 미리 렌더링한다(페이지를 만들어 놓는다). 빌드 시 페이지를 렌더링할 수 있는 한 어떠한 시나리오에서도 SSG를 사용할 수 있다. 누가 접속하든 동일한 페이지를 보여주는 웹사이트를 만드는데 최적화된 방법이다.(i.e. 마케팅 웹 사이트, 제품 카탈로그, 블로그 및 문서, 포트폴리오 사이트)
도구: Gatsby, Hugo, Jekyll, Hexo 등

장점
SEO 점수에 가장 적합한 방식이다.
속도가 매우 빠르다.
CDN을 이용한 캐싱: 모든 요청은 서버가 렌더링 작업을 할 때까지 기다릴 필요가 없고 CDN에서 페이지를 수신하기만 하면 되어 계산 리소스와 비용을 절약할 수 있다.

단점
빌드할 때 전체 웹사이트를 다시 만들기 때문에 콘텐츠가 자주 바뀐다면 비효율적이다.(대형 사이트일수록 빌드 시간이 오래 걸릴 수 있다)

CSR
동적인 컨텐츠를 만들 수 있으나 SEO 점수가 낮고 보안상 문제가 있을 수 있다.

SSR
SEO 점수가 더 높고 보안상 매우 안전하지만 성능에 영향을 받고 서버 관리에 부담이 크다.

SSG
SEO 점수와 성능이 가장 뛰어나지만 보안상 문제가 있고 동적 콘텐츠 생성이 어렵다.

참고

(번역)도대체 SSG가 뭘까요? Next.js로 설명하는 정적 사이트 생성

profile
공부한 내용을 기록합니다. 틀린 정보 피드백은 언제나 감사합니다 🌷 이전 블로그 https://hahagarden.tistory.com/

0개의 댓글