Next.js 13+如何修改默认构建类型为SSR并全局启用

问题描述 #

我在构建Next.js项目后，使用router.push进行页面导航时会出现深层页面加载的问题。经调研发现，将项目以Runtime或SSR方式构建即可解决该问题，但当前每次构建时Next.js默认采用静态（SSG）方式构建。请问如何在Next.js配置中修改默认构建方式，将所有页面设置为λ(Server)（运行时服务端渲染）模式？

当前构建输出（翻译后）：

路由（app目录）                                大小     首次加载JS
┌ ○ /                                      12.1 kB         233 kB
├ ○ /about                                 159 B          78.5 kB
├ λ /course/[id]                           159 B          78.5 kB
├ ○ /profile                               159 B          78.5 kB
├ ○ /select-grade                          10.6 kB         206 kB
├ ○ /setting                               4.23 kB         131 kB
├ ○ /setting/about-us                      5.67 kB         129 kB
├ ○ /setting/appearance                    7.23 kB         124 kB
├ ○ /setting/edit-daily-goal               5.98 kB         222 kB
├ ○ /setting/notifications                 3.65 kB         132 kB
├ ○ /setting/store                         9.21 kB         340 kB
└ ○ /signup                                17.8 kB         161 kB
+ 所有页面共享的首次加载JS              78.3 kB
  ├ chunks/2443530c-e89e5a309bb1f246.js    50.5 kB
  ├ chunks/8139-d0a2f4f24604508c.js        24.7 kB
  ├ chunks/main-app-7b87f8e8be843a62.js    224 B
  └ chunks/webpack-2c24952a631fdb89.js     2.94 kB

路由（pages目录）                              大小     首次加载JS
─ ○ /404                                   182 B          87.5 kB
+ 所有页面共享的首次加载JS              87.3 kB
  ├ chunks/main-f380058e96bfe077.js        84.2 kB
  ├ chunks/pages/_app-6b94368279a02b5e.js  196 B
  └ chunks/webpack-2c24952a631fdb89.js     2.94 kB

ƒ 中间件                               23.4 kB

λ  (服务端)  运行时进行服务端渲染（使用getInitialProps或getServerSideProps）
○  (静态)  自动渲染为静态HTML（不使用初始props）

Next.js没有直接的全局配置项强制所有页面切换到Server模式，需针对**App Router（app目录）和Pages Router（pages目录）**分别处理：

1. 针对App Router（app目录） #

全局生效方式 #

在app/layout.tsx（根布局文件）中导出dynamic配置为"force-dynamic"，所有子页面会继承该配置，强制每次请求都在服务端渲染：

// app/layout.tsx
export const dynamic = "force-dynamic";

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="zh-CN">
      <body>{children}</body>
    </html>
  );
}

单页面生效方式 #

若仅需针对特定页面设置，在对应页面组件文件中单独导出dynamic配置：

// app/about/page.tsx
export const dynamic = "force-dynamic";

export default function AboutPage() {
  return <div>关于页面</div>;
}

2. 针对Pages Router（pages目录） #

全局生效方式 #

在pages/_app.tsx中添加getInitialProps函数，可让所有页面默认使用服务端渲染（注：官方不推荐此方式，更建议逐个页面设置，但全局统一需求下可使用）：

// pages/_app.tsx
function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />;
}

MyApp.getInitialProps = async ({ Component, ctx }) => {
  let pageProps = {};
  // 保留页面自身的getInitialProps逻辑（如果存在）
  if (Component.getInitialProps) {
    pageProps = await Component.getInitialProps(ctx);
  }
  return { pageProps };
};

export default MyApp;

单页面生效方式 #

在对应页面文件中导出getServerSideProps函数（空实现即可），即可将该页面标记为Server模式：

// pages/about.tsx
export async function getServerSideProps() {
  // 可在此添加服务端逻辑（如获取数据）
  return { props: {} };
}

export default function AboutPage() {
  return <div>关于页面</div>;
}

验证效果 #

重新运行npm run build，查看构建输出，所有页面标记会从○变为λ，说明已切换到Server运行时渲染模式。

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