Next.js - React Server Component と Suspense

Next.js: 13.4.9
React: 18.2.0
MUI: 5.14.5

を使って以下のように実装

// page.tsx
export default async function Page() {
  return (
    <Box>
      <ServerComponent />
    </Box>
  );
}

// ServerComponent.tsx
export async function ServerComponent() {
  const data = await graphqlClient.request();
  return <>...</>;
}

Tatsushi Kiryu

すると、以下のエラーに遭遇。

Warning: Failed prop type: Invalid prop `children` supplied to `ForwardRef(Box)`, expected a ReactNode.

Tatsushi Kiryu

ChatGPT-4に聞いてみた。

あーそうか、とするとこれはSuspenseの出番かな。（それにしてもSuspenseが出てこないあたり、2021年9月までの情報しかないの厳しいな。Web Browsing の機能停止されているのもツライ。。）

Tatsushi Kiryu

Suspenseでwrapしたら見事解消。

// page.tsx
export default async function Page() {
  return (
    <Box>
+     <Suspense fallback={<div>loading...</div>}>
         <ServerComponent />
+     </Suspense>
    </Box>
  );
}

// ServerComponent.tsx
export async function ServerComponent() {
  const data = await graphqlClient.request();
  return <>...</>;
}