[TIL] Next.js - SSR vs SSG vs ISR

이미지 출처 https://www.tiluckdave.in/blog/ssr-ssg-isr

💡 TIL 20230817 - SSR vs SSG vs ISR

저번 글에서는 CSR(클라이언트 사이드 렌더링)과 SSR(서버 사이드 렌더링)의 차이점에 대해 공부했다면, 오늘은 SSR, SSG, ISR에 대해 정리해보았다.

---

1. SSR (Server Side Rendering)

1) 서버 사이드 렌더링

SSR은 CSR과 반대되는 개념으로 서버에서 페이지를 렌더링해서 클라이언트에 전달해주는 방식이다. Next.js에서 SSG나 ISR과 구분되는 이유는 렌더링되는 시점 때문인데, SSR은 사용자가 요청할때마다 그 시점에 페이지를 새롭게 렌더링한다. 그렇기 때문에 fetch 해야하는 데이터가 빈번하게 변경될 때 사용된다.

 

2) getServerSideProps

• getServerSideProps 함수는 server에서만 실행된다. broswer에서는 실행되지 않는다.
• getServerSideProps 함수는 runtime에서만 실행된다.
• getServerSideProps에서는 context 객체를 통해, 해당 페이지에서는 next router를 통해 URL Query 파라미터에 접근이 가능하다.
• getServerSideProps의 반환 값은 해당 페이지의 props로 전달된다.

import Seo from "@/components/Seo";
import { InferGetServerSidePropsType, GetServerSideProps } from "next";

export interface MovieProps {
 // 생략
}

const Home = ({ results }: InferGetServerSidePropsType<GetServerSideProps>) => {
  return (
    <div className="container">
      <Seo title="Home" />
      {results?.map((movie: MovieProps) => (
        <div className="movie" key={movie.id}>
          <img src={`https://image.tmdb.org/t/p/w500/${movie.poster_path}`} />
          <h4>{movie.title}</h4>
        </div>
      ))}
      <style jsx>{`
        // 생략
      `}</style>
    </div>
  );
};

export default Home;

export const getServerSideProps = async ({}) => {
  const { results } = await (
    await fetch(`http://localhost:3000/api/movies`)
  ).json();
  return {
    props: {
      results,
    },
  };
};

 

3) 항상 SSR을 해야하는 것인지?

✅ 선택의 문제

• SSR의 getServerSideProps() 사용
  
  • Loading 화면없이 fetch해온 데이터가 유효할 때(서버에서 fetch가 완료된 후) 화면이 보여지게 하는 것이 좋을 때
• SSG getServerSideProps() 사용
  
  • Static shell을 가진 채로 유저들에게 Loading 화면을 보여준 후에 데이터를 받는게 좋을 때
  • 데이터를 pre-render 할 필요가 없으면 클라이언트 사이드에서 가져오는 것을 고려할 것

 

---

2. SSG (Static Site Generation)

1) 정적 사이트 생성

• 클라이언트가 요청하는 시점이 아닌, 빌드 시점에 페이지를 생성해두는 것
• 따로 설정을 하지 않는다면, next.js는 프로젝트를 빌드할 때 페이지를 Static Generation하려고 한다.
• data fetching이 필요한 경우, getStaticProps가 실행되고 리턴하는 값을 컴포넌트에서 받아서 페이지를 pre-rendering하게 된다.
  • 단, 빌드 시점에 페이지가 미리 생성되므로 fetching data가 변경되더라도 다시 빌드하지 않는 이상 반영되지 않는다.

 

2) getStaticProps, getStaticPaths

• SSG를 원하는 페이지에 getStaticProps를 추가하면, 해당 페이지는 빌드할 때 렌더링 된다.
• getStaticProps 함수는 server에서만 실행된다. Browser에서는 실행되지 않는다.
• getStaticProps 함수는 빌드하는 그 순간만 실행된다.
• getStaticProps에서는 getServerSideProps에서 context를 통해 쉽게 query에 접근한 것과는 다르게 dynamic routing을 지원하려면 특별한 방법이 필요하다.
• getStaticProps의 return값은 해당 페이지의 props로 전달된다.

 

 

---

3. ISR (Incremental Static Regeneration)

1) 증분 정적 재생성

• 빌드 시점에 페이지를 렌더링 한 후, 설정한 시간마다 페이지를 새로 렌더링한다.
• SSG에 포함되는 개념이지만, revaildate 속성이 추가된 개념이라고 이해할 수 있다.
  • SSG는 빌드할 때 페이지를 생성하기 때문에 fetching data가 변경되면 다시 빌드해야하지만, ISR은 일정 시간마다 알아서 페이지를 업데이트 해준다는 차이점이 있다.

 

2) revaildate

 ISR을 사용하는 방법은 간단하다. getStaticProps에 revalidate 속성만 추가해주면 된다.

export async function getStaticProps() {
  const res = await fetch('https://.../posts')
  const posts = await res.json()

  return {
    props: {
      posts,
    },
    // Next.js will attempt to re-generate the page:
    // - When a request comes in
    // - At most once every 10 seconds
    revalidate: 10, // 10초 뒤에 해당 페이지를 다시 빌드한다.
  }
}

 

 

---

참고 사이트

안동훈 튜터님 강의자료 (노션)

Visual Explanation and Comparison of CSR, SSR, SSG and ISR

[Next js] SSR, SSG, ISR 이해하기