NextJS 13中如何为服务端布局组件实现按需重新验证？

针对你遇到的布局组件按需更新需求，这里有两种直接可行的方案，完全不需要手动指定所有页面路由：

方法1：通过标签（Tag）批量触发重新验证 #

Next.js 13的按需重新验证支持用标签关联所有依赖同一数据源的内容，你可以给布局中获取导航配置的fetch请求添加专属标签，之后在管理员更新配置的API里，只需调用revalidateTag就能批量触发所有关联该标签的内容重新验证。

示例代码 #

• 布局组件中带标签的请求：

// app/layout.tsx
export default async function RootLayout({ children }) {
  // 给fetch请求添加标签，关联导航配置数据
  const navConfig = await fetch('https://your-api/nav-config', {
    next: { tags: ['navigation-config'] }
  }).then(res => res.json());

  return (
    <html>
      <body>
        <nav>
          {/* 根据navConfig渲染导航菜单 */}
          {navConfig.items.map(item => (
            <a key={item.id} href={item.path}>{item.label}</a>
          ))}
        </nav>
        {children}
      </body>
    </html>
  );
}

• 管理员更新配置的API路由：

// app/api/update-nav/route.ts
import { revalidateTag } from 'next/cache';
import { NextResponse } from 'next/server';
import { MongoClient } from 'mongodb';

export async function POST(request) {
  // 处理MongoDB配置更新逻辑
  const updatedConfig = await request.json();
  const client = await MongoClient.connect(process.env.MONGODB_URI);
  const db = client.db();
  await db.collection('nav-config').updateOne({}, { $set: updatedConfig });
  await client.close();

  // 触发所有关联该标签的内容重新验证
  revalidateTag('navigation-config');

  return NextResponse.json({ success: true });
}

方法2：拆分导航为独立服务端组件 #

如果需要更清晰的代码结构，可以把导航菜单拆成单独的服务端组件，同样给它的fetch请求添加标签，这样布局只需引入组件，更新时还是通过revalidateTag触发重新验证。

示例代码 #

• 独立导航组件：

// app/components/Navigation.tsx
export default async function Navigation() {
  const navConfig = await fetch('https://your-api/nav-config', {
    next: { tags: ['navigation-config'] }
  }).then(res => res.json());

  return (
    <nav>
      {navConfig.items.map(item => (
        <a key={item.id} href={item.path}>{item.label}</a>
      ))}
    </nav>
  );
}

• 布局组件引入导航：

// app/layout.tsx
import Navigation from './components/Navigation';

export default async function RootLayout({ children }) {
  return (
    <html>
      <body>
        <Navigation />
        {children}
      </body>
    </html>
  );
}

更新API中的revalidateTag('navigation-config')调用保持不变。

关键注意事项 #

• 确保fetch请求在服务端组件中执行（App Router下默认组件都是服务端组件，无需额外配置），客户端fetch不会被纳入Next.js的缓存系统。
• 全程不需要设置全局revalidate变量，完全通过按需调用revalidateTag更新，符合你避免自动重新验证的需求。

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