Next.js基于ISR实现未预构建页面无延迟跳转需求

1. 配置产品页的ISR参数 #

在产品页（如pages/products/[id].js）的getStaticPaths中设置fallback: true，让未预生成的页面先返回临时fallback页面，后台异步生成静态页面：

export async function getStaticPaths() {
  // 仅预生成少量核心产品页面
  const pregeneratedPaths = await fetchCoreProductIds().map(id => ({
    params: { id: id.toString() }
  }));

  return {
    paths: pregeneratedPaths,
    fallback: true // 关键：启用fallback模式
  };
}

export async function getStaticProps({ params }) {
  const product = await fetchProductById(params.id);
  if (!product) {
    return { notFound: true };
  }

  return {
    props: { product },
    revalidate: 86400 // 按需设置ISR刷新间隔
  };
}

2. 在产品页组件中处理加载状态 #

利用next/router的router.isFallback属性，在数据加载完成前展示加载状态，同时保留页面公共布局（如导航栏）避免跳转空白：

import { useRouter } from 'next/router';

export default function ProductPage({ product }) {
  const router = useRouter();

  // 页面处于fallback状态时展示加载UI
  if (router.isFallback) {
    return (
      <div className="product-page">
        {/* 保留公共导航布局 */}
        <nav className="site-nav">...</nav>
        <div className="loading-container">
          <div className="spinner"></div>
          <p>加载产品详情中...</p>
        </div>
      </div>
    );
  }

  // 数据加载完成后渲染正常产品页面
  return (
    <div className="product-page">
      <nav className="site-nav">...</nav>
      <h1>{product.name}</h1>
      <p>{product.description}</p>
      {/* 其他产品内容 */}
    </div>
  );
}

3. 优化分类页的Link跳转 #

分类页直接使用标准Link组件即可，Next.js会立即触发跳转，不会等待页面预生成：

import Link from 'next/link';

export default function CategoryPage({ products }) {
  return (
    <div className="category-page">
      {products.map(product => (
        <div key={product.id} className="product-card">
          <Link href={`/products/${product.id}`}>
            <a>
              <img src={product.image} alt={product.name} />
              <h3>{product.name}</h3>
            </a>
          </Link>
        </div>
      ))}
    </div>
  );
}

关键说明 #

• fallback: true是核心：它让Next.js立即返回fallback页面给用户，后台异步构建静态页面，后续访问该页面会直接返回已生成的静态文件。
• 加载状态需保持布局一致性：避免跳转后完全空白，可在fallback状态下保留导航栏等公共元素，仅替换内容区域为加载动画。
• 若无需即时跳转、优先保障SEO，可考虑fallback: 'blocking'，但该模式会等待页面生成后再返回，不符合本次需求。

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