Next.js 13：SSR目录下loading.js无法正常工作求助

你遇到的核心问题是：Next.js 13的loading.js仅支持App Router（app目录结构），而你当前使用的是传统Pages Router（pages目录），所以直接在pages子目录下创建loading.js不会触发预期的加载UI。

针对Pages Router的SSR页面，你可以通过以下两种方式实现加载状态：

方式一：页面组件内维护加载状态 #

在你的SSR页面（比如profiles/[title].js、articles/[id].js）中，结合getServerSideProps和组件状态实现加载提示：

// pages/profiles/[title].js
import { useState, useEffect } from 'react';

export default function ProfilePage({ profile }) {
  // 初始加载状态设为true，直到数据渲染完成
  const [isLoading, setIsLoading] = useState(true);

  useEffect(() => {
    setIsLoading(false);
  }, [profile]);

  if (isLoading) {
    return <p>Loading...</p>;
  }

  return (
    <div>
      <h1>{profile.title}</h1>
      {/* 其他页面内容 */}
    </div>
  );
}

export async function getServerSideProps(context) {
  // 模拟异步数据请求延迟
  await new Promise(resolve => setTimeout(resolve, 1000));
  
  const res = await fetch(`https://your-api-url/profiles/${context.params.title}`);
  const profile = await res.json();

  return { props: { profile } };
}

方式二：全局路由加载条（使用nprogress） #

如果需要全局统一的加载提示，可以用nprogress库实现路由切换时的加载条：

1. 安装依赖：

npm install nprogress
# 或
yarn add nprogress

2. 在_app.js中配置：

// pages/_app.js
import Router from 'next/router';
import NProgress from 'nprogress';
import 'nprogress/nprogress.css';

// 监听路由事件
Router.events.on('routeChangeStart', () => NProgress.start());
Router.events.on('routeChangeComplete', () => NProgress.done());
Router.events.on('routeChangeError', () => NProgress.done());

export default function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />;
}

额外说明 #

如果想使用Next.js 13官方的loading.js特性，你需要迁移到App Router：

• 创建app目录，按照App Router的规则重构页面（比如app/profiles/[title]/page.js对应原Pages Router的pages/profiles/[title].js）
• 在对应路由段下创建loading.js，此时就能自动触发加载UI

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