ISR (Incremental Static Regeneration)

ISR을 알기 전 Next.js 선수지식

렌더링

• CSR, SSR, SSG
• 렌더링이란 UI를 HTML로 나타내는 과정이다. 렌더링은 클라이언트에서 일어날 수도 있고 서버에서 일어날 수도 있다.
• 클라이언트에서 렌더링이 일어나는 것을 Client Side Rendering이라고 한다. 서버로부터 빈 HTML과 UI를 구성하기 위한 정보가 담긴 javascript 파일을 받아서 유저 디바이스에서 렌더링 작업을 시작한다.
• 이것과 대비되는 개념으로 서버에서 렌더링이 일어나는 것을 Pre-rendering이라고 한다. 클라이언트에 전송되기 전에 미리(Pre) HTML을 만들어서 전송한다는 의미이다. CSR을 사용하려면 useEffect나 useSWR을 사용해서 클라이언트에서 data fetching을 한다.
• Pre-rendering에는 Static Site Generation과 Server Side Rendering이 있다. Nextjs의 디폴트 동작은 Pre rendering이다.
• 둘 다 HTML을 미리 만든 뒤 클라이언트에 전송한다는 점에서 공통점이 있지만, 차이점은 런타임에 만드느냐 빌드타임에 만드느냐이다.
• Static Site Generation은 빌드타임에 HTML을 만들어놓고 배포된 뒤 유저 요청이 올때마다 CDN에서 저장된 HTML을 서빙한다. 즉 런타임에는 서버가 없다. SSG를 사용하려면 getStaticProps를 사용한다.
• Server Side Rendering은 SSG와 달리 런타임에 유저 요청이 있을 때마다 서버에서 HTML을 만들어서 보내준다. HTML과 javascript instruction, json data를 보내서 HTML을 먼저 보여주고 거기에 이벤트 핸들러를 붙여서 interactive하게 만드는 hydration 과정을 거친다. SSR을 사용하려면 getServersideProps를 사용한다.
• ref: https://nextjs.org/learn/foundations/how-nextjs-works/rendering

ISR

• static page generation은 빌드 타임에 모든 페이지를 미리 생성한다.
• isr은 모든 페이지를 생성하지 않고 페이지 단위로 갱신을 가능하게 한다.

적용 방법

적용하는 방법은 getStaticProps 함수 리턴문 내에 revalidate 필드를 포함시키면 된다.

export async function getStaticProps() {
    const res = await fetch('https://.../posts')
    const posts = await res.json()

    return {
        props: {
            posts,
        },
        revalidate: 10 // 초 단위
    }
}

revalidate에 매핑되는 시간 동안 페이지는 캐싱되고, 그 시간이 지난 이후 접속한 유저가 있으면 새로운 페이지를 뒷단에서 생성한다. 이 생성이 성공적이면 캐시를 무효화하고 새로 갱신한 페이지를 보여준다.

revalidate을 추가하면 x-nextjs-cache 필드가 response 헤더에 추가된다. 이 값은 MISS, STALE, HIT 3가지 중 하나이다.

• MISS: 캐시에 이 path가 없다. 처음 방문 시 최대 한 번 발생.
• STALE: 캐시에 있으며, revalidate 타임이 지나서 stale한 상태이므로 백그라운드에서 갱신이 진행될 것이다.
• HIT: 캐시에 있으며, revalidate 타임을 초과하지 않았다.

export async function getStaticPaths() {
    const res = await fetch('https://.../posts')
    const posts = await res.json()

    return { paths: posts.map(x => ({ params: id: x.id }), fallback: 'blocking' }
}

getStaticPaths에 정의된 path들만 빌드 타임에 pre render를 진행하고 fallback 필드에 정의된 값에 따라 서버 렌더링을 해서 페이지를 갱신한다.

fallback 값으로 올 수 있는 값은 true, false, 'blocking' 이다.

• false: getStaticPaths로부터 리턴되지 않은 path는 404 페이지를 보여준다.
• true: getStatisPaths로부터 리턴되지 않은 path는 404를 보여주는 게 아니라 fallback 페이지를 보여주다가 백그라운드에서 html을 생성한 다음 유저에게 보이는 페이지를 갈아낀다. 이 새로운 페이지로 pre render 리스트에 추가한다.
• blocking: getStatisPaths로부터 리턴되지 않은 path는 유저 리퀘스트가 왔을 때 페이지를 만든 다음에 완성되면 클라이언트에 표시한다. true랑의 차이는 fallback이 보여지느냐 아니냐이다.