如何为Next.js动态渲染页面设置指定时长的缓存（ISR）？

现有代码问题修正 #

首先，你的页面组件中params的类型声明有误：Next.js 15 App Router中，动态路由的params是直接的对象，无需用Promise包裹。修正后的页面组件代码如下：

import Cast from "@/modules/movie-details/cast";
import DetailsWrapper from "@/modules/movie-details/details-wrapper";
import HeroSection from "@/modules/movie-details/hero-section";
import MoreLikeThis from "@/modules/movie-details/more-like-this";
import Trailer from "@/modules/movie-details/trailer";

const Movie = async ({ params }: { params: { id: string } }) => {
  const { id } = params;

  return (
    <DetailsWrapper>
      <HeroSection id={id} />
      <Cast id={id} />
      <Trailer id={id} />
      <MoreLikeThis id={id} />
    </DetailsWrapper>
  );
};

export default Movie;

需求1：服务端渲染+1小时ISR缓存 #

你的子组件中fetch的配置已经符合ISR要求：

• next: { revalidate: 3600 }：设置数据缓存1小时，到期后自动重新验证
• cache: "force-cache"：默认缓存策略，确保数据被持久化缓存

为了让页面本身也遵循1小时缓存规则，建议在页面组件中添加全局revalidate配置：

// 在Movie组件下方添加
export const revalidate = 3600; // 单位：秒，对应1小时

需求2：首次访问显示loading.tsx加载UI #

Next.js App Router内置了加载状态处理，只需在/app/movie/[id]/目录下创建loading.tsx文件，即可在页面首次生成期间自动显示加载UI。示例代码：

// /app/movie/[id]/loading.tsx
export default function Loading() {
  return (
    <div className="flex items-center justify-center min-h-screen">
      <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-500"></div>
      <p className="ml-2 text-gray-600">加载电影详情中...</p>
    </div>
  );
}

需求3：缓存页面1小时供所有用户使用 #

结合上述配置：

• 首次访问/movie/1时，Next.js会在服务端渲染页面并缓存页面内容和API数据
• 接下来1小时内，所有用户访问该页面都会直接获取缓存版本，无需重新渲染或请求API
• 1小时后，Next.js会在后台自动重新验证数据并生成新的缓存页面

内容的提问来源于stack exchange，提问作者Dinuka Dilshan