[Next.js] SSG, ISR에 대해서

Next.js 에는 페이지를 생성하는 여러가지 방법이 있지만 그 중에서도 SSG , ISR에 대해서 간단히 정리해보고자 한다.

SSG(Static Site Generation) 란?

Next.js 에서 제공하는 기능 중 하나로 변하지 않는 정적인 페이지를 생성하는 것을 말한다.

💡 정적 웹 페이지 vs 동적 웹 페이지

정적 웹 페이지

• 서버에 미리 저장된 파일(HTML 파일, 이미지, JS 파일 등)이 그대로 전달되는 웹 페이지
• 서버는 사용자 요청에 해당하는 저장된 웹 페이지를 보냄
• 사용자는 서버에 저장된 데이터가 변경되지 않는 한 고정된 웹 페이지를 보게됨

동적 웹 페이지

• 서버에 있는 데이터들을 스크립트에 의해 가공처리한 후 생성되어 전달되는 웹 페이지
• 서버는 사용자의 요청을 해석하여 데이터를 가공한 후 웹 페이지를 보냄
• 사용자는 상황, 시간, 요청 등에 따라 달라지는 웹 페이지를 보게 됨

CSR 또는 SSR은 사용자의 요청이 있을때 마다 렌더링 작업이 이루어져야 하는 특징이 있다. 하지만 이러한 방식들은 데이터가 변하지 않는 경우에도 불필요한 렌더링이 발생하게 된다.

이를 해결하기 위한 방법으로 SSG가 등장한 것인데, 항상 같은 내용의 페이지를 제공할 때 마다 렌더링 작업을 거치지 않도록 정적인 페이지를 미리 생성하고 렌더링 과정을 줄여 사용자에게 빠르게 페이지를 제공할 수 있다.

정리하자면,

• SSG는 정적 페이지를 생성하는 것으로 빌드하는 과정에서 페이지를 생성하게 된다.
• 이후 사용자들이 해당 페이지를 요청하는 경우 서버는 이미 생성된 정적 페이지를 제공한다.
• 이런 과정은 페이지에 구성된 데이터들이 변하지 않는 경우에 유용하다.

ISR 이란?

이미 빌드된 웹에 정적 페이지를 새롭게 추가하거나, 업데이트를 할 수 있는 Next.js 기능이다.

SSG는 빌드시에만 정적 페이지를 생성한다는 특징이 있지만, ISR은 빌드 시에만 생성하는 것이 아니라 특정 시간마다 정적 페이지를 재생성할 수 있다는 차이점이 있다.

마무리✨

이제 시작인 next.js... 다음엔 SSR, SSG, ISR을 구현할 수 있는 함수인 getServerSideProps ,getStaticProps ,getStaticPaths 에 대해서 공부해야겠다!!