Next.js 13 App Router中如何避免RSC重复渲染与数据库重复调用？

问题根源 #

• 当页面的searchParams变化时，App Router会重新执行整个页面的服务器组件（RSC）逻辑，包括你写的分类数据库查询代码。所以每次勾选复选框/切换分页（这些操作会修改URL的search params），都会触发RSC重新渲染，重新调用数据库。
• 你把分类数据获取和商品列表获取放在了同一个RSC页面组件里，导致无关交互（比如分类筛选）也会触发分类数据的重复查询。

解决方案 #

1. 强制缓存分类数据查询 #

如果分类数据不会频繁更新，直接给数据库查询加上缓存配置，让结果被持久化缓存，避免每次渲染都调用数据库：

// 修改后的分类RSC代码
async function CategoryList() {
  // 强制缓存查询结果，默认会永久缓存，可加revalidate设置过期时间
  const categories = await db.query('SELECT * FROM categories', {
    cache: 'force-cache',
    next: { revalidate: 86400 } // 可选：每天自动刷新一次缓存
  });
  return <ClientCategoryList categories={categories} />;
}

2. 拆分组件层级，隔离静态与动态逻辑 #

把分类列表拆成独立的、不依赖searchParams的RSC组件，让它只在首次渲染时执行查询；商品列表组件单独处理searchParams变化：

// 主页面组件
export default async function ShopPage({ searchParams }) {
  return (
    <div className="shop-container">
      {/* 这个RSC不依赖searchParams，不会随参数变化重跑 */}
      <CategoryList />
      {/* 商品列表依赖searchParams，仅随参数变化重新获取数据 */}
      <ProductGrid searchParams={searchParams} />
    </div>
  );
}

// 独立的分类列表RSC
async function CategoryList() {
  const categories = await db.query('SELECT * FROM categories', { cache: 'force-cache' });
  return <ClientCategoryList categories={categories} />;
}

因为CategoryList不接收searchParams作为参数，所以页面参数变化时，这个组件不会重新执行，自然不会重复查数据库。

3. 客户端本地维护筛选状态（可选） #

如果不需要把筛选状态同步到URL（比如不需要分享筛选后的页面链接），可以让客户端组件自己用useState维护复选框状态，不修改searchParams，这样完全不会触发服务器端的RSC重渲染。

4. 商品列表查询按参数缓存 #

对商品列表的查询也可以按searchParams做缓存，避免相同参数重复请求数据库：

async function ProductGrid({ searchParams }) {
  const products = await db.query(
    'SELECT * FROM products WHERE category_id = ? AND page = ?',
    [searchParams.category, searchParams.page],
    {
      cache: 'force-cache',
      next: { tags: ['products'] } // 可选：用标签管理缓存，商品更新时可批量失效
    }
  );
  return <ClientProductGrid products={products} />;
}

关键提醒 #

• 如果你用ORM（比如Prisma），要确认它支持Next.js的缓存配置，大部分主流ORM都能配合cache和next选项实现缓存。
• Serverless环境中，缓存能大幅减少函数调用次数和数据库请求量，直接降低成本，合理利用缓存是解决费用问题的核心。

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