SSG 방식을 사용하는 동적 페이지

김동현·2022년 7월 30일

next.js

NextJS

목록 보기

7/12

동적 페이지 컴포넌트에서 getStaticProps 사용하기

이전에 말했던 것처럼 동적 라우팅하는 페이지를 Static 방식으로 pre-rendering하면 Fallback 버전의 페이지를 생성합니다.

서버측에서 빌드되는 시점에는 경로 파라미터가 어떤 값을 가질 지 알 수 없기 때문에 Static 방식의 경우 언제나 Fallback 버전 HTML 문서를 생성하게 됩니다.

동적 페이지 컴포넌트 내 getStaticProps 함수

pre-rendering을 위해 HTML 문서를 생성할 때 HTML 문서에 초기 렌더링 데이터를 전달하기 위해서 getStaticProps 함수를 사용했습니다.

만약 "동적 라우팅"을 하는 페이지 컴포넌트에서 getStaticProps 함수를 사용해야 한다면 빌드시 경로 파라미터의 경로값을 서버에게 알려주기 위해서 "getStaticPaths 비동기 함수"를 export 해주어야 합니다.

즉, 빌드시 서버측에서는 getStaticPaths 함수를 먼저 실행하여 pre-rendering될 HTML 문서를 확인한 뒤에 getStaticProps 함수를 실행하여 초기 렌더링 데이터를 가져와 페이지 컴포넌트 함수에게 전달하여 HTML 문서를 생성합니다.

getStaticProps 함수에서는 인수로 전달받는 객체의 params 프로퍼티를 통해 경로 파라미터 값에 대한 정보를 참조할 수 있습니다.

getStaticPaths 함수

동적 라우팅을 하는 페이지에 초기 렌더링되는 데이터를 전달하기 위해서 "getStaticProps 함수"를 사용해야 한다면, 추가적으로 "getStaticPaths라는 함수"도 작성하여 구체적인 경로 파라미터 값을 지정해주어야 합니다.

getStaticPaths 함수를 통해 경로 파라미터값을 지정하면 빌드시 서버측에서 pre-rendering되는 HTML 문서는 지정된 경로값에만 해당하는 HTML 문서를 pre-rendering하여 생성합니다.

export async function getStaticProps() {
  ,,,
}

export async function getStaticPaths() {

    return {
        paths: [
            { params: { 경로파라미터(페이지 파일명): 경로값 },
            { params: { 경로파라미터(페이지 파일명): 경로값 },
            ,,,
        ],
        fallback: true|false|'blocking',
        notFound: true | false,
        redirect: {
            destination: '/경로값'
        }
    };
}

getStaticPaths 반환값

getStaticPaths 함수의 반환값으로는 반드시 객체를 작성하며, 반환값으로 작성한 객체의 프로퍼티로는 아래와 같은 프로퍼티들을 작성할 수 있습니다.

1. paths 프로퍼티

paths 프로퍼티 값으로는 "배열"을 작성하고, 배열의 요소로 경로 파라미터에 대한 정보를 객체로 추가합니다.

배열의 요소로는 params 프로퍼티를 갖는 객체를 추가하고 param 객체의 프로퍼티 키로는 경로 파라미터, 프로퍼티 값으로는 경로값을 작성합니다.

빌드시 서버측에서는 paths에 작성된 경로값에 대한 HTML 문서만 pre-rendering하여 생성하게 됩니다. 생성되는 각 HTML 문서는 getStaticProps 함수를 통해 초기 렌더링에 필요한 데이터를 전달받아 HTML 문서를 생성하게 됩니다.

2. fallback 프로퍼티

fallback 프로퍼티는 paths에 지정하지 않은 경로를 요청시 동작을 설정하기 위해 사용되는 프로퍼티입니다.

해당 프로퍼티 값으로는 false, true, 'blocking'을 사용할 수 있습니다. 각 프로퍼티 값에 대한 동작은 아래 렌더링 과정에서 살펴보겠습니다.

3. notFound

"notFound 프로퍼티" 값은 불리언 값을 작성하며, true인 경우에는 404 페이지를 렌더링하게 됩니다.

4. redirect

"redirect 프로퍼티" 값은 객체이며, 객체에 destination 프로퍼티 값으로 리다이렉팅될 경로값을 작성해주면 해당 경로로 리다이렉팅하게 됩니다.

⚙️ SSG 방식을 사용하는 동적 페이지 렌더링 과정

paths에 지정된 동적 페이지 요청(HTML 문서 요청)

빌드시 서버측에서 pre-rendering하여 생성한 HTML 문서와 JSON 파일 클라이언트에게 전달
클라이언트측에서는 pre-rendering된 HTML 문서 즉시 렌더링합니다.
Hydrate 과정으로 해당 페이지 컴포넌트 함수가 실행되는데 props 객체로 JSON 파일을 사용하여 실행합니다. 또한 query 객체에는 경로 파라미터에 대한 정보를 가진 상태로 실행됩니다.

paths에 지정된 동적 페이지 접근(Link, router 메서드)

해당 페이지 컴포넌트 함수를 실행하는데 props로 빌드시 생성된 JSON 파일을 사용하여 페이지 리렌더링합니다.

paths에 지정되지 않은 동적 페이지 요청(HTML 문서 요청)

fallback: false;
1. 404 페이지를 렌더링합니다.
fallback: true;
1. 빌드시 서버측에서 생성한 Fallback 버전 HTML 문서를 클라이언트에게 전달합니다.
2. 클라이언트측에서는 Fallback 버전 HTML 문서를 즉시 렌더링합니다.
3. Hydrate 과정시 실행되는 페이지 컴포넌트 함수는 빈 query 객체인 상태로 실행합니다. 또한 props 객체 또한 빈 객체인 상태로 실행하게 됩니다.
4. 서버측에서 getStaticProps 함수를 실행한 결과를 JSON 파일로 클라이언트에게 전달하고 클라이언트측에서는 페이지 컴포넌트 함수를 실행하는데 props 객체로 JSON 파일을 사용하여 실행합니다.
  이때 query 객체 또한 경로 파라미터에 대한 정보를 가진 상태로 실행됩니다.
첫 요청시에만 Fallback 버전을 사용하며, 이후에는 생성된 HTML 문서를 paths 리스트에 추가하여 사용합니다.
fallback: 'blocking';
1. 즉시 서버측에서 getStaticProps 함수를 실행하여 초기 렌더링 데이터를 페이지 컴포넌트에게 전달하면서 실행하여 HTML 문서를 생성합니다.
  생성된 HTML 문서와 JSON 파일을 클라이언트측에게 전달합니다.
2. 클라이언트측에서는 전달받은 HTML 문서를 즉시 렌더링합니다.
3. 이후 Hydrate 과정에서 실행되는 페이지 컴포넌트 함수에 props 객체로 JSON 파일을 사용하여 실행하며, 이때 query 객체는 경로 파라미터에 대한 정보를 가진 상태로 실행됩니다.
즉, fallback: true와 달리 첫 요청시 Fallback 버전 HTML 문서를 렌더링하지 않으며 콘텐츠가 포함된 HTML 문서를 생성하여 전달해줍니다.

paths에 지정되지 않은 동적 페이지 접근(Link, router 메서드)

fallback: false;
1. 404 페이지를 렌더링합니다.
fallback: true;
1. 서버측에게 getStaticProps 함수의 결과를 JSON 파일로 요청
2. 클라이언트측에서 JSON 파일을 전달받은 뒤 JSON 파일을 props 객체로 사용하여 해당 페이지 컴포넌트 함수를 실행하여 화면 리렌더링
fallback: 'blocking';
1. 서버측에서 getStaticProps 함수의 결과를 JSON 파일로 요청
2. JSON 파일을 props로 사용하여 해당 페이지 컴포넌트 함수 실행하여 화면 리렌더링