Next.js v13中Loading组件无法显示的问题求助

可能的原因及修复步骤 #

1. 检查loading.tsx的文件位置 #

Next.js 13 App Router中，loading.tsx必须和对应的page.tsx放在同一个路由目录下。例如：
如果你的首页是src/app/page.tsx，那么loading.tsx应该放在src/app/loading.tsx，而不是src/loading.tsx。错误的路径会导致框架无法识别这个加载组件。

2. 理解Loading组件的触发场景 #

loading.tsx默认仅在客户端导航时生效（比如通过Next.js的<Link>组件跳转到该页面）。当你直接刷新页面时，服务器会先完成数据获取再渲染页面并返回完整HTML，因此不会显示加载状态——这是服务端渲染的正常行为。

测试方法：
创建另一个页面（比如src/app/about/page.tsx），添加指向首页的链接：

import Link from 'next/link';

export default function About() {
  return <Link href="/">回到首页</Link>;
}

点击该链接跳转时，应该能看到loading.tsx的内容。

3. 如何在页面初始加载（刷新）时显示Loading状态 #

如果需要在首次刷新页面时也展示加载状态，你需要将数据获取逻辑移到客户端：

方案：客户端侧数据获取

修改page.tsx为客户端组件，手动管理加载状态：

'use client';

import { useState, useEffect } from 'react';
import { IResult } from '@/interface';
import Results from '@/components/Results';

// 注意：客户端环境变量需要添加NEXT_PUBLIC_前缀
const API_KEY = process.env.NEXT_PUBLIC_API_KEY;

export default function Home({ searchParams } : {searchParams: any}) {
  const [results, setResults] = useState<IResult[]>([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);
  const genre = searchParams.genre || 'fetchTrending';

  useEffect(() => {
    const fetchData = async () => {
      setLoading(true);
      try {
        const res = await fetch(`https://api.themoviedb.org/3/${genre === 'fetchTopRated'
          ? 'movie/top_rated' : 'trending/all/week'
        }?api_key=${API_KEY}&language=en-US&page=1`);

        if (!res.ok) throw new Error('Failed to fetch data');
        
        const data = await res.json();
        setResults(data.results as IResult[]);
        setError(null);
      } catch (err) {
        setError(err instanceof Error ? err.message : '未知错误');
      } finally {
        setLoading(false);
      }
    };

    fetchData();
  }, [genre]);

  if (loading) return <div>loading...</div>;
  if (error) return <div>加载失败：{error}</div>;

  return (
    <>
      <main className="flex min-h-screen flex-col items-center justify-between p-4">
        <Results results={results}></Results>
      </main>
    </>
  );
}

• 注意：客户端环境变量需要以NEXT_PUBLIC_开头，否则无法在浏览器中访问。
• 这种方式会在页面加载时先显示loading，待数据获取完成后渲染内容，刷新页面时也能看到加载状态。

额外说明 #

• 如果你坚持使用服务端数据获取，无法在初始刷新时显示loading.tsx，因为服务器会等待数据返回后再生成完整页面。
• 若使用SWR或React Query等数据获取库，可以更简洁地管理加载、错误和缓存状态。

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