Next.js13 use server文件导出dynamic报错及导航栏实时更新解决

错误原因解释 #

标注了'use server'的文件属于Server Actions专属文件，Next.js 对这类文件有严格限制：仅允许导出异步函数（即 Server Action），不允许导出dynamic这类常量。你在ClientInsideServerLayout.tsx中导出dynamic = 'force-dynamic'违反了该规则，因此触发报错。而且该文件本身只是普通服务器组件，完全不需要'use server'标记。

分步解决方案 #

1. 修正 ClientInsideServerLayout.tsx #

移除'use server'标记和dynamic导出，还原为普通服务器组件：

import { getSessionStatus } from "../ServerActions/isUserLoggedIn";
import ClientLayout from "./ClientLayout"

export async function ClientInsideServerLayout() {
    const isLoggedIn = await getSessionStatus();
    return (
      <>
        <ClientLayout isLoggedIn={isLoggedIn}></ClientLayout>
      </>
    )
}

2. 迁移动态渲染配置到根 layout.tsx #

根布局是控制全局页面渲染策略的入口，在这里设置dynamic = 'force-dynamic'才能有效禁用静态缓存，解决导航栏状态不更新的问题：

import './globals.css';
import { getSessionStatus } from './ServerActions/isUserLoggedIn';
import { ClientInsideServerLayout } from './components/ClientInsideServerLayout';

// 全局启用动态渲染，禁用静态缓存
export const dynamic = 'force-dynamic';

export default async function RootLayout({ children }: { children: React.ReactNode }) {
  const isLoggedIn = await getSessionStatus();

  return (
    <html lang="en">
      <body>
        <div>
          <ClientInsideServerLayout></ClientInsideServerLayout>
          {children}
        </div>
      </body>
    </html>
  );
}

注意：移除根 layout 里的'use server'标记，因为根 layout 默认就是服务器组件，无需额外声明。

3. 实现登出后导航栏自动更新 #

在ClientLayout.tsx的signOut函数中，新增router.refresh()调用——该方法会触发服务器组件重新获取最新数据（包括登录状态），无需手动刷新页面即可更新导航栏：

'use client'

import Link from 'next/link';
import { useRouter } from 'next/navigation'

export default function ClientLayout({ isLoggedIn }: { isLoggedIn: boolean }) {
  const router = useRouter();

  const signOut = async () => {
    try {
      const response = await fetch("http://localhost:3000/auth/sign-out", {
        method: "POST"
      });

      if (response.ok) {
        router.push("/");
        // 触发服务器组件数据刷新，更新导航栏状态
        router.refresh();
        console.log('登出成功');
      }     
    } catch (error: unknown) {
      console.error('登出出错:', error);
    }
  };

  // 其余代码保持不变...
}

额外优化建议 #

• 确保getSessionStatus函数能实时读取最新的登录状态（比如直接读取 cookie 或会话存储，避免内部缓存）。
• 若不想全局启用动态渲染，可在getSessionStatus函数中使用unstable_noStore（Next.js 13.4+）来单独禁用该函数的缓存，实现更精细的控制。

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