[Next.js] SSR(Server-Side-Rendering) 과 SSG(Static-Site-Generation) 의 차이

* 본 포스팅은 Next.js를 기반으로 작성되었음을 알립니다.
* Next.js에서는 SSG를 SG(Static-Generation)으로 표현하고 있지만, 통용적으로 SSG라 사용되고 있다.

SSR과 CSR의 차이는 이전 포스팅에 모두 나와 있으니, 해당 포스트를 참고하면 된다.

 

SSR과 SSG 차이

Next.js에서는 두 가지 형태의 사전 렌더링(Pre-Rendering) 방법을 제공하고 있다.

• SSR : 사용자의 요청에 의해 동적인 HTML을 생성하는 렌더링 방법이다.
  사용자 요청 횟수에 따라 계속해서 HTML을 생성한다.
• SSG : 빌드시 최초 1회 작성되는 정적인 HTML을 생성하는 렌더링 방법이다.
  빌드시 생성된 HTML은 이 후 재요청시 재사용 된다.

Next.js에서는 위 2개의 사전 렌더링 방법을 페이지마다 원하는 방법으로 채택하여 사용할 수 있다.

(참고문서: [Next.js] getInitialProps, getStaticProps, getStaticPath, getServerSideProps)

SSR과 SSG의 사용 예시

• SSR : 사용자의 요청에 의해 생성되므로 Data-fetching이 매번 새롭게 진행된다.
  따라서 사용자 정보를 보여주거나 요청마다 바뀔 수 있는 페이지는 SSR로 작성하는 것이 바람직하다.
• SSG : 빌드시 최초 1회 생성 이 후 재사용 되므로 정적인 정보(사용자에 따라 정보가 바뀌지 않는)를 보여주는 페이지에 채택하는 것이 바람직하다.

SSG를 사용하게 되면 CDN을 통해 서버가 매번 렌더링 하는 것 보다 더 빠르게 렌더링 할 수 있으므로 사용자 경험에 상당히 유리하다.

 

예를 들어 도움말 페이지, 이용 약관 페이지 등 정적인 정보를 보여줄 때 사용할 수 있다.

SSG는 Production Level에서만 Build가 될 때 적용되므로 개발 환경에서는 적용이 되지 않는다.

(개발하면서 "왜 안되지?" 라고 하지 말자.)

 

Next에서는 v9 이 후로 SSG와 SSR을 나눌 수 있게 분리를 시켰다.

Next에서는 가급적 SSG를 사용할 수 있는 부분은 전부 SSG를 사용하고 필요한 부분에만 SSR을 사용할 것을 권하고 있다.

유저가 요청하기 전에 만들어낼 수 있는 정적인 페이지라면 이라면 SSG를 사용하라는 것이다.