Next.js中多页面共享持久化布局时如何使用getServerSideProps？

核心思路 #

将布局专属的服务端数据获取逻辑与布局组件封装绑定，通过页面组件复用该逻辑，同时利用Next.js的持久化布局机制，避免同布局页面导航时重复渲染和数据请求。

具体实现步骤 #

1. 封装布局与对应服务端数据获取函数 #

为每个布局单独编写数据获取逻辑，与布局组件强绑定：

// layouts/DashboardLayout.js
// 布局专属的服务端数据获取函数
export async function getDashboardLayoutServerProps() {
  // 这里写从数据库/服务端获取Dashboard布局所需数据的逻辑
  const dashboardData = await fetch('/api/dashboard/layout-data').then(res => res.json());
  return { props: { dashboardData } };
}

// 布局组件本身
export default function DashboardLayout({ children, dashboardData }) {
  return (
    <div className="dashboard-container">
      {/* 用服务端数据渲染布局固定部分，比如侧边栏、头部 */}
      <aside>{dashboardData.sidebarMenu}</aside>
      <main>{children}</main>
    </div>
  );
}

同理封装UserLayout：

// layouts/UserLayout.js
export async function getUserLayoutServerProps() {
  const userData = await fetch('/api/user/layout-data').then(res => res.json());
  return { props: { userData } };
}

export default function UserLayout({ children, userData }) {
  return (
    <div className="user-container">
      <header>{userData.userName}的个人中心</header>
      <section>{children}</section>
    </div>
  );
}

2. 页面组件复用布局的服务端数据逻辑 #

在每个页面的getServerSideProps中调用对应布局的数据获取函数，合并页面自身数据后返回：

// pages/dashboard/foo.js
import DashboardLayout, { getDashboardLayoutServerProps } from '../../layouts/DashboardLayout';

// 页面自身的服务端数据（可选）
async function getFooPageProps() {
  const fooData = await fetch('/api/dashboard/foo').then(res => res.json());
  return { props: { fooData } };
}

export async function getServerSideProps(context) {
  // 获取布局所需数据
  const layoutProps = await getDashboardLayoutServerProps(context);
  // 获取页面自身数据
  const pageProps = await getFooPageProps(context);
  // 合并所有props返回
  return { props: { ...layoutProps.props, ...pageProps.props } };
}

// 导出布局和布局标识，供_app.js识别
export const Layout = DashboardLayout;
export const layoutKey = 'dashboard';

export default function FooPage({ dashboardData, fooData }) {
  return (
    <DashboardLayout dashboardData={dashboardData}>
      {/* 页面专属内容 */}
      <div>{fooData.content}</div>
    </DashboardLayout>
  );
}

pages/dashboard/bar.js、pages/user/settings.js等页面只需复用对应布局的getXXLayoutServerProps，并导出对应Layout和layoutKey即可。

3. 在_app.js中实现持久化布局 #

通过缓存布局实例，让同一layoutKey的页面导航时复用已渲染的布局：

// pages/_app.js
import { useState, useEffect } from 'react';

export default function MyApp({ Component, pageProps }) {
  const [persistedLayout, setPersistedLayout] = useState(null);
  const [currentLayoutKey, setCurrentLayoutKey] = useState(null);
  const targetLayoutKey = Component.layoutKey;

  useEffect(() => {
    // 切换不同布局时清空缓存
    if (targetLayoutKey !== currentLayoutKey) {
      setCurrentLayoutKey(targetLayoutKey);
      setPersistedLayout(null);
    }
  }, [targetLayoutKey, currentLayoutKey]);

  const renderPage = () => {
    // 复用已缓存的布局实例
    if (persistedLayout && targetLayoutKey === currentLayoutKey) {
      return React.cloneElement(persistedLayout, { children: <Component {...pageProps} /> });
    }

    // 首次渲染或切换布局时生成新布局并缓存
    const Layout = Component.Layout;
    const newLayout = <Layout {...pageProps}><Component {...pageProps} /></Layout>;
    setPersistedLayout(newLayout);
    return newLayout;
  };

  return renderPage();
}

4. 关键说明 #

• 布局的服务端数据逻辑完全与布局绑定，页面无需重复编写，维护性更强；
• 同一layoutKey的页面间导航时，_app.js会复用已渲染的布局组件，避免重复请求服务端数据和渲染布局；
• 全程基于Next.js原生能力实现，无需依赖第三方库或shallow routing。

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