Next.js 3-1. getStaticProps (SSG)

  SSG(Static Stie Generator)는 페이지를 호출할 때마다 서버에서 사전렌더링(pre-render)하는 SSR과 달리 빌드 시점에 사전 렌더링을 한다.

export async function getStaticProps(context) {
  return {
    props: {},
  }
}

 

• context 파라미터

context의 파라미터는 다음과 같은 키들을 포함하는 객체이다.

1. params: 이 페이지가 동적 경로를 사용하는 경우 params는 경로 파라미터를 포함한다. 만약 이 페이지의 이름이 [id].js인 경우에는 params는 { id: ... }와 같이 표시된다.
2. preview: preview는 페이지에 미리보기 모드가 있으면 true, 없으면 false이다.
3. previewData: setPreviewData로 설정된 미리보기 데이터이다.
4. locale: 활성 로케일을 포함(활성화된 경우)
5. locales: 지원되는 모든 로케일을 포함(활성화된 경우)
6. defaultLocale: 구성된 기본 로케일을 포함(활성화된 경우)

 

• getStaticProps의 반환 값

1. props

  props 객체는 페이지 컴포넌트에서 각 값을 받는 키-값 쌍이다. 전달된 모든 props는 JSON.stringify가 사용가능한 객체 형태여야 한다.

export async function getStaticProps(context) {
  return {
    props: { message: 'Next.js is awesome' }, //
  }
}

 

2. revalidate

  revalidate 속성은 페이지 재생성이 발생할 수 있는 시간(초)를 지정한다. (기본값은 false이고, 유효성 재검사는 없다)

// 이 함수는 서버 측에서 빌드 할 때 호출된다.
// 유효성 재검사가 활성화되고 새 요청이 들어온다면 다음과 같은 서버리스 함수에서 다시 호출될 수 있다.
export async function getStaticProps() {
  const res = await fetch('https://.../props')
  const posts = await res.json()
  
  return {
    props: {
      posts,
    },
    // Next.js는 페이지 재생성을 시도한다.
    // 요청이 들어올 때,
    // 최대 10초마다 한 번
    revalidate: 10,
  }
}

 

 

  ISR을 활용하는 페이지의 캐시 상태는 x-nextjs-cache 응답 헤더의 값을 읽어서 확인 할 수 있다. 해당 값은 아래와 같다. 

MISS	경로에 캐시 없음(최초 방문 시 최대 한 번 발생)
STALE	경로에 캐시가 있지만 재검증 시간을 초과하여 백그라운드에서 업데이트 됨.
HIT	경로에 캐시가 있고 유효성 재검사 시간을 초과하지 않음

 

3. notFound

  notFound 불리언은 페이지를 404 상태와 404 Page를 반환하는 것을 허용한다. notFound: true를 사용하면 이전에 성공적으로 생성도니 페이지가 있더라도 404를 반환한다. 이 것은 작성자가 사용자 생성 콘텐츠를 제거하는 것과 같은 사용 사례를 지원하기 위한 것이다.

export async function getStaticProps(context) {
  cosnt res = await fetch('https://.../data')
  const data = await res.json()
  
  if (!data) {
    return {
      notFound: truem
    }
  }
  
  return {
    props: { data },
  }
}

 

4. redirect

  redirect 객체는 내부 및 외부 리소스로의 리디렉션을 허용한다. 이것은 { destination: string, permanent: boolean } 모양과 일치해야 한다. 드문 경우지만 HTTP를 요청하는 클라이언트가 제대로 리디렉션되도록 사용자 지정 상태 코드를 할당해야 할 수도 있다. 이런 경우 permanent 속성 대신 statusCode 속성을 사용할 수 있지만 둘 다 사용할 수는 없다.

export async function getStaticProps(context) {
  const res = await fetch('https://.../data')
  const data = await res.json()
  
  if (!data) {
    return {
      redirect: {
        destination: '/',
        permanet: false,
      },
    }
  }
  
  return {
    props: {},
  }
}

 

 

• 파일 읽기: process.cwd() 사용

  getStaticProps은 파일을 .NET의 파일 시스템에서 직접 읽을 수 있다. 일단 파일의 전체 경로를 가져와야 한다. Next.js는 코드를 별도의 디렉토리로 컴파일 하므로 리턴하는 경로가 디렉토리와 다르기 때문에 _dirname을 사용할 수는 없다. 대신 next.js가 실행되는 디렉토리를 제공하는 process.cwd()를 사용할 수 있다.

import { promises as fs } from 'fs'
import path from 'path'

// posts는 빌드 시 getStaticProps()에 의해 채워진다.
function Blog({ props }) {
  return (
    <ul>
      {posts.map((post) => (
        <li>
          <h3>{post.filename}</h3>
          <p>{post.content}</p>
        </li>
      ))}
    </ul>
  )
}

// 이 함수는 서버 측에서 빌드 시 호출된다.
// 클라이언트 측에서 호출되지 않으므로 직접적ㅇ니 db 쿼리를 사용할 수도 있다.
export async function getStaticProps() {
  const postsDirectory = path.join(precess.cwd(), 'posts')
  const filenames = await fs.readdir(postsDirectory)
  
  const posts = filename.map(async (filename) => {
    const filePath = path.join(postsDirectory, filename)
    const fileContents = await fs.readFile(filePath, 'utf8')
    
    return {
      filename,
      content: fileContents,
    }
  })
  // { props: { posts } }를 반환함으로서 Blog 컴포넌트가 빌드 시 props로 'posts'를 받는다.
  return {
    props: {
      posts: await Promise.all(posts),
    },
  }
}

export default Blog