问题
在我使用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;