Next.js 14动态路由调用性能优化：缓存与重验证方案咨询

你的场景核心是：10000+商品的动态路由页面，API无法优化，数据每日午夜更新，日常仅约10个商品被访问。下面针对你提出的两个方案逐一分析并给出实现细节：

方案1：午夜定时预加载全量数据 #

可行性：完全可行，但确实存在资源浪费——大部分预加载的数据不会被用户访问。如果你的服务器资源充足，且希望用户首次访问就能获得最快响应，可以选择这个方案。

实现步骤：

1. 创建一个负责触发全量数据缓存的API路由：

// app/api/revalidate-products/route.ts
import { revalidateTag } from 'next/cache';
import { NextResponse } from 'next/server';

export async function GET() {
  // 调用API获取全量商品数据，触发缓存填充
  await fetch(process.env.PRODUCTS_API_URL, { next: { tags: ['products'] } });
  // 标记商品缓存标签进行重新验证（确保缓存更新为最新数据）
  revalidateTag('products');
  return NextResponse.json({ revalidated: true, timestamp: Date.now() });
}

2. 设置定时任务（比如Vercel Cron Jobs、服务器端定时脚本），每天午夜调用这个API路由，自动完成全量数据的预加载和缓存更新。

方案2：首次用户访问时预加载全量数据并缓存1天 #

可行性：更推荐这个方案——仅在有用户访问时才加载数据，避免无意义的资源消耗，同时缓存周期刚好匹配你的数据更新频率。

实现步骤：

1. 封装全量商品数据的获取函数，添加缓存配置：

// app/lib/products.ts
export async function getAllProducts() {
  const res = await fetch(process.env.PRODUCTS_API_URL, {
    next: {
      revalidate: 86400, // 缓存1天（86400秒）
      tags: ['products'] // 标记缓存标签，方便后续手动更新
    },
    cache: 'force-cache' // 强制使用缓存，避免重复请求
  });

  if (!res.ok) throw new Error('Failed to fetch product data');
  return res.json();
}

// 根据ID获取单个商品，复用全量缓存数据
export async function getProductById(id: string) {
  const allProducts = await getAllProducts();
  return allProducts.find((product: any) => product.id === id);
}

2. 在动态路由页面中使用该函数：

// app/products/[id]/page.tsx
import { getProductById } from '@/app/lib/products';

export default async function ProductPage({ params }: { params: { id: string } }) {
  const product = await getProductById(params.id);
  
  if (!product) return <div>Product not found</div>;

  return (
    <div className="product-page">
      <h1>{product.name}</h1>
      <p>{product.description}</p>
      {/* 渲染其他商品信息 */}
    </div>
  );
}

3. 搜索场景复用缓存：
   在客户端搜索组件中直接调用getAllProducts，Next.js会自动复用服务器端已缓存的数据，无需重复请求API：

// app/components/SearchBar.tsx
'use client';
import { useState } from 'react';
import { getAllProducts } from '@/app/lib/products';

export default function SearchBar() {
  const [query, setQuery] = useState('');
  const [results, setResults] = useState<any[]>([]);

  const handleSearch = async () => {
    const allProducts = await getAllProducts();
    const filteredResults = allProducts.filter(product => 
      product.name.toLowerCase().includes(query.toLowerCase())
    );
    setResults(filteredResults);
  };

  return (
    <div className="search-bar">
      <input
        type="text"
        value={query}
        onChange={(e) => setQuery(e.target.value)}
        placeholder="Search products..."
      />
      <button onClick={handleSearch}>Search</button>
      <ul className="search-results">
        {results.map(product => (
          <li key={product.id}>{product.name}</li>
        ))}
      </ul>
    </div>
  );
}

额外优化点 #

• 若午夜数据更新后需要立即同步缓存，可通过定时任务调用revalidateTag('products')，强制刷新缓存。
• 如果全量数据体积过大，可考虑将数据按类别拆分缓存，但鉴于数据每日仅更新一次，全量缓存的开销在多数服务器上是可接受的。

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