#03 Next.js (Pages Router) + TypeScript : getServerSideProps, getStaticProps, getStaticPaths

1. SSR : getServerSideProps 함수

- Server에서만 실행 / 브라우저에서 실행 x (콘솔에서 확인 x)

- runtime에서만 실행

- context 객체를 통해 쉽게 query에 접근 가능

- Context 객체를 통해, 클라이언트 부분에서는 useRouter()를 사용해서 접근하기

- Post Page에서는 next router를 통해 URL Query 파라미터에 접근 가능

- getServerSideProps의 반환 값은 Post page의 props로 전달

// pages/ssr/[id].tsx 

import { GetServerSideProps } from 'next';
import { useRouter } from 'next/router';
import React from 'react';

interface PostInterface {
    userId: number;
    id: number;
    title: string;
    body: string;
}

interface PostProps {
    post: PostInterface;
}

const Post = ({ post }: PostProps) => {
    const router = useRouter();
    const { id } = router.query;

    return (
        <div>
            post : {id}
            <h2>{post.title}</h2>
            <p>{post.body}</p>
        </div>
    );
};

export default Post;

export const getServerSideProps: GetServerSideProps<PostProps> = async (context) => {
    const { id } = context.query;
    const response = await fetch(`https://jsonplaceholder.typicode.com/posts/${id}`);
    const post = await response.json();
    return {
        props: {
            post,
        },
    };
};

 

2. SSG : getStaticProps 함수 (1)

- Server에서만 실행 / 브라우저에서 실행 x (콘솔에서 확인 x)

- runtime에서만 실행 (yarn build 실행할때만 실행)

- 다이나믹 라우트의 경우 getStaticPaths 함수를 통해 관련된 정보 리턴 필요!

- getStaticProps의 return 값은 Post page의 props로 전달

 

3. SSG : getStaticPaths 함수 (2)

- getStaticProps를 이용하는 페이지에서 다이나믹 라우트를 제공하기 위함

- 미리 어떤 paths를 Static Site Generation 할 지 정해두는 역할

- getStaticPaths에서는 getStaticProps 가 있어야 실행

- getStaticPaths의 return 값은 getStaticProps의 props로 전달

 

* 빌드 전 .next 파일 삭제 필요시 : rm -rf .next

> yarn build > .next 폴더/ssg 폴더 안에 getStaticPaths에서 설정한 id:1 / id:2 파일이 생성

// pages/ssg/[id].tsx

import { GetStaticProps } from 'next';
import { useRouter } from 'next/router';
import React from 'react';

interface PostInterface {
    userId: number;
    id: number;
    title: string;
    body: string;
}

interface PostProps {
    post: PostInterface;
}

const Post = ({ post }: PostProps) => {
    const router = useRouter();
    const { id } = router.query;

    //getStaicPaths()에서 fallback :true로 설정시
    //요청하지 않은 페이지는 loading.. 보여주고 페이지를 서버에서 생성 후 보여줌
    if (router.isFallback) {
        return <div>Loading..</div>;
    }


    return (
        <div>
            post : {id}
            <h2>{post.title}</h2>
            <p>{post.body}</p>
        </div>
    );
};

export default Post;

export const getStaticPaths = () => {
    return {
        paths: [{ params: { id: '1' } }, { params: { id: '2' } }],
        fallback: false,
    };
};

export const getStaticProps: GetStaticProps<PostProps> = async ({ params }) => {
    const response = await fetch(`https://jsonplaceholder.typicode.com/posts/${params?.id}`);
    const post = await response.json();
    return {
        props: {
            post,
        },
        //  revalidate: 5,
    };
};

> getStaticPaths 함수의 fallback

 

: [ fallback :false] 제공하지 않는 페이지=> 모두 404로 연

: [ fallback :true] 제공하지 않는 페이지를 요청할 경우,

                            fallback 페이지를 먼저 보여주고 +  해당 페이지를 서버에서 생성

: [ fallback :blocking] 제공하지 않는 페이지를 요청할 경우,

                                   페이지를 서버에서 생성한 이후에 보여줌.

 

4. ISR: getStaticProps 함수 + revalidate 속성 추가

: static page에 요청이 들어오고 나서 5초 이후에는 다시 한 번 해당 페이지를 빌드

export const getStaticProps: GetStaticProps<PostProps> = async ({ params }) => {
    //json-server(localhost4000)
    const response = await fetch(`https://localhost:4000/posts/${params?.id}`);
    const post = await response.json();
    return {
        props: {
            post,
        },
        revalidate: 5,
    };
};

 

끝.