Next.js 15 App Router中Suspense与ErrorBoundary数据获取的写法疑问

回答 #

你的实现是Next.js App Router中常规且推荐的模式之一，但并非唯一选择，完全允许直接在page.tsx中进行数据获取，以下分点说明：

1. 子组件中做数据获取的合理性 #

将数据逻辑放在Suspense包裹的子组件里，是为了实现局部加载/错误隔离：

• 页面的静态内容（比如示例中的<h1>Articles</h1>）无需等待数据加载完成即可渲染，提升用户感知速度；
• 只有数据依赖的列表部分会进入Suspense加载状态，或在出错时展示局部错误提示，不会阻塞整个页面。
  这种模式是Next.js官方推荐的"渐进式加载"实践，尤其适合复杂页面的体验优化。

2. 直接在page.tsx中做数据获取的方法 #

如果不需要局部隔离，完全可以将数据逻辑移到page组件中，两种常见写法：

写法一：结合ErrorBoundary与异步逻辑

"use client";
import { ErrorBoundary } from "next/error";
import Link from "next/link";

export default async function ArticleListPage() {
  return (
    <main>
      <h1>Articles</h1>
      <ErrorBoundary fallback={<p>Error: Unable to load articles.</p>}>
        {await (async () => {
          const articles = await fetchAllArticles();
          return articles.map((article: any) => (
            <Link
              key={article.slug}
              href={`/articles/${article.slug}`}
            >
              <img src={article.cover} />
              <h2>{article.title}</h2>
              <p>{article.description}</p>
            </Link>
          ));
        })()}
      </ErrorBoundary>
    </main>
  );
}

写法二：用try/catch直接处理错误

如果不需要自定义Suspense状态（Next.js会自动处理页面级加载），也可以用try/catch捕获错误：

import Link from "next/link";

export default async function ArticleListPage() {
  try {
    const articles = await fetchAllArticles();
    return (
      <main>
        <h1>Articles</h1>
        {articles.map((article: any) => (
          <Link
            key={article.slug}
            href={`/articles/${article.slug}`}
          >
            <img src={article.cover} />
            <h2>{article.title}</h2>
            <p>{article.description}</p>
          </Link>
        ))}
      </main>
    );
  } catch (error) {
    return (
      <main>
        <h1>Articles</h1>
        <p>Error: Unable to load articles.</p>
      </main>
    );
  }
}

3. 优化样板代码的方案 #

重复嵌套ErrorBoundary和Suspense确实繁琐，你可以封装通用组件复用逻辑：

// components/SuspenseErrorBoundary.tsx
"use client";
import { ErrorBoundary } from "next/error";
import { Suspense, ReactNode } from "react";

type SuspenseErrorBoundaryProps = {
  loadingFallback: ReactNode;
  errorFallback: ReactNode;
  children: ReactNode;
};

export function SuspenseErrorBoundary({
  loadingFallback,
  errorFallback,
  children,
}: SuspenseErrorBoundaryProps) {
  return (
    <ErrorBoundary fallback={errorFallback}>
      <Suspense fallback={loadingFallback}>
        {children}
      </Suspense>
    </ErrorBoundary>
  );
}

之后在页面中直接调用：

import { SuspenseErrorBoundary } from "@/components/SuspenseErrorBoundary";
import { ArticleList } from "./ArticleList";

export default async function ArticleListPage() {
  return (
    <main>
      <h1>Articles</h1>
      <SuspenseErrorBoundary
        loadingFallback={<p>Loading...</p>}
        errorFallback={<p>Error: Unable to load articles.</p>}
      >
        <ArticleList />
      </SuspenseErrorBoundary>
    </main>
  );
}

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