Next.js 14添加带登录逻辑的Header后页面全变动态的解决办法

问题背景 #

原本的layout.tsx代码如下，此时构建应用时静态和动态页面能按预期生成：

<body>
  <AppRouterCacheProvider>
    <NotistackProvider maxSnack={3}>
      <SessionProvider>
        <Stack>
          <Providers>{children}</Providers>
        </Stack>
      </SessionProvider>
    </NotistackProvider>
  </AppRouterCacheProvider>
</body>

添加包含登录/登出逻辑的Header服务器组件后，修改后的layout.tsx代码如下：

<body>
  <AppRouterCacheProvider>
    <NotistackProvider maxSnack={3}>
      <SessionProvider>
        <Stack>
          <Header />
          <Providers>{children}</Providers>
        </Stack>
      </SessionProvider>
    </NotistackProvider>
  </AppRouterCacheProvider>
</body>

此时应用运行正常，但所有页面都被强制转为动态页面。Header组件代码如下：

async function Header() {
  const session = await auth();

  const title = "Assessment System";

  return (
    <Box sx={{ flexGrow: 1, height: "64px" }}>
      <AppBar>
        <Toolbar>
          <HeaderTitle title={title} />

          {!!session && (
            <>
              <Chip
                variant="filled"
                color="info"
                label={
                  <>
                    <Typography
                      variant="subtitle2"
                      component="div"
                      sx={{ flexGrow: 1 }}
                    >
                      {session?.user.name}
                    </Typography>
                  </>
                }
              ></Chip>
            </>
          )}
          {!session && <SignIn />}
        </Toolbar>
      </AppBar>
    </Box>
  );
}

export default Header;

解决方案 #

问题核心是：Header作为异步服务器组件且调用了auth()方法，Next.js会将包含这类组件的根布局标记为动态，进而强制所有子页面变为动态。以下是可行的解决方式：

1. 将动态逻辑下沉到客户端组件（推荐） #

把依赖用户session的动态部分拆成客户端组件，让Header本身保持静态可预渲染：

• 创建ClientHeaderContent.tsx客户端组件：

'use client';

import { useSession } from 'next-auth/react';
import { Chip, Typography } from '@mui/material';
import SignIn from './SignIn';

export default function ClientHeaderContent() {
  const { data: session } = useSession();

  return (
    <>
      {!!session && (
        <Chip
          variant="filled"
          color="info"
          label={
            <Typography
              variant="subtitle2"
              component="div"
              sx={{ flexGrow: 1 }}
            >
              {session.user.name}
            </Typography>
          }
        />
      )}
      {!session && <SignIn />}
    </>
  );
}

• 修改Header为静态服务器组件，引入客户端内容：

import { Box, AppBar, Toolbar } from '@mui/material';
import HeaderTitle from './HeaderTitle';
import ClientHeaderContent from './ClientHeaderContent';

function Header() {
  const title = "Assessment System";

  return (
    <Box sx={{ flexGrow: 1, height: "64px" }}>
      <AppBar>
        <Toolbar>
          <HeaderTitle title={title} />
          <ClientHeaderContent />
        </Toolbar>
      </AppBar>
    </Box>
  );
}

export default Header;

这种方式下，Header本身可被预渲染，动态用户状态逻辑在客户端处理，不会影响根布局的静态性，子页面仍能保持静态/动态的区分。

2. 禁用Header的SSR（仅特殊场景使用） #

如果必须在Header中保留服务器端逻辑，可通过dynamic()函数让Header仅在客户端渲染：

// layout.tsx中
import dynamic from 'next/dynamic';

const Header = dynamic(() => import('./Header'), { ssr: false });

// 其余布局代码不变

注意：这种方式会导致Header在客户端 hydration 完成后才显示，可能出现页面闪烁，且服务器端无法预渲染Header内容，仅适合特殊场景。

3. 为静态页面单独配置布局 #

若部分页面完全不需要Header的动态逻辑，可为这类静态页面创建单独的无Header静态布局，根布局仅包含动态页面。但此方式会增加布局维护成本，适合页面区分明确的场景。

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