Next.js客户端组件中使用异步服务端组件是否必须用Suspense？

场景复现 #

我在学习Next.js，为了给页面表单添加重置功能使用了useRef，因此给page.tsx加上了'use client'指令。将图片画廊逻辑提取为独立的Gallery组件后，遇到了渲染报错。

Gallery.tsx（异步服务端组件） #

import { get_images } from '@/utils';
import styles from './Gallery.module.css';

export default async function Gallery() {
  const images = await get_images();
  return (
    <ul className={styles.gallery}>
      {images.map(file => {
        const url = `https://example.com/images/${file}`;
        return (
          <li key={file}>
            <span>
              {/* 使用Image组件时会触发双重错误 */}
              <img src={url} alt="image" />
            </span>
          </li>
        );
      })}
    </ul>
  );
}

page.tsx（客户端组件） #

'use client';
import { useRef } from 'react';
import { revalidatePath } from 'next/cache'

import styles from "./page.module.css";
import { upload } from '@/git';
import Gallery from '@/components/Gallery';

export default function Home() {
  const formRef = useRef();

  async function uploadAction(formData: FormData) {
    await upload(formData);
    revalidatePath('/');
  }
  
  return (
    <main className={styles.main}>
      {/* <Gallery /> 直接引入会报错 */}
      <h2>Upload form</h2>
      <div className={styles.form}>
        <form action={uploadAction}>
        </form>
      </div>
   </main>
  );
}

遇到的报错 #

1. 直接在客户端组件中引入异步服务端组件时，触发警告：

app-index.js:33 Warning: async/await is not yet supported in Client Components, only Server Components. This error is often caused by accidentally adding `'use client'` to a module that was originally written for the server.
    at Gallery
    at main
    at Home (webpack-internal:///(app-pages-browser)/./src/app/page.tsx:23:66)

2. 给Gallery添加'use server'指令后，触发另一个警告：

app-index.js:33 Warning: Cannot update a component (`Router`) while rendering a different component (`proxy`). To locate the bad setState() call inside `proxy`, follow the stack trace as described in https://reactjs.org/link/setstate-in-render
    at proxy
    at main
    at Home (webpack-internal:///(app-pages-browser)/./src/app/page.tsx:23:66)

解决方法 #

用React.Suspense包裹异步服务端组件后，问题解决：

import { Suspense } from 'react';

// 在Home组件的return中修改：
<Suspense fallback={<p>loading...</p>}>
  <Gallery />
</Suspense>

核心问题与解答 #

提问 #

在Next.js客户端组件中使用异步服务端组件时，Suspense是否是必须的？我仅关注规则允许的情况，不在意异步操作完成前页面是否冻结。

解答 #

是的，Suspense是必须的。

在Next.js的App Router机制中，客户端组件（标记'use client'）的渲染流程是同步的，本身不支持直接处理异步组件的等待状态。而异步服务端组件的渲染依赖React的Suspense机制来承担“等待边界”的角色——让React明确知道在异步数据加载完成前该如何处理渲染逻辑，哪怕你把fallback设成空内容或者极简占位。

哪怕你不在意页面冻结，Next.js的规则也要求必须用Suspense包裹异步服务端组件，否则会触发你遇到的这类渲染警告或错误。

另外需要注意：不要给服务端组件加'use server'指令，这个指令是用于定义**服务端动作（Server Actions）**的，不是用来标记服务端组件的——服务端组件默认就是服务端渲染，额外添加该指令会导致逻辑冲突，触发报错。

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