Next.js 13中Layout与Template的区别是什么？

很多人刚接触Next.js 13的App Router时会把Layout和Template搞混，其实两者核心差异体现在挂载机制、状态保留和适用场景上：

1. 挂载与状态的生命周期 #

• Layout：一旦挂载就会一直存在，页面切换时不会重新渲染，内部的状态（比如useState存的值、useEffect的执行逻辑）会被完整保留。比如全局导航栏用Layout实现，切换页面时导航栏不会重新加载，之前展开的菜单状态也不会丢失。
• Template：每次切换页面都会重新挂载，相当于给每个页面单独套了一层临时容器。Template里的组件会和页面一起初始化，状态不会在页面间保留。比如Template里写的useEffect，每次打开新页面都会重新执行。

2. DOM 元素的存活逻辑 #

• Layout：它的DOM节点在页面切换过程中始终存在，只会替换children对应的页面内容。比如Layout里的<footer>标签，会一直留在DOM树里，不会被销毁重建。
• Template：每次页面切换时，Template的DOM节点会被销毁，再和新页面一起重新创建。

3. 适用场景 #

• Layout：适合放置全局持久化内容：
  • 全局导航、侧边栏、页脚
  • 全局状态管理的提供者（如Redux Provider、Context Provider）
  • 不需要随页面切换重新加载的通用UI
• Template：适合需要页面级重置的场景：
  • 每次页面加载都要执行的初始化逻辑
  • 需要重置状态的通用容器
  • 某些需要随页面切换重新渲染的UI元素

代码示例对比 #

Layout 示例 #

// app/layout.js
export default function RootLayout({ children }) {
  return (
    <html lang="zh-CN">
      <body>
        <nav>全局导航 - 只会渲染一次</nav>
        {children}
        <footer>全局页脚</footer>
      </body>
    </html>
  )
}

Template 示例 #

// app/template.js
import { useEffect } from 'react';

export default function RootTemplate({ children }) {
  // 每次页面切换都会重新执行这个 useEffect
  useEffect(() => {
    console.log("页面加载了");
  }, []);

  return (
    <div className="page-wrapper">
      <p>这段文字每次切换页面都会重新渲染</p>
      {children}
    </div>
  )
}

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