[Next.js] - Pages Router 기반 SSR

SSR(Server Side Rendering, 서버 사이드 렌더링)

 

SSR은 가장 기본적인 사전 렌더링 방식

페이지 접근(요청)이 발생할 때마다 서버에서 getServerSideProps()를 호출하고 결과값을 클라이언트에 전달

즉, 요청이 들어올때마다 화면이 보이기 전에 사전 렌더링하는 방식

 

 

기본 골격

SSR이 필요한 Page에 아래와 같은 getServerSideProps() 함수를 추가해 준다

// 기본 골격
export const getServerSideProps = async () => {

  return {
    props: { }
  }
}

 

 

 

예제

// ========================================
// SSR(Server Side Rendering) 예제
// ========================================
export const getServerSideProps = async () => {
  // 컴포넌트보다 먼저 실행되어서, 컴포넌트에 필요한 데이터를 불러오는 함수
  // 사전렌더링 시 실행되는 함수이므로 한번만 실행된다
  
  const allBooks = await fetchBooks();

  return {
    props: {
      allBooks,
    },
  };
};


export default function Home({
  allBooks
}: InferGetServerSidePropsType<typeof getServerSideProps>) {
  console.log(allBooks);
  
  return (
    <div className={style.container}>
      <section>
        <h3>책 목록</h3>
        {allBooks.map((book) => (
          <BookItem key={book.id} {...book} />
        ))}
      </section>
    </div>
  );
}

 

접근 시마다 서버에서 데이터를 얻어 화면을 그리기 때문에, 항상 최신 데이터를 기반으로 페이지 초기화면을 그리는데 적합합니다.

하지만, 백엔드 서버에서 데이터 요청이 늦어지는 경우에는 클라이언트 → 브라우저까지 렌더링 흐름이 전부 늦어지는 단점이 존재합니다.