Next.js中如何在App.js实现服务端加载布局数据（无需修改所有页面）

方法1：在_app.jsx中使用getInitialProps（Pages Router） #

既然你用的是Next.js Pages Router的_app.jsx，可以直接在这里通过getInitialProps在服务端预加载布局数据，这样页面渲染时就能直接拿到数据，不会出现延迟。这种方式不需要修改任何页面文件，完全在_app.jsx中处理。

修改后的代码如下：

import axios from 'axios';
import https from 'https';
import App from 'next/app'; // 记得引入默认的App组件

function MyApp({ Component, pageProps: { session, layoutContent, ...pageProps } }) {
  return (
    <Provider store={store}>
      <SessionProvider session={session}>
        <ConfigProvider direction="ltr">
          <HeadersComponent>
            <Layout content={layoutContent}>
              <Component {...pageProps} />
            </Layout>
          </HeadersComponent>
        </ConfigProvider>
      </SessionProvider>
    </Provider>
  );
}

MyApp.getInitialProps = async (appContext) => {
  // 获取页面本身的pageProps
  const appProps = await App.getInitialProps(appContext);
  
  let layoutContent = null;
  try {
    const response = await axios.get("/api/layout", {
      httpsAgent: new https.Agent({ rejectUnauthorized: false }),
    });
    if (response.status === 200) {
      layoutContent = response.data;
    }
  } catch (error) {
    console.error("加载布局数据失败:", error.message);
  }

  // 将布局数据合并到pageProps中
  return {
    ...appProps,
    pageProps: {
      ...appProps.pageProps,
      layoutContent,
    },
  };
};

export default MyApp;

核心逻辑说明：

• getInitialProps会在服务端渲染阶段同步执行，和页面的SSR逻辑并行完成，布局数据会和页面数据一起预加载，客户端渲染时直接使用，不会有延迟。
• 所有页面都会继承_app.jsx的全局逻辑，不需要逐个修改页面文件。

方法2：Next.js 13+ App Router 适配方案（如果是新版本项目） #

如果你的项目已经升级到Next.js 13+的App Router，直接在根layout.js中通过原生fetch获取布局数据即可。App Router的布局组件会自动在服务端执行数据获取，且全局生效，无需修改任何页面：

// app/layout.js
import { Provider } from 'react-redux';
import { SessionProvider } from 'next-auth/react';
import { ConfigProvider } from 'your-ui-library';
import HeadersComponent from './HeadersComponent';
import Layout from './Layout';
import store from '@/store';

export default async function RootLayout({ children, session }) {
  // 直接在服务端获取布局数据，可添加缓存策略减少重复请求
  const res = await fetch("/api/layout", {
    headers: { 'Cache-Control': 's-maxage=86400' }, // 缓存数据1天
  });
  const layoutContent = await res.json();

  return (
    <html lang="en">
      <body>
        <Provider store={store}>
          <SessionProvider session={session}>
            <ConfigProvider direction="ltr">
              <HeadersComponent>
                <Layout content={layoutContent}>
                  {children}
                </Layout>
              </HeadersComponent>
            </ConfigProvider>
          </SessionProvider>
        </Provider>
      </body>
    </html>
  );
}

关于Redux方案的补充 #

你提到的Redux方案其实也可以不用修改每个页面：在_app.jsx的getInitialProps中获取布局数据后，直接dispatch到Redux store中，后续Layout组件从store读取数据即可。但相比直接通过props传递，这种方式多了一层状态管理，复杂度更高，除非你需要在其他组件也复用布局数据，否则没必要。

示例修改：

MyApp.getInitialProps = async (appContext) => {
  const appProps = await App.getInitialProps(appContext);
  let layoutContent = null;
  try {
    const response = await axios.get("/api/layout", {
      httpsAgent: new https.Agent({ rejectUnauthorized: false }),
    });
    if (response.status === 200) {
      layoutContent = response.data;
      // 直接将数据dispatch到Redux store
      appContext.ctx.store.dispatch({ type: 'SET_LAYOUT_CONTENT', payload: layoutContent });
    }
  } catch (error) {
    console.error("加载布局数据失败:", error.message);
  }
  return appProps;
};

之后Layout组件直接从Redux store中读取content即可，同样不需要修改页面文件。

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