SSG

최근에는 React 보다 Next js 를 더 많이 사용하곤 한다. 주된 이유는 React 에서 파생된 프레임 워크이기 때문에 매우 익숙할 뿐더러, SSR/SSG의 지원, 라우팅 설계가 매우 간편하기 때문이다.

오늘은 Next js 를 주로 사용하는 이유 중 하나인 SSG 에 대해서 알아보려고 한다.

기존 React의 렌더링 방식

React는 SPA (Single Page Application)으로써 CSR(Client Side Rendering)방식을 사용한다. 단어 그대로 클라이언트 에서 렌더링을 진행하는 방식으로, 어플리케이션에서 렌더링에 필요한 모든 리소스들을 서버에서 받아와 하나의 파일로 번들링 하여 클라이언트에서 렌더링을 진행한다.

따라서 서버의 부하가 상대적으로 적으며, 빠른 페이지 전환 렌더링이 가능하다는 장점이 있다.

하지만 한번에 모든 리소스를 받아와야 하기때문에 초기페이지 렌더링이 느리며, 클라이언트에서 렌더링 작업을 수행하기 전에는 빈 HTML이 응답되기 때문에 SEO가 취약한 편이다.

이 단점들을 해소하기 위해 개발된 방식이 바로 SSR, SSG이다.

그럼 SSG는 뭐지?

웹 페이지 중에서는 한 페이지에 표시되는 컨텐츠들이 지속적으로 바뀌는 쇼핑몰 같은 페이지가 있는 반면, 요소들의 거의 바뀌지 않는 기업 소개 등의 페이지가 있다. 그렇다면 후자에 말한 페이지들은 굳이 변동사항이 거의 없음에도 불구하고 클라이언트에서 렌더링을 진행해야 하는가? 라는 의문이 생긴다.

즉, 컨텐츠의 내용이 변동이 거의 없는 페이지에 한하여 어플리케이션 빌드 시 사전생성된 페이지를 미리 서버로 부터 받아온후, 해당 페이지에 대한 요청이 올 경우 미리 받아온 HTML을 응답하는 방법이 고안되었고, 이것이 바로 Static Site Generation , SSG 이다.

Next 14 Docs - SSG