Next.js 3-2. getStaticProps (SSG)

이전 글에 이어 계속 작성된다.

• TypeScript에서 getStaticProps 사용하기

  getStaticProps의 타입은 GetStaticProps from 'next'를 사용하여 정의할 수 있다.

import { GetStaticProps } from 'next'

type Post = {
  author: string;
  content: string;
}

export const getStaticProps: GetStaticProps<{ posts: Post[] }> = async (context) => {
  const res = await fetch('https://.../posts')
  const posts: Post[] = await res.json()

  return {
    props: {
      posts,
    },
  }
}

 

  만약 props에 유추된 타입선언을 얻으려면 InferGetStaticPropsType<typeof getStaticProps>를 사용할 수 있다.

import { InferGetStaticPropsType, GetStaticProps } from 'next'

type Post = {
  author: string;
  content: string;
}

export const getStaticProps: GetStaticProps<{ posts: Post[] }> = async () => {
  const res = await fetch('https://.../posts')
  const posts: Post[] = await res.json()

  return {
    props: { posts },
  }
}

function Blog({ posts }: InferGetStaticPropsType<typeof getStaticProps>) {
  // will resolve data to type Post[]
}

export default Blog

 

  getStaticProps에 대한 암시적 타입선언도 제대로 작동한다.

import { InferGetStaticPropsType } from 'next'

type Post = {
  author: string;
  content: string;
}

export const getStaticProps = async () => {
  const res = await fetch('https://.../posts')
  const posts: Post[] = await res.json()

  return {
    props: { posts },
  }
}

function Blog({ posts }: InferGetStaticPropsType<typeof getStaticProps>) {
  // will resolve data to type Post[]
}

export default Blog

 

 

• getStaticProps는 언제 사용해야 하는가?

  getStaticProps는 정적으로 생성된 페이지에 대한 데이터를 제공하는 데 사용되는 함수이다. getStaticProps를 사용하는 순간은 다음과 같다.

1. 동적 라우팅을 사용하는 경우: Next.js에서 동적 라우팅을 사용하여 페이지를 생성하는 경우 getStaticProps를 사용하여 해당 페이지에 필요한 데이터를 가져온다. 예를 들어, 게시물 목록 페이지에서 특정 게시물의 내용을 보여주는 페이지로 이동할 때, 게시물 id를 params로 받아 getStaticProps를 사용하여 해당 게시물에 대한 데이터를 가져올 수 있다.
2. 데이터를 미리 가져와야 하는 경우: 빌드 시점에 페이지가 생성될 때, 페이지에 필요한 데이터가 있다면 getStaticProps를 사용하여 해당 데이터를 미리 가져올 수 있다. 예를 들어, 블로그 포스트 목록 페이지에서 미리 최신 포스트 목록을 자여와 페이지에 렌더링 하는 경우 getStaticProps를 사용하여 최신 포스트 목록을 미리 가져올 수 있다.
3. 서버 사이드 렌더링(SSR)을 사용하는 경우: Next.js에서 SSR을 사용하여 페이지를 생성하는 경우 getStaticProps를 사용하여 해당 페이지에 필요한 데이터를 서버에서 가져올 수 있다.

 

 

• getStaticProps가 실행되는 경우

1. 항상 서버에서 실행되며 클라이언트에서는 실행되지 않는다.
2. next build가 실행될 때 동작한다.
3. 페이지에서만 사용가능하다. 즉, _app, _document, _error 파일에서는 사용이 불가능하다. React는 페이지가 렌더링 되기 전에 필요한 모든 데이터를 가지고 있어야 하기 때문이다.
4. next dev로 실행하면 getStaticProps는 매 요청마다 호출된다.

 

 

• 서버 코드를 직접 작성하는 경우

  서버 쪽에서만 실행이 되기 때문에 getStaticProps는 클라이언트 쪽에서는 실행되지 않는다. 브라우저용 JS 번들에도 포함되지 않으므로 브라우저로 보내지 않고 직접 DB쿼리를 작성할 수도 있다. 즉, getStaticProps로부터 외부에서 데이터를 가져오는 API 경로 대신 서버 쪽 코드를 getStaticProps에 직접 작성할 수 있는 것이다.

// lib/load-posts.js

// 아래의 함수는 'lib/ 디렉토리부터의 getStaticProps와 API 경로를 공유한다.
export async function loadPosts() {
  // 외부 API 엔드포인트를 호출하여 게시물을 가져온다.
  const res = await fetch('https://.../posts/')
  const data = await res.json()
  
  return data
}

// pages/blog.js
import { loadPosts } from '../lib/load-posts'

// 이 함수는 오직 서버 쪽에서만 실행된다.
export async function getStatcProps() {
  // '/api' 경로를 가져오는 대신 다음과 같이 호출 할 수 있다.
  const posts = await loadPosts()
  
  // 반환된 props는 페이지 컴포넌트로 전달된다.
  return { props: { posts } }
}

또한 만약 데이터를 fetch 하기 위해 API 경로를 사용하지 않는다면 fetch() API를 getStaticProps에 직접 사용할 수도 있다.

 

 

• HTML과 JSON을 모두 정적으로 생성하는 것에 대해서

  getStaticProps가 포함된 페이지가 빌드 시 사전 렌더링되면 페이지의 HTML 파일 외에도 Next.js는 실행 결과를 포함하는 JSON 파일을 생성한다. 이 JSON파일은 next/link 또는 next/router를 통한 클라이언트 측 라우팅에 사용된다.

  getStaticProps를 사용하여 사전 렌더링된 페이지로 이동하면 Next.js는 이 JSON 파일 (빌드 시 미리 계산됨)을 가져와 페이지 컴포넌트의 props로 사용한다. 즉, 클라이언트 측 페이지 전환에서는 오직 내보낸 JSON만 사용되고 getStaticProps를 호출하지 않는다.

  Incremental Static Generation(ISR)을 사용하는 경우 getStaticProps는 클라이언트 측 navigation에 필요한 JSON을 생성하기 위해 백그라운드에서 실행된다. 동일한 페이지에 대한 여러 요청의 형태로 이것을 볼 수도 있지만, 이는 의도된 것이며 최종적으로 사용자 성능에는 영향을 미치지 않는다.

 

 

• 미리 보기 모드

  예를 들어 headless CMS를 사용 중이고 페이지가 렌더링 되기 전에 미리 보고 싶을 수도 있다. 그때 preview Mode를 사용하여 빌드 대신 정적 생성을 일시적으로 우회하고 페이지를 렌더링 할 수 있다.