NextJS中404页面重复编译致上下文状态丢失问题咨询

为什么404页面会触发全页重载 #

NextJS 默认路由逻辑是：当访问未在pages目录下定义的路径时，客户端先尝试匹配已有的静态/SSR页面，匹配失败后会向服务器发起请求。服务器返回预定义的404页面（pages/404.js），这个过程会触发全页渲染——相当于加载全新HTML文档，客户端Context状态被重置，直到客户端hydration完成后，useEffect才会重新执行并更新状态，所以会出现短暂的默认状态。

实现404页面的客户端路由（保留Context状态） #

要避免404触发全页重载，核心是让404页面在客户端路由层面处理，不走服务器请求。推荐两种方式：

1. 使用Catch-All 动态路由 #

在pages目录下创建[...notFound].js（或tsx）文件，这个路由会匹配所有未被其他路由定义的路径，默认以客户端路由模式加载（除非配置了getServerSideProps或getStaticProps）：

// pages/[...notFound].js
import { useRouter } from 'next/router';

export default function NotFoundPage() {
  const router = useRouter();

  // 客户端路由模式下，Context状态完全保留，无需重新拉取登录状态
  return (
    <div>
      <h1>404 - 页面不存在</h1>
      <button onClick={() => router.push('/')}>返回首页</button>
    </div>
  );
}

访问任何未定义路径时，都会在客户端渲染这个组件，Context状态不会被重置。

2. 全局路由拦截（在_app.js中处理） #

在_app.js里监听路由变化，判断当前路径是否属于合法路由列表，若不属于则直接渲染404组件：

// pages/_app.js
import { useRouter } from 'next/router';
import { useEffect, useState } from 'react';
import NotFound from './404';

// 定义你的合法路由列表
const VALID_ROUTES = ['/', '/about', '/dashboard'];

export default function MyApp({ Component, pageProps }) {
  const router = useRouter();
  const [isInvalidRoute, setIsInvalidRoute] = useState(false);

  useEffect(() => {
    const checkRouteValidity = () => {
      setIsInvalidRoute(!VALID_ROUTES.includes(router.pathname));
    };

    checkRouteValidity();
    const handleRouteChange = () => checkRouteValidity();
    router.events.on('routeChangeComplete', handleRouteChange);

    return () => router.events.off('routeChangeComplete', handleRouteChange);
  }, [router]);

  if (isInvalidRoute) {
    return <NotFound />;
  }

  return <Component {...pageProps} />;
}

这种方式适合需要精准控制合法路由的场景，同样能实现客户端渲染404，保留Context状态。

NextJS页面与错误页核心机制说明 #

• 常规页面路由：使用next/link或useRouter.push跳转已定义页面时，NextJS采用客户端路由（SPA模式），仅加载对应组件的JS bundle，不刷新整个页面，Context状态、全局状态都会保留，useEffect仅在组件首次挂载时触发。
• 默认错误页（404/500）：访问未定义路径时，服务器返回静态生成的错误页HTML，触发全页重载，客户端所有内存状态（包括Context）被重置，之后hydration过程会重新初始化组件并执行useEffect。
• 自定义错误页与动态路由：Catch-All动态路由是客户端渲染的动态页面，路由匹配在客户端完成，不会发起服务器请求，因此能保留客户端状态；而pages/404.js是静态生成页面，仅在服务器返回时加载，必然触发全页重载。

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