Next.js-嵌套组件SSR：非pages目录Layout服务端导航方案咨询

方案1：在_app.js（Pages Router）中统一获取导航数据 #

这是Pages Router下最直接的方案，利用_app.js作为所有页面的入口（位于pages目录，支持getStaticProps/getServerSideProps），一次性获取导航数据并传递给Layout，避免每个页面重复请求：

1. 修改pages/_app.js，在服务端获取导航数据：

import Layout from '../components/Layout'; // 你的Layout组件路径

function MyApp({ Component, pageProps, navData }) {
  // 将导航数据传递给Layout
  return (
    <Layout navData={navData}>
      <Component {...pageProps} />
    </Layout>
  );
}

// 静态数据（适合导航不常更新的场景）
export async function getStaticProps() {
  const res = await fetch('你的导航API地址');
  const navData = await res.json();
  
  return {
    props: { navData },
    // 可选：设置重新生成间隔（单位秒），实现增量静态更新
    revalidate: 86400 // 24小时后自动重新生成
  };
}

// 实时数据（适合导航频繁更新的场景）
// export async function getServerSideProps() {
//   const res = await fetch('你的导航API地址');
//   const navData = await res.json();
//   return { props: { navData } };
// }

export default MyApp;

2. 在Layout组件中直接使用传入的navData渲染导航，无需再单独请求：

// components/Layout.js
export default function Layout({ navData, children }) {
  return (
    <div>
      <nav>
        {navData.map(item => (
          <a key={item.id} href={item.path}>{item.label}</a>
        ))}
      </nav>
      <main>{children}</main>
    </div>
  );
}

3. 优化导航组件避免额外重渲染：用React.memo包裹导航子组件，确保仅当navData变化时才重新渲染：

// components/Nav.js
import React from 'react';

const Nav = React.memo(({ navData }) => {
  return (
    <nav>
      {navData.map(item => (
        <a key={item.id} href={item.path}>{item.label}</a>
      ))}
    </nav>
  );
});

export default Nav;

随后在Layout中引入该Nav组件即可。

方案2：使用App Router的服务器组件（Next.js 13+） #

若项目使用Next.js 13+的App Router，无需依赖页面级数据获取方法——Layout组件默认是服务器组件，可直接在组件内部fetch数据，全程在服务端执行，完全避免客户端额外加载：

// app/layout.js（服务器组件，无需额外配置）
async function RootLayout({ children }) {
  // 直接在服务端获取导航数据，不会发送到客户端
  const res = await fetch('你的导航API地址', {
    cache: 'force-cache' // 静态缓存，适合不常更新的导航
    // 若需实时数据，改用 cache: 'no-store'
  });
  const navData = await res.json();

  return (
    <html lang="zh-CN">
      <body>
        <nav>
          {navData.map(item => (
            <a key={item.id} href={item.path}>{item.label}</a>
          ))}
        </nav>
        {children}
      </body>
    </html>
  );
}

export default RootLayout;

方案3：静态生成导航数据文件（适合完全静态的场景） #

如果导航数据几乎不会变化，可在构建阶段预先生成静态JSON文件，然后在Layout中直接导入：

1. 在项目根目录创建脚本（如scripts/generate-nav.js），构建时执行：

// scripts/generate-nav.js
const fs = require('fs');
const fetch = require('node-fetch');

async function generateNavData() {
  const res = await fetch('你的导航API地址');
  const navData = await res.json();
  fs.writeFileSync('./public/nav-data.json', JSON.stringify(navData));
}

generateNavData();

2. 在package.json的build命令前添加脚本：

{
  "scripts": {
    "generate-nav": "node scripts/generate-nav.js",
    "build": "npm run generate-nav && next build"
  }
}

3. 在Layout组件中直接导入静态文件：

// components/Layout.js
import navData from '../public/nav-data.json';

export default function Layout({ children }) {
  return (
    <div>
      <nav>
        {navData.map(item => (
          <a key={item.id} href={item.path}>{item.label}</a>
        ))}
      </nav>
      <main>{children}</main>
    </div>
  );
}

内容的提问来源于stack exchange，提问作者Evgeny N.