next server 组件 加载client 组件，使用suspense

在Next.js中，你可以使用next/server模块中的suspense功能来实现组件的异步加载。这通常用于在服务端渲染时处理异步数据获取的场景。

以下是一个简单的例子，展示如何在Next.js的页面中使用suspense来异步加载一个组件：

// pages/index.js
import React, { lazy, Suspense } from 'react';
import { withSuspense } from 'next/server';
 
// 异步加载Client组件
const ClientComponent = lazy(() => import('../components/ClientComponent'));
 
const ClientComponentWithSuspense = withSuspense(ClientComponent);
 
export default function HomePage() {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <ClientComponentWithSuspense />
    </Suspense>
  );
}

在这个例子中，ClientComponent是一个通过代码分割的方式异步加载的组件。withSuspense是next/server提供的一个高阶组件，它用于包装异步组件，以便在服务端渲染时处理异步加载的逻辑。

请注意，withSuspense是Next.js特有的API，不是React的一部分，因此它不会在不支持next/server的环境下工作。