Next.js布局中获取数据是否会被缓存？

是的，默认情况下你在布局组件里发起的fetch请求会被Next.js自动缓存，无需额外配置就能避免重复获取相同数据。

不同渲染场景下的缓存表现 #

• 静态渲染：布局在构建阶段执行fetch，数据会被缓存为静态资产，后续所有用户请求都会直接复用这份缓存数据，完全不会触发重复请求。
• 动态渲染：即使布局是动态模式（比如声明了export const dynamic = 'force-dynamic'），默认fetch依然会缓存数据。如果需要实时获取最新用户信息，可通过显式配置禁用缓存。
• 增量静态再生（ISR）：若布局使用ISR（如设置revalidate: 60），fetch的数据会按指定时间间隔自动重新验证更新，间隔内复用缓存。

代码示例 #

默认缓存的写法：

// app/layout.js
export default async function RootLayout({ children }) {
  // 默认开启缓存的fetch请求
  const res = await fetch('https://api.example.com/user');
  const user = await res.json();

  return (
    <html>
      <body>
        {/* 将用户信息传递给子组件（示例用Context方式） */}
        <UserContext.Provider value={user}>
          {children}
        </UserContext.Provider>
      </body>
    </html>
  );
}

禁用缓存的写法（实时获取用户信息）：

const res = await fetch('https://api.example.com/user', {
  cache: 'no-store' // 或者使用 next: { revalidate: 0 }
});

额外提示 #

• 若布局和子组件中发起了相同的fetch请求，Next.js的请求去重机制会自动合并请求，只执行一次，进一步减少重复请求。
• 用户信息这类可能频繁变动的数据，建议根据业务需求设置合适的缓存策略，比如短周期的revalidate，平衡请求开销与数据新鲜度。

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