1. 탐구

1. Server Side Rendering

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

2. Server Static Generation

: 빌드 타임에 각 페이지별로 HTML을 생성하고, 해당 페이지로 요청이 올 때 이미 static하게 생성된 HTML문서를 반환

2. 고민

Gloddy프로젝트에서 정적 페이지 생성(SSG)은 불가능할까?

SSG는 빌드 타임 때 페이지를 정적으로 만드는 것이다. 로그인 이후의, 쿠키를 이용하여 데이터 fetching이 필요한 페이지는 SSG사용이 불가능하다.

Next.js 12 page routing에서 ISR은 어떻게 구현할까?

Next.js 12의 경우, getStaticProps의 revalidate옵션을 설정하면 된다.

export async function getStaticProps() {
  const Next.js 12에서의 ISRres = await fetch("<https://url>");
  const posts = await res.json();

  return {
    props: {
      posts,
    },
    revalidate: 10,
  };
}

만약 10으로 설정하면, 10초마다 페이지를 새로 만든다. 또는 handler를 사용하여 서버로부터 받은 응답에 따라 렌더링을 재실행할 수 있다.

export default async function handler(req, res) {
  // 유효한 요청인지 확인한다.
  if (req.query.secret !== process.env.MY_SECRET_TOKEN) {
    return res.status(401).json({ message: "Invalid token" });
  }

  try {
    // API 핸들러 내부에서 res.revalidate()를 사용해 원하는 상황에서 revalidate를 실행시킨다.
    // 재작성된 경로가 아닌 실제 경로여야 한다.
    // 예: "/blog/[slug]"의 경우 "/blog/post-1"로 작성해야 한다.
    await res.revalidate("/path-to-revalidate");
    return res.json({ revalidated: true });
  } catch (err) {
    // 에러가 발생하면 Next.js는 이전에 성공적으로 생성된 페이지를 계속 보여주게 된다.
    return res.status(500).send("Error revalidating");
  }
}

Next.js 13에서는 SSR 혹은 ISR을 어떻게 구현할까?

Next.js12에서 사용하던 getStaticProps 함수나 getServerSideProps함수가 필요 없어졌다. fetch함수를 사용하면 된다.

공식 문서

• Next.js extends the native fetch Web API to allow you to configure the caching and revalidating behavior for each fetch request on the server. React extends fetch to automatically memoize fetch requests while rendering a React component tree.

서버 측에서 데이터 캐싱과 갱신을 위해서 Web API인 fetch를 확장했다. React는 fetch를 사용하여 자동으로 fetch 요청을 저장한다.