[Next.js] getStaticProps, getServerSideProps

 

SG / SSR의 개념

SG : Static Generation
SSR : Server Side Rendering

    Next는 브라우저 렌더링 시, 기본적으로 Pre-rendering(사전렌더링)을 한다
Pre-rendering이란, 각 페이지들을 사전에 미리 HTML 문서로 생성하여 가지고 있는 것이다.
이 말을 리액트와 비교해 보자면 아래와 같다.

    리액트에서 CSR 방식은  번들링 된 JS 가 클라이언트 단에서 모든 렌더링을 담당했다.

하지만, Next의 Pre-rendering 시스템에서는 `빌드타임(Build Time)` 에서 해당하는 페이지 별로 각각의 HTML 문서를 미리 생성해서 가지고 있다가 서버로 해당페이지에 대한 요청이 들어올 때 알맞은 페이지를 반환해준다.

 

No Pre-Rendering, React.js

Initial Load : App is not rendered.
    => JS Loads
    => Hydration : React Components are initialized & App becomes interactive.

 

Pre-Rendering, Next.js

Initial Load : Pre-rendered HTML is displayed.
    => JS Loads
    => Hydration : React Components are initialized & App becomes interactive.
        <Link />처럼 컴포넌트와 인터랙션이 필요한 컴포넌트는 JS 로드 후, 활성화 된다.

 

Static Generation

HTML을 빌드타임(Build Time)에 각 페이지별로 생성하고
해당 페이지로 요청이 올 경우 이미 생성된 HTML 문서를 반환한다.

Server-Side Rendering

요청이 올 때 마다 해당하는 HTML 문서를 그때 그때 생성하여 반환한다.

getStaticProps

만약 해당 문서에 출력되는 내용이 고정된 내용이라고 가정해보자. 요청할때마다 새로운 HTML 생성이 필요하지 않다. 첫 요청에 하나의 정적 HTML문서를 생성 후, 그 이후 요청엔 같은 HTML을 반환하면 될것이다. 이때 화면에 들어갈 데이터 역시 미리 서버에서 처리하여 완성된 정적 HTML 문서를 반환한다면 SEO 적용이 용이 한 것이다.

 

    - 빌드 시 딱 한번만 호출되며 static file로 빌드된다 (수정 불가)
    - 빌드 후 바뀌지 않는 고정된 내용이 있는 페이지가 있는 경우 사용하는 것이 좋다
    - 장점 : 호출 시 매번 data fetch를 하지 않음
    - 성능 : getStaticProps > getServerSideProps
    - getStaticProps(): { props: 응답데이터 }

getServerSideProps

StaticProps와는 다르게 해당 페이지를 요청 받을때마다 호출되어 pre-rendering 한다
pre-render가 꼭 필요한 `동적 데이터가 있는 페이지`에 사용

 

Dynamic Routing 방식을 통한 예제를 살펴보자.
pages/post/[postID].js의 코드라고 생각해보자.

import React from 'react'

const PostDetail = ({ post }) => {
    return (
        <PostItem>
            <PostDate>{post.date}</PostDate>
            <PostTitle>{post.title}</PostTitle>
            <PostSubTitle>{post.subTitle}</PostSubTitle>
            <PostDesc>{post.desc}</PostDesc>
        </PostItem>
    )
}

export default PostDetail

export const getServerSideProps = async (ctx) => {
    const postID = ctx.params.postID
    const response = await fetch(`https://some.blog/posts/${postID}`)
    const data = await response.json()

    return {
        props: {
            post: data
        }
    }
}