14. Next.js Router Cache 이해하기

어떤 문제점이 있을까?

<!--layout.tsx 일부-->
<nav className="flex px-96 p-10 justify-around font-bold text-xl border-b-2 border-gray-700">
    <Link href="/" className="hover:text-blue-500">메인</Link>
    <Link href="/posts" className="hover:text-blue-500">게시글</Link>
</nav>

// posts/page.tsx

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

const getPosts = async () => {
    const res = await fetch("https://{URL}/api/v1/posts", {
        cache: "no-store"
    });

    if (!res.ok) {
        throw new Error("Failed to fetch posts");
    }

    return res.json() as Promise<Post[]>;
};

export default async function Posts() {
    const posts = await getPosts();
    return (
        <div className="p-4">
            {posts.map((post) => (
                <ul key={post.id} className="p-10 border-4 border-y-2 border-blue-500">
                    <p>ID: {post.id}</p>
                    <p>TITLE: {post.title}</p>
                    <p>DESCRIPTION: {post.description}</p>
                </ul>
            ))}
        </div>
    )
}

[
  {
    "title": "salmon",
    "description": "payment",
    "id": "1"
  },
  {
    "title": "bus",
    "description": "finally",
    "id": "2"
  }
]

 

실행 결과, 현재 게시글 데이터가 잘 표시되고 있다.

 

 

 

 

첫 번째 시나리오

1. 게시글 페이지 최초 이동

2. 게시글 데이터 업데이트

3. 게시글 페이지 새로고침

두 번째 시나리오

1. 게시글 페이지 최초 이동

2. 게시글 데이터 업데이트

3. 메인 페이지로 이동

4. 다시 게시글 페이지로 이동

클라이언트 컴포넌트와의 비교

1. 게시글 페이지 최초 이동



( 최초 페이지와 자바스크립트 청크 및 css를 받아오는 모습이다 )

2. 게시글 데이터 업데이트

3. 메인 페이지로 이동



( 메인 페이지의 서버 컴포넌트를 받아온 모습이다 )

4. 다시 게시글 페이지로 이동



( 아무런 변화가 없다.. 아무것도 요청하지 않는다.. )

왜 새로운 요청이 없지?

• Router Cache는 사용자 세션이 지속되는 동안 개별 경로 세그먼트로 분할되어 있다.

• 각 세그멘트에는 RSC payload를 저장하는 캐시가 있다.

• 방문한 경로가 캐시되므로 페이지를 다시 로드하지 않고 즉각적으로 이동할 수 있다.

• prefetch 옵션이 true라면 5분, 아니라면 30초동안 캐시가 지속된다.

해결방법

• 30초를 기다린다.

• router.refresh() 또는 revalidatePath 또는 revalidateTag 메소드를 사용한다.

"use client"

import {useRouter} from "next/navigation";
import {useEffect} from "react";

export default function Refresh() {
    const router = useRouter();

    useEffect(() => {
        router.refresh();
    }, [router]);

    return null;
}

더 좋은 방법은 없나..

Deep Dive: Caching and Revalidating · vercel next.js · Discussion #54075

The Next.js App Router introduced new heuristics around caching and revalidating. To ensure we’re all discussing the intended behavior of how caching is designed to work, I thought it would be help...

https://github.com/vercel/next.js/discussions/54075

next.config.js Options: StaleTimes (experimental)

Learn how to override the invalidation time of the Client Router Cache.

https://nextjs.org/docs/app/api-reference/next-config-js/staleTimes

/** @type {import('next').NextConfig} */
const nextConfig = {
  experimental: {
    staleTimes: {
      dynamic: 1,
      static: 180,
    },
  },
}
 
module.exports = nextConfig