Incremental Static Rendering (RevalidatingPost)

#17RenderingMedium

Incremental Static Rendering (RevalidatingPost)

Incremental Static Rendering

stale-while-revalidate 전략을 따르는 <RevalidatingPost />를 구현하세요. 캐시된 콘텐츠를 즉시 보여주고, revalidateMs 경과 후 백그라운드에서 다시 fetch하여 데이터를 교체합니다.

Props

type Post = { id: string; title: string };

interface RevalidatingPostProps {
  postId: string;
  revalidateMs: number;
  initialPost: Post; // 빌드 타임 캐시처럼 즉시 표시
  fetchPost: (id: string) => Promise<Post>;
}

동작

마운트 시 initialPost.title을 즉시 렌더 (캐시된 정적 데이터).
revalidateMs 이후 fetchPost(postId)를 호출해 백그라운드 재검증.
fetch가 성공하면 새 title로 교체. 실패하면 기존 값 유지.

학습 포인트

정적 콘텐츠 + 주기적 재검증 = ISR의 핵심
useEffect + setTimeout으로 백그라운드 갱신 스케줄링
fake timers로 비동기 타이밍을 결정적으로 테스트

import { useEffect, useState } from 'react';

export type Post = { id: string; title: string };

export interface RevalidatingPostProps {
  postId: string;
  revalidateMs: number;
  initialPost: Post;
  fetchPost: (id: string) => Promise<Post>;
}

export function RevalidatingPost(props: RevalidatingPostProps) {
  // TODO: initialPost를 즉시 보여주는 state 만들기
  // TODO: revalidateMs 이후 fetchPost로 재검증하기 (실패 시 기존 값 유지)
  // TODO: 정리(cleanup)도 잊지 마세요
  return <article data-testid="post">{props.initialPost.title}</article>;
}

Open Sandbox

Sandpack 로드 중…

import { useEffect, useState } from 'react';

export type Post = { id: string; title: string };

export interface RevalidatingPostProps {
  postId: string;
  revalidateMs: number;
  initialPost: Post;
  fetchPost: (id: string) => Promise<Post>;
}

export function RevalidatingPost(props: RevalidatingPostProps) {
  // TODO: initialPost를 즉시 보여주는 state 만들기
  // TODO: revalidateMs 이후 fetchPost로 재검증하기 (실패 시 기존 값 유지)
  // TODO: 정리(cleanup)도 잊지 마세요
  return <article data-testid="post">{props.initialPost.title}</article>;
}

Open Sandbox