Next.js 13+ App目录下复用校验函数后页面无法重复渲染问题

问题根源 #

你遇到的问题核心是模块级代码（包括顶层await）在Next.js App Router中只会执行一次。当你用export default await validateSigInOrRedirect(page)时，校验逻辑是在模块加载阶段执行的，模块被Next.js缓存后，后续客户端导航（比如点击Link跳转）不会重新加载模块，自然不会再次执行校验和console.log(session)。而直接把校验写在页面组件内部时，组件函数每次渲染都会被调用，所以逻辑会重复执行。

解决方案：用高阶组件（HOC）封装前置逻辑 #

要保留复用的封装写法，同时保证每次页面渲染都执行前置逻辑，不能用顶层await导出组件，而是把校验/处理逻辑封装成高阶组件（HOC），让逻辑在组件内部执行：

1. 封装认证校验的HOC #

// utils/withAuth.js
export function withAuth(PageComponent) {
  // 返回一个异步组件函数（Server Component支持异步）
  return async function AuthenticatedPage(props) {
    const session = await getSession(); // 你的获取session逻辑
    console.log(session); // 每次渲染都会执行
    if (!session) {
      redirect('/login'); // Next.js的redirect函数，Server Component可用
    }
    // 把props传递给原页面组件
    return <PageComponent {...props} />;
  };
}

2. 页面中使用HOC #

// app/dashboard/page.js
import { withAuth } from '@/utils/withAuth';

const DashboardPage = () => {
  return <div>仪表盘页面</div>;
};

// 直接导出被HOC包装后的组件，无需await
export default withAuth(DashboardPage);

3. 其他前置逻辑复用示例（比如processSomething） #

// utils/withProcess.js
export function withProcess(PageComponent) {
  return async function ProcessedPage(props) {
    // 这里写你的通用前置逻辑：比如获取公共数据、处理请求参数等
    const publicData = await fetchPublicData();
    const processedProps = { ...props, publicData };
    
    console.log('前置逻辑执行');
    return <PageComponent {...processedProps} />;
  };
}

// 页面中使用
import { withProcess } from '@/utils/withProcess';

const SomePage = ({ publicData }) => {
  return <div>公共数据：{JSON.stringify(publicData)}</div>;
};

export default withProcess(SomePage);

关键注意事项 #

• 如果你的页面是客户端组件（加了'use client'），不能直接写异步组件函数，这时候可以把前置逻辑放到useEffect中，或者用SWR/React Query来处理数据校验，但客户端组件的前置校验会先渲染页面再执行逻辑，不如Server Component在服务端直接拦截更合适。
• 高阶组件的方式完全兼容Next.js App Router的渲染机制，不管是服务端渲染还是客户端导航，每次页面渲染都会触发封装的前置逻辑。

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