nextjs切换页面丢失了loading加载页

问题

在我使用nextjs14重构了自己的网站后，一直有一个问题存在，就是在本地开发的时候，切换页面会出现我配置的loading加载页，但是在我发布到线上后，loading加载页在切换页面的时候消失了。如此就导致，我的页面在css没有加载完成就展示，出现了页面布局错乱的问题。

产生原因

有查过很多文档，一开始总觉得是自己配置的问题，但我在查阅 nextjs官方 github 提交的 issue 发现，很多的人遇到和我一样的问题，细看发现是框架本身的问题，直到我发版时，官方都没有解决这个问题，所以考虑自己解决。

思路

使用高阶组件包裹页面组件，在页面组件没渲染完成时，展示loading加载，完成后切换到页面内容

具体实现

高阶组件的具体实现

import React, { useState } from "react";
import Loading from "../../loading";

const withLoading = (WrappedComponent) => {
  const WithLoadingComponent = (props) => {
    const [isLoading, setIsLoading] = useState(true);

    const handleLoaded = () => {
      setIsLoading(false);
    };

    return (
      <>
        {isLoading && <Loading />}
        <WrappedComponent
          {...props}
          loading={isLoading}
          onLoaded={handleLoaded}
        />
      </>
    );
  };

  // 设置 displayName 帮助调试
  const wrappedComponentName =
    WrappedComponent.displayName || WrappedComponent.name || "Component";
  WithLoadingComponent.displayName = `WithLoading(${wrappedComponentName})`;

  return WithLoadingComponent;
};

export default withLoading;

简单的hooks，页面loading结束时机

import { useEffect } from "react";
import { sessionSet, sessionGet } from "@utils/local";

const useChangeLoading = (props) => {
  useEffect(() => {
    const isCache = sessionGet(`${props.name}_cache`);

    // 模拟一个异步加载过程
    const timer = setTimeout(
      () => {
        props.onLoaded();
        sessionSet(`${props.name}_cache`, true);
      },
      isCache ? 1000 : 1500
    ); // 最少加载时间

    return () => clearTimeout(timer);
  }, []);

  return null;
};

export default useChangeLoading;

结尾

原文链接 wp-boke.work/blog-detail…