Next.js 13中React Server Component构建后如何实现请求时重载数据？

问题出在你的组件被静态生成（SSG）优化了，导致数据只在构建时获取一次。要让这个Server Component每次收到GET请求都重新拉取数据，不用转成客户端组件，只要强制它每次请求都在服务器端重新渲染就行，具体方法如下：

两种实现方式（以Next.js App Router为例） #

1. 显式开启动态渲染 #

在组件文件顶部添加export const dynamic = 'force-dynamic'，直接强制组件每次请求都重新执行：

import prisma from "@/lib/prisma";

// 强制组件动态渲染，每次请求都重新拉取数据
export const dynamic = 'force-dynamic';

export default async function AdminNewsSourceList() {
  const dataNewsSource = await prisma.newsSource.findMany();

  return (
    <div className="container">
      <h1 className="my-3">News Sources</h1>
      <table className="table table-striped">
        {/* ... 表格内容 ... */}
      </table>
    </div>
  );
}

2. 通过请求上下文触发动态渲染 #

如果不想写配置，可以在组件里调用Next.js的headers()或cookies()函数——这些函数依赖请求上下文，会自动触发动态渲染，不需要额外配置：

import prisma from "@/lib/prisma";
import { headers } from 'next/headers';

export default async function AdminNewsSourceList() {
  // 调用headers()触发动态渲染，无需实际使用返回值
  headers();
  
  const dataNewsSource = await prisma.newsSource.findMany();

  return (
    <div className="container">
      <h1 className="my-3">News Sources</h1>
      <table className="table table-striped">
        {/* ... 表格内容 ... */}
      </table>
    </div>
  );
}

原理说明 #

在Next.js的App Router里，Server Component默认会做静态优化：如果组件不依赖请求相关内容（比如请求头、Cookie），就会在构建时预渲染并缓存结果。上面两种方法，要么直接强制动态渲染，要么通过引入请求上下文让Next.js识别到组件需要每次请求都重新生成，这样用户每次访问页面时，服务器都会重新执行prisma.newsSource.findMany()，拿到最新数据。

内容的提问来源于stack exchange，提问作者Peter Kellner