Gatsby 정적 사이트 생성만 지원, 더 쉽고 더 빠르다.
Razzle React, Vue, Angular 등 어떤 프레임워크든 원하는 것을 쓸 수 있다.
Nuxt.js (Vue.js)
Angular Universal (Angular)
Next.js는 각 페이지
를 서버가 렌더링할지, 빌드 시점에 정적으로 만들지, 전적으로 클라이언트에서 렌더링할지를 정할 수 있다.
서버에서 HTML을 동적으로 렌더링하고 웹 브라우저에 전송한다. 브라우저는 페이지에서 요청한 스크립트를 다운로드 한 다음 DOM 위에 각 스크립트 코드를 하이드레이션한다. 페이지를 새로 고치지 않아도 사용자와 웹 페이지가 상호 작용할 수 있다.
hydrateRoot lets you display React components inside a browser DOM node whose HTML content was previously generated by react-dom/server.
서버에서 자바스크립트 번들을 클라이언트로 전송한 다음 렌더링을 시작한다. CRA로 리액트 앱을 만들면 서버에서 웹 앱이 필요로하는 스크립트와 스타일만 포함된 기본 HTML만 전송하고 실제 렌더링은 클라이언트에서 이루어진다.
빌드시 리액트 앱을 HTML로 미리 렌더링한다(페이지를 만들어 놓는다). 빌드 시 페이지를 렌더링할 수 있는 한 어떠한 시나리오에서도 SSG를 사용할 수 있다. 누가 접속하든 동일한 페이지를 보여주는 웹사이트를 만드는데 최적화된 방법이다.(i.e. 마케팅 웹 사이트, 제품 카탈로그, 블로그 및 문서, 포트폴리오 사이트)
도구: Gatsby, Hugo, Jekyll, Hexo 등
장점
SEO 점수에 가장 적합한 방식이다.
속도가 매우 빠르다.
CDN을 이용한 캐싱: 모든 요청은 서버가 렌더링 작업을 할 때까지 기다릴 필요가 없고 CDN에서 페이지를 수신하기만 하면 되어 계산 리소스와 비용을 절약할 수 있다.
단점
빌드할 때 전체 웹사이트를 다시 만들기 때문에 콘텐츠가 자주 바뀐다면 비효율적이다.(대형 사이트일수록 빌드 시간이 오래 걸릴 수 있다)
CSR
동적인 컨텐츠를 만들 수 있으나 SEO 점수가 낮고 보안상 문제가 있을 수 있다.SSR
SEO 점수가 더 높고 보안상 매우 안전하지만 성능에 영향을 받고 서버 관리에 부담이 크다.SSG
SEO 점수와 성능이 가장 뛰어나지만 보안상 문제가 있고 동적 콘텐츠 생성이 어렵다.