[Next.js] 두 가지 형태의 사전 렌더링

Next.js에는 두 가지 사전 렌더링 형태(형식)가 있습니다.

 

- 정적 생성 (Static Generation = SSG)

- 서버 측 렌더링 (Server-Side Rendering = SSR)

 

둘의 차이점은 폐이지에 대한 HTML을 생성할 때 나타납니다.

---

정적 생성 (SSG)

빌드 시 HTML을 생성하는 사전 렌더링 방식입니다.

사전 렌더링된 HTML은 각 요청에서 재사용됩니다.

---

서버 측 렌더링 (SSR)

각 요청에 대해 HTML을 생성하는 사전 렌더링 방식입니다

 

❗개발 모드(npm run dev 또는 yarn dev)에서

모든 페이지는 정적 생성을 사용하는 페이지의 경우에도 각 요청에서 미리 렌더링(서버 측 렌더링) 됩니다.

(정적 생성을 확인할 때는 빌드 후 확인할 수 있습니다. 개발자 모드에서는 확인이 불가합니다.)

---

페이지당 기준

중요하게도 Next.js를 사용하면 각 페이지에 사용할 사전 렌더링 양식을 선택할 수 있습니다.

대부분의 페이지에는 정적 생성을 사용하고, 다른 페이지에는 서버 측 렌더링을 사용하여

하이브리드 Next.js 앱을 만들 수 있습니다.

---

정적 생성과 서버 측 렌더링을 사용하는 경우

페이지를 한번 만들고 CDN에서 제공 할 수 있기 때문에 모든 요청에 대해 서버가 페이지를 렌더링(SSR) 하도록 하는 것보다

정적 생성(SSG)을 사용하는 것이 훨씬 빠르기 때문에 두 방식을 적절히 혼합하여 사용하면 좋습니다.

 

다음 경우에 정적 생성(SSG)을 사용하는 경우입니다.

(데이터 변화가 많지 않은 페이지의 경우 정적 생성을 사용하면 좋습니다.)

- 마케팅 페이지

- 블로그 게시물

- 전자상거래 제품 목록

- 도움말 및 문서

 

사용자의 요청에 앞서 이 페이지를 미리 렌더링 할 수 있을까?라는 질문에 "예"라는 답이 돌아온다면

정적 생성을 선택 하는 것이 좋습니다.

 

반면에 Static Generation(정적 생성)은

사용자의 요청에 앞서 페이지를 미리 렌더링 할 수 없는 경우 좋은 생각은 아닙니다.

 

페이지에 자주 업데이트가 일어나는 데이터가 표시되고 모든 요청에 따라 페이지 콘텐츠가 변경되어야 하는 경우

서버 측 렌더링(SSR)을 사용하는 것이 좋습니다.

속도는 느려지지만 미리 렌더링된 페이지는 항상 최신 상태로 유지됩니다.

(데이터가 자주 업데이트 되더라도 즉시 업데이트된 데이터로 반영되어 사용자에게 보입니다.)

 

또는 사전 렌더링을 건너뛰고 클라이언트 측 JavaScript를 사용하여 자주 업데이트되는 데이터를 채울 수도 있습니다.

---

정적 생성과 서버 측 렌더링에 대한 자세한 개념과 예제는 이전 포스팅 참고!

 

Learn | Next.js