[Next.js] Next.js 13에서 SSG, SSR, ISR 적용하기_fetch() API

NEXT.JS 13 버전에서는 getStaticProps, getServerSideProps 함수를 더 이상 사용하지 않는다는 소식을 보고 그럼 SSR과 SSG는 어떻게 적용할 수 있는 걸까 궁금해서 찾아봤다.

 

일단 NEXT 13부터 모든 컴포넌트가 기본적으로 서버 컴포넌트로 동작하게 되었으며 SSR, SSG, ISR을 적용하기 위해서 

getStaticProps, getServerSideProps 등의 함수가 아닌 fetch API를 사용한다.

 

Data Fetching

// This request should be cached until manually invalidated.
// Similar to `getStaticProps`.
// `force-cache` is the default and can be omitted.
fetch(URL, { cache: 'force-cache' });

// This request should be refetched on every request.
// Similar to `getServerSideProps`.
fetch(URL, { cache: 'no-store' });

// This request should be cached with a lifetime of 10 seconds.
// Similar to `getStaticProps` with the `revalidate` option.
fetch(URL, { next: { revalidate: 10 } });

The native fetch Web API has also been extended in React and Next.js. It automatically dedupes fetch requests and provides one flexible way to fetch, cache, and revalidate data at the component level. This means all the benefits of Static Site Generation (SSG), Server-Side Rendering (SSR), and Incremental Static Regeneration (ISR) are now available through one API

Next.js 13 공식문서를 확인하면 SSG, SSR, ISR 렌더링 방식을 fetch Web API 하나로 모두 설정할 수 있다고 한다. fetch API를 사용할 때 원하는 캐시 옵션을 설정하면 된다.

 

 

1. SSG (force-cache)

// This request should be cached until manually invalidated.
// Similar to `getStaticProps`.
// `force-cache` is the default and can be omitted.
fetch(URL, { cache: 'force-cache' });

• getStaticProps와 비슷한 옵션
• force-cache는 fetch API를 사용할 때 기본값이며 생략 가능하다.
• 처음에는 서버 렌더링 방식으로 작동하고 두 번째부터는 캐시 된 값을 불러온다.

 

2. SSR (no-store)

// This request should be refetched on every request.
// Similar to `getServerSideProps`.
fetch(URL, { cache: 'no-store' });

• getServerSideProps와 비슷한 옵션
• 매 요청 시마다 서버 사이드 렌더링 방식으로 작동한다.
• 모든 요청에서 최신 데이터를 받아올 수 있다.

 

3. ISR (revalidate)

// This request should be cached with a lifetime of 10 seconds.
// Similar to `getStaticProps` with the `revalidate` option.
fetch(URL, { next: { revalidate: 10 } });

• revalidate 옵션이 있는 getStaticProps와 비슷하다.
• revalidate 설정 시간마다 캐시를 갱신한다.
• revalidate 설정 시간 이후 해당 페이지에 대한 요청이 들어온다면 데이터를 refetch 하고 페이지를 재생성한다.

 

---

generateStaticParams()

export function generateStaticParams() {
  return [{ id: '1' }, { id: '2' }, { id: '3' }]
}
 
// Three versions of this page will be statically generated
// using the `params` returned by `generateStaticParams`
// - /product/1
// - /product/2
// - /product/3
export default function Page({ params }: { params: { id: string } }) {
  const { id } = params
  // ...
}

// Return a list of `params` to populate the [slug] dynamic segment
export async function generateStaticParams() {
  const posts = await fetch('https://.../posts').then((res) => res.json())
 
  return posts.map((post) => ({
    slug: post.slug,
  }))
}
 
// Multiple versions of this page will be statically generated
// using the `params` returned by `generateStaticParams`
export default function Page({ params }) {
  const { slug } = params
  // ...
}

• 기존 getStaticPaths 함수가 generateStaticParams로 대체되었다.
• SSG를 적용할 때 generateStaticParams에 지정된 모든 경로(페이지)를 정적으로 미리 생성한다.

 

---

SSG 코드 예시

import React from 'react'

type Props = {
  params: {
    todoId: string,
  },
}

const fetchTodo = async (todoId: string) => {
  const res = await fetch(
    `https://jsonplaceholder.typicode.com/todos/${todoId}`,
    { cache: 'force-cache' },
  )
  const todo: TodoType = await res.json()
  return todo
}

async function TodoId({ params: { todoId } }: Props) {
  const todo = await fetchTodo(todoId)

  return (
    <div className='space-y-2 border-4 border-blue-400 bg-slate-300 p-2'>
      <div>Todo Id : {todoId}</div>
      <div>Todo Title : {todo.title}</div>
      <div className='border-t border-black py-2'>
        Completed :{todo.completed ? <span> Yes</span> : <span> No</span>}
      </div>
    </div>
  )
}

export default TodoId

export async function generateStaticParams() {
  const res = await fetch(`https://jsonplaceholder.typicode.com/todos/`)
  const todos: TodoType[] = await res.json()

  // [ { todoId: '1'}, {todoId: '2'}, ...{todoId: '200'}]
  return todos.map(todo => ({
    todoId: todo.id.toString(),
  }))
}

• generateStaticParams로 todo.id를 params로 넘긴다.
• TodoId 컴포넌트에서 params를 받고, fetch 함수를 실행할 때 params를 인자로 다시 넘긴다.
• 데이터를 fetch할 때 인자로 받은 todoId를 이용해서 특정 todoId의 데이터만 fetch 한다.

 

import React from "react";
import { notFound } from "next/navigation";

...
...
...

async function TodoId({ params: { todoId } }: Props) {
  const todo = await fetchTodo(todoId);
  if (!todo.id) return notFound();

  return (
   ...
   ...
  );
}

• 추가적으로 generateStaticParams에서 미리 동적으로 생성하지 않은 페이지에 접속했을 경우에 404 페이지로 이동하려면 Next.js에서 제공하는 notFound 컴포넌트를 이용한다.
• /todos/[todoId] 디렉터리에 not-found.tsx 파일을 생성해야 한다.

 

---

참고 문서

Next.js 13

Data Fetching: Fetching | Next.js

Functions: generateStaticParams | Next.js

Next.js 13에서 SSG와 ISR 적용하기

[Next.js] Next.js 13 - Data Fetching, Server Components