Next.js 15.2.1中_rsc请求下loading.tsx与React Suspense未触发问题咨询

针对你遇到的问题，给你几个具体的排查和解决方向：

• 确认loading.tsx的位置是否正确
  loading.tsx必须放在对应路由段的同级目录下，比如/customers页面的loading文件得放在/app/customers/loading.tsx，不能放到父目录或者其他层级。如果位置错了，路由过渡时根本不会识别这个loading组件。另外，可以给loading.tsx加上'use client'指令，确保它作为客户端组件运行。

• 排查_rsc请求对应的加载逻辑
  _rsc请求是Server Component的数据流请求，如果你的page.tsx是Server Component，且内部直接包含异步数据请求（比如用fetch、async/await），正常情况下loading.tsx应该自动触发。但如果是page里的子Server Component在加载数据，可能需要给这个子组件外层显式套上Suspense边界：

  // app/customers/page.tsx
  import { Suspense } from 'react';
  import CustomerData from './CustomerData'; // 含异步请求的子Server Component
  
  export default async function CustomersPage() {
    return (
      <Suspense fallback={<div>加载客户数据中...</div>}>
        <CustomerData />
      </Suspense>
    );
  }
  

  这样子组件发起_rsc请求pending时，Suspense的fallback就会显示。

• 检查Link的target属性
  你用了target={blockItem.target ?? "_self"}，如果target是_blank，会新开标签页加载页面，这时候App Router的路由过渡逻辑不会触发，loading.tsx自然不会生效。只有当target为_self（当前页面导航）时，才会触发loading状态，所以要确保导航时是在当前页面跳转。

• 修正禁用服务器加载的处理方式
  如果把page.tsx改成客户端组件（加'use client'），客户端组件的异步请求不会自动触发Suspense，这时候需要手动处理加载状态：比如用useEffect发起请求，配合useState管理加载状态，或者用React Query、SWR这类库来处理数据加载和loading展示。

• 检查版本bug
  Next.js 15.2.1可能存在路由过渡相关的已知问题，建议升级到同分支的最新版本（比如15.x的最新版），看看是否能解决这个问题。

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