NextJS中2D资源预加载后loading.tsx仅3D加载时显示的异常问题

问题根源 #

你遇到的异常是路由级加载（loading.tsx）与组件级异步加载的时序不匹配：路由加载完成（2D资源渲染）后，loading.tsx会自动消失，但此时3D模型的异步加载才启动，若你用全局Suspense fallback，就会导致Loading再次出现，形成“先显示2D → 再出现Loading → 3D加载完成后消失”的异常流程。

可行解决方案（无需引入全局状态管理） #

方案1：局部Suspense包裹3D组件（推荐） #

将3D组件单独用Suspense包裹，设置局部加载动画，避免全局Loading干扰已渲染的2D内容：

// app/[page]/page.tsx
import { Suspense } from 'react';
import TwoDAssets from './components/TwoDAssets';
import ThreeDModel from './components/ThreeDModel';

export default function Page() {
  return (
    <div className="page-container">
      {/* 2D资源直接渲染，无需等待 */}
      <TwoDAssets />
      
      {/* 3D组件单独用Suspense包裹，显示局部加载UI */}
      <Suspense fallback={<div className="3d-loading-spinner">加载3D模型中...</div>}>
        <ThreeDModel />
      </Suspense>
    </div>
  );
}

此方案下，页面打开后2D资源立即显示，3D区域显示局部加载动画，不会出现全局Loading“回退”的情况。

方案2：将3D加载纳入路由级异步处理 #

若需要全局Loading覆盖直到所有资源加载完成，可将3D模型的加载逻辑放到异步Page组件中，让loading.tsx持续显示到3D加载完成：

// app/[page]/page.tsx
import TwoDAssets from './components/TwoDAssets';
import ThreeDModel from './components/ThreeDModel';

// 异步加载3D模型数据（替换为你的真实加载逻辑）
async function fetch3DModel() {
  const modelResponse = await fetch('/path/to/3d-model.gltf');
  const modelData = await modelResponse.json();
  return modelData;
}

// 异步Page组件，路由Loading会持续到所有异步逻辑完成
export default async function Page() {
  const modelData = await fetch3DModel();
  
  return (
    <div className="page-container">
      <TwoDAssets />
      <ThreeDModel modelData={modelData} />
    </div>
  );
}

此方案下，页面打开后先显示loading.tsx，待2D资源加载+3D模型加载完成后，一次性渲染整个页面。

方案3：组件内部状态手动控制加载 #

若Suspense的自动触发逻辑不符合需求，可使用React内置的useState+useEffect手动跟踪3D加载状态：

// app/[page]/page.tsx
import { useState, useEffect } from 'react';
import TwoDAssets from './components/TwoDAssets';
import ThreeDModel from './components/ThreeDModel';

export default function Page() {
  const [is3DLoaded, setIs3DLoaded] = useState(false);

  useEffect(() => {
    // 3D模型加载逻辑
    const load3DModel = async () => {
      // 替换为你的真实加载代码
      await new Promise(resolve => setTimeout(resolve, 2000));
      setIs3DLoaded(true);
    };

    load3DModel();
  }, []);

  return (
    <div className="page-container">
      <TwoDAssets />
      {is3DLoaded ? (
        <ThreeDModel />
      ) : (
        <div className="3d-loading-spinner">加载3D模型中...</div>
      )}
    </div>
  );
}

此方案完全手动控制加载状态，避免Suspense的时序问题，同时无需引入外部状态管理库。

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