NextJS pre-rendering (Static Generation / Server-side Rendering)

devkimc·2022년 11월 2일

CSR React SSR getServerSideProps getStaticPaths getStaticProps nextjs pre-rendering

1. react 는 pre-rendering 지원 안됨

검포넌트가 렌더링 되고 나서 서버로 api 요청을 한다
검색엔진이 인덱싱하기 어렵다(블로그, 쇼핑몰 등 필요할 시)
따라서 nextJS 를 사용해서 pre-rendering을 적용한다.

2. pre-rendering

두가지 방법으로 나뉨: Static Generation / Server-side Rendering
함수가 실행되는 시점에 따라 나누는 것
빌드 시에 페이지를 만든다(npm start: build 한 파일을 실행하는 것 npm run dev 랑 다름)
프리랜더링은 컴포넌트의 함수보다 먼저 실행된다 (getStaticProps)
Incremental Static Generation: 특정 시간이 지나기 전까지는 초기 페이지를 보여주고
이후에는 지난 페이지 보여줌

2-1. getStaticProps

Static Generation
빌드 시 페이지를 생성
데이터 패칭 실패 시 redirect, destination 또는 revalidate 를 사용하여 예외 처리를 할 수 있다.

export async function getStaticProps() {
    console.log('re-generating');
    const filePath = path.join(process.cwd(), 'data', 'dummy-backend.json');
    const jsonData = await fs.readFile(filePath);
    const data = JSON.parse(jsonData);

    if (!data) {
        return {
            redirect: {
                destination: '/no-data',
            },
        };
    }

    if (data.products.length === 0) {
        return { notFound: true };
    }

    return {
        props: {
            products: data.products,
        },
        revalidate: 10,
    };
}

2-1-1. getStaticPaths

getStaticProps 와 동적 세그먼트를 사용 시 getStaticPaths 추가해줘야 한다
어떤 인스턴스가 사용되는 지 / 어떤 값에 대한 사전페이지를 생성할지 알려줘야 한다

<!-- 동적 페이지의 어떤 인스턴스를 생성할지 NextJS 에 알리기 위함 -->
export async function getStaticPaths() {
    return {
        paths: [
            {
                params: {
                    pid: 'p1',
                },
            },
        ],
        
        <!-- 방문율이 높은 페이지는 paths 에 추가 하여 사전 렌더링 시킴 -->
        fallback: 'blocking',
    };
}

2-2. getServerSideProps

Server-side Rendering
서버로 부터 오는 요청이 들어올 때마다 실행
서버로 요청을 보낼 때마다 페이지를 재 렌더링을 하고 싶다면 사용
getStaticProps 랑 둘 중에 하나만 사용해야 함, 서로 페이지를 생성하므로 충돌시킴

<!-- 동적 세그먼트를 사용 시 parameter 로 context 를 사용 -->
export async function getServerSideProps(context) {

  <!-- Url 로부터 parameter 를 가져옴 -->
  const { params } = context;
  const filterData = params.slug;
  const filteredYear = filterData[0];

  const numYear = +filteredYear;

  if (
    isNaN(numYear)
  ) {
    return {

        <!-- 에러 처리는 props 로 값을 주는 방식과
        notFound 로 404 에러 페이징 처리
        redirect 와 destination 으로 페이징 처리 가능  -->
        props: { hasError: true },
        // notFound: true,
        // redirect: {
        //   destination: '/error'
        // }
    };
  }

  return {

    <!-- 컴포넌트 함수는 해당 사전 렌더링 된 props 데이터를 사용함 -->
    props: {
      events: filteredEvents,
      date: {
        year: numYear,
      },
    },
  };
}