Photo by Lautaro Andreani on Unsplash

안녕하세요 여러분! 연휴 첫날 잘 보내셨나요? 오늘은 다양한 웹 렌더링 모드, 즉 SSG, SSR, CSR, ISR의 개념에 대해 공유하고 싶습니다. 비슷해 보이지만 세부 사항은 다릅니다. 어떤 것을 사용할지 결정하기 전에 아래 소개를 살펴봅시다!

Static Site Generation (SSG)

SSG 또는 정적 사이트 생성(Static Generation)은 전체 프로젝트를 빌드할 때 HTML 파일을 생성하는 것을 의미합니다. 이 HTML 파일에는 표시하는 데 필요한 데이터가 이미 포함되어 있습니다. 이 렌더링 모드는 프리 렌더링(pre-rendering)의 한 종류입니다. SSG는 모든 데이터를 빌드 시 얻기 때문에 콘텐츠가 변경되지 않는 정적 웹사이트에 매우 적합합니다. 이러한 HTML 파일은 CDN에 배치하고 캐시하여 웹사이트 성능을 향상시킬 수 있습니다. 또한, SSG 렌더링 모드를 채택하면 SEO에도 도움이 됩니다.

Server-side Rendering (SSR)

SSR 또는 서버 사이드 렌더링(Server-side Rendering)은 브라우저(클라이언트 사이드)가 요청(request)을 보낼 때마다 서버가 HTML 파일을 생성하여 브라우저로 다시 보내 표시하는 것을 의미합니다. 이 렌더링 모드는 자주 변경되는 데이터에 매우 적합합니다. 하지만 서버가 HTML 파일을 생성하는 데 시간이 걸리기 때문에 웹사이트 응답 시간이 길어지고 사용자는 기다리는 동안 흰색 화면을 보게 됩니다. SSR도 프리 렌더링의 한 종류로 간주되므로 SEO에 꽤 친화적입니다~ 하지만 이 방법은 서버가 사용자의 요청을 지속적으로 처리해야 한다는 점에 유의해야 합니다.

Client-side Rendering (CSR)

CSR 또는 클라이언트 사이드 렌더링(Client-side Rendering)은 이름 그대로의 의미입니다. 서버가 브라우저로 보낸 HTML 파일은 내용이 없다고 볼 수 있습니다. 브라우저는 서버에서 데이터를 가져온 후에야 화면에 렌더링할 수 있습니다. SPA(React나 Vue와 같은 Single Page Application)에서 사용하는 렌더링 모드가 바로 CSR입니다. 이 모드의 가장 큰 장점은 페이지를 전환할 때 서버에서 파일을 다시 가져올 필요가 없어서 사용자가 흰색 화면을 보지 않게 되므로 매우 좋은 사용자 경험으로 간주된다는 것입니다. 하지만 렌더링 시간은 클라이언트 환경에 따라 달라지며, 이 때문에 서버의 부담은 상당히 줄어듭니다.

Incremental Static Regeneration (ISR)

ISR 또는 증분 정적 재생성(Incremental Static Regeneration)은 덜 들어보셨을 렌더링 모드이며, 역시 프리 렌더링의 한 종류로 간주됩니다. ISR은 프로젝트를 빌드할 때 모든(또는 일부) HTML 파일을 생성합니다. 새로운 요청이 있고 미리 정해진 시간이 지났을 때, 서버는 먼저 브라우저에 이전 파일을 제공하면서 백그라운드에서 최신 파일을 다시 생성하고, 생성이 완료되면 브라우저에 보내 표시합니다. 사용자가 아직 생성되지 않은 페이지로 이동하면 서버는 즉시 해당 파일을 생성하고 캐시하므로, 다음에 이 페이지를 방문하는 사용자는 캐시에서 직접 파일을 가져올 수 있습니다. ISR은 SSG와 매우 유사하지만 SSG가 데이터 콘텐츠를 업데이트할 수 없다는 문제를 해결했으며, HTML 파일도 CDN에 캐시되므로 SSR에 비해 서버에 대한 부담도 줄여줍니다.

어떤 것을 사용해야 할까요?

각 렌더링 모드에는 장단점이 있으며, 어떤 것을 선택할지는 프로젝트에 따라 다릅니다. 명확한 승자는 없습니다.

• 데이터가 지속적으로 변경되고 SEO가 필요 없는 내부 시스템 대시보드 등에는 CSR을 사용하는 것이 매우 적합합니다.
• 데이터 변경률이 낮지 않지만 SEO가 필요한 경우 SSR 사용을 고려할 수 있습니다.
• 이벤트나 마케팅 사이트처럼 데이터를 거의 업데이트할 필요가 없고 SEO도 중요한 경우 SSG를 사용하는 것이 매우 적합합니다.
• 데이터 업데이트가 별로 필요하지 않거나 상품 페이지처럼 페이지 수가 너무 많고 SEO가 필요한 경우 ISR이 좋은 선택입니다.

표도 하나 그려봤는데(영어지만요 XD), 한번 보세요~

Next.js에서의 Pre-render

Next.js는 위에 언급된 렌더링 모드를 기본적으로 지원하며, 데이터를 가져오기(fetch)할 필요가 없는 웹 페이지를 렌더링하기 위해 기본적으로 SSG를 사용합니다. 서버에서 데이터를 가져와야 하는 경우 CSR과 혼합(hybrid)됩니다. 다른 렌더링 모드를 사용하고 싶다면 Next.js에서 제공하는 다음 함수들을 사용할 수 있습니다:

요약

오늘은 여기까지입니다. 내일 계속해서 이어가요~ 내일은 이 세 가지 함수를 사용하여 다양한 렌더링 모드의 웹사이트를 구현하는 방법을 공유하겠습니다! 오늘 배운 렌더링 모드에 대해 어떻게 생각하시나요?

Reference

• #03 No-code 之旅 — 什麼是 SSG、SSR、CSR、ISR？ - iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天
• Visual Explanation and Comparison of CSR, SSR, SSG and ISR - DEV Community 👩‍💻👨‍💻