Next.js의 Incremental Static Regeneration을 시도했습니다.

이른바 Incremental Static Regeneration

ISR(Incremental Static Regeneration)은 Next입니다.js의 구축 모델 중 하나입니다.
직역하면'단계적 정적 재생성'이다.간단하게 설명해 드릴게요.

클라이언트에 정적 구축 페이지로 돌아가기 요청

만료 후 액세스한 경우 백그라운드에서 정적 페이지 재생성

다음 방문 시 재생성 페이지 표시

이런 흐름.
속칭 Stale-while-revalidate의 현금 전략은 Next다.js에서 이루어졌습니다.

설치방법+샘플

URL: https://next-js-isr.vercel.app/
설치 자체가 매우 간단하다.
다음과 같이 getStaticPropos 함수의 반환값에revalidate를 추가하면 ISR가 유효합니다.

import type { GetStaticProps, NextPage } from 'next';
import Head from 'next/head';
import Image from 'next/image';
import styles from '../styles/Home.module.css';

type Props = {
   date: number;
};

export const getStaticProps: GetStaticProps<Props> = async () => {
   const date = Date.now();

   return {
       props: { date },
       revalidate: 10, // 更新間隔
   };
};

const Home: NextPage<Props> = ({ date }) => {
   return (
       <div className={styles.container}>
       // ~ 省略 ~
       
        <p>now:{date}</p>
        <p>静的に出力されたHTMLを10秒ごとに更新します</p>
        
       // ~ 省略 ~
       </div>
   );
};

export default Home;

과제.

특정한 접대 서비스에 잠기다

ISR을 이용할 수 있는 서비스는 Vercel과 Amplify 등으로 제한됩니다.
다른 서비스로 갈아타려면 ISR가 필요합니다.

데이터와 디스플레이의 일치성을 얻을 수 없습니다

항상 최신 데이터를 표시해야 하는 경우에는 ISR이 적합하지 않습니다.
액세스가 허용되면 이전 데이터를 즉시 표시하거나 마운트한 후 최신 데이터를 다시 로드할 수 있습니다.

Fastly 등 즉석 세척이 잘 안 되나요?

그건
만약 이미 그곳에 설치가 다 되었다면, 특별히 ISR를 가져올 필요가 없다.
앞으로 Stale-while-revalidate 같은 구조를 이루고 싶다면

간단한 설치

프런트엔드에서만 수행

이 점은 인스턴트 세척에 비해 ISR의 장점이 여기에 있다.