SSG를 업데이트하기 위한 증분 정적 재생(ISR)

개요

앞선 내용과 이어지는 내용입니다!

https://choiblog.tistory.com/2

SSG, SSR의 차이점을 문제를 통해 확실히 정리

https://choi-notion-blog.vercel.app/

HOME | CBJ Blog

 

 

요약

1. Notion에 적어놨던 글들을 공유하기 위해 Notion API를 활용하여 간단한 블로그 개발

2. SSG를 사용하여 구현해서 빨랐지만 글을 업데이트했다면 다시 배포시켜야 하는 번거로움 발생

3. SSR로 변경했지만 로딩시간이 매우 길어 스켈레톤 로딩같은 개선 사항을 추가시켜보고자 했으나 2~3초 걸리는건 문제가 있다고 생각했습니다

https://www.daleseo.com/spa-ssg-ssr/

SPA와 SSG, 그리고 SSR

4. 현재 SSG의 ISR이라는 기능을 발견하고 도입

 

 

 

ISR이란?

https://nextjs.org/docs/basic-features/data-fetching/incremental-static-regeneration

Data Fetching: Incremental Static Regeneration | Next.js

Next.js를 통해 사이트를 구축한 후 정적 페이지를 업데이트 할 수 있게 해주는 방식입니다.

 

 

문제

 

 getServerSideProps에서 다시 getStaticProps변경시켰기 때문에 정적으로 생성하고 있으며 빠르게 데이터를 가져오고 있지만 업데이트가 되지 않는다는 문제점이 있습니다

export const getStaticProps: GetStaticProps = async () => {
  const notionService = new NotionService();
  const posts = await notionService.getPublishedBlogPosts();

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

 

해결 과정

https://nextjs.org/docs/basic-features/data-fetching/incremental-static-regeneration

Data Fetching: Incremental Static Regeneration | Next.js

위 공식 문서를 살펴보면 사용법은 상당히 간단합니다

 

revalidate 값(second)마다 자동적으로 정적 페이지를 업데이트 하게 되며 이후 SSG의 동일한 기능을 사용할 수 있게 됩니다. 이후 조건에 따라 업데이트 시킬 수 있는지는 모르겠지만 제가 개발한 블로그는 플랫폼이 아닌 단순한 기능만 보여주는 블로그이기 때문입니다.

 

export const getStaticProps: GetStaticProps = async () => {
  const notionService = new NotionService();
  const posts = await notionService.getPublishedBlogPosts();

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

 

하지만 getStaticPaths를 사용한다면 fallback을 true 혹은 blocking으로 변경해야 합니다.

변경해야하는 이유는 스택 오버플로우에서 찾을 수 있었고 정리해보면 다음과 같습니다.

fallback에는 3가지 값이 들어올 수 있는데 false, true, blocking입니다

fallback: false 
// 빌드시 없던 새 경로로 접근하면 404 페이지로 접근됨

fallback: true 
// 빌드시 없던 새 경로가 정적으로 생성됨 getStaticProps호출됨) - 페이지를 생성하는 동안 로드 상태
// router.isFallback통해 폴백 페이지가 표시됨
// 새 경로가 CDN에 캐시됨

fallback: 'blocking'
// 빌드시 없던 새 경로는 HTML이 생성될 때까지 대기 (SSR처럼 동작)
// 로드 상태 가 없기때문에 대체 페이지가 없습니다
// 이후 새 경로가 CDN에 캐시됩니다(나중에 다시 요청하면 캐시된 페이지 표시)

https://stackoverflow.com/questions/67787456/what-is-the-difference-between-fallback-false-vs-true-vs-blocking-of-getstaticpa

What is the difference between fallback false vs true vs blocking of getStaticPaths with and without revalidate in Next.js SSR/I

export async function getStaticPaths() {
  const notionService = new NotionService();

  const posts = await notionService.getPublishedBlogPosts();

  const paths = posts.map((post) => {
    return `/post/${post.slug}`;
  });

  return {
    paths,
    fallback: 'blocking',
  };
}

 

회고

페이지를 SSR로 변경한 이유가 데이터를 업데이트 시키기 위함이었습니다.

처음 SSG로 빌드된 뒤 글을 새로 포스팅하거나 삭제했을 때 업데이트 되지 않았을 뿐더러 notion에서 받은 이미지가 일정 시간 뒤에 만료되는 AWS를 이용했기 때문에 동적인 요청이 꼭 필요했고 다시 수정하였습니다. 이미지가 또 만료되는지는 테스트 해봐야하지만 만약 만료된다면 다시 대안을 찾아볼 예정입니다 => 만료 안되는 것으로 확인되었습니다!