ISR/SSG(기본개념)

ISR(Incremental Static Regeneration) - Page router 적용

서버측에서 주기적으로 HTML을 서버에서 생성해두고 내려줌(처음 빌드 시점에 만들어두고, 설정한 주기마다 다시 렌더링하여 HTML을 생성해둔다)

사용페이지

• 정해진 주기 단위로 정적데이터를 노출하는 페이지

장점

• 페이지 로딩 시간이 빠름
• 자바스크립트를 필요로 하지 않음
• SEO 에 좋음
• 보안이 뛰어남
• CDN 캐시 가능
• 데이터가 주기적으로 업데이트가 이루어짐

단점

• 실시간 데이터가 아님
• 사용자별 정보 제공의 어려움(mypage 같은걸 사용자별로 다 HTML을 미리 생성해 놓을순 없다)

구현방법

// pages/posts/[id].js
import { useRouter } from 'next/router';
import { getPostData, getAllPostIds } from '../../lib/posts';

export default function Post({ postData }) {
  const router = useRouter();

  if (router.isFallback) {
    return <div>Loading...</div>;
  }

  return (
    <article>
      <h1>{postData.title}</h1>
      <div dangerouslySetInnerHTML={{ __html: postData.contentHtml }} />
    </article>
  );
}

export async function getStaticPaths() {
  const paths = getAllPostIds();
  return {
    paths,
    fallback: true, // true이면 빌드되지 않은 페이지를 접근할 때 ISR이 적용됩니다.
  };
}

export async function getStaticProps({ params }) {
  const postData = await getPostData(params.id);
  return {
    props: {
      postData,
    },
    revalidate: 10, // 페이지가 10초마다 재생성됩니다.
  };
}

SSG(Static Site Generation)

Next.js가 빌드를 하는 시점에 서버에서 정적인 HTML을 미리 생성한다.

사용 페이지

• 데이터가 자주 변하지않는 정적페이지에 사용

장점

• 페이지 로딩 시간이 빠름
• 자바스크립트를 필요로 하지 않음
• SEO 에 좋음
• 보안이 뛰어남
• CDN 캐시 가능

단점

• 정적인 내용
• 실시간 데이터가 아님
• 사용자별 정보 제공의 어려움(mypage 같은걸 사용자별로 다 HTML을 미리 생성해 놓을순 없다)

특징

• Next.js 는 기본적으로 SSG로 동작
• SSG와 SSR은 서버측에서 렌더링하는것은 맞지만, build 시점인지 runtime 시점 인지에 대한 차이가 존재
• 어떤 렌더링 방식을 사용할지는 개발자가 선택하면 된다.
• 하나에 완벽한 렌더링 솔루션은 존재하지 않는다.
• Next.js 가 사랑받는 이유는 다양한 렌더링 방식 제공과 이를 적절히 혼합해서 사용이 가능하기 때문이다.