在 NextJs 13 中显示服务器组件的加载

Question

每当我搜索产品或过滤时，我想显示加载骨架而不是我的卡片组件。 这是我在主页的代码：

export default async function Home({ searchParams }: { searchParams: any }) {
  const allCars = await fetchCars({
    year: searchParams.year || 2022,
  });

  const isDataEmpty = !Array.isArray(allCars) || allCars.length < 1 || !allCars;

  return (
    <main>
      <SearchBar />

      {!isDataEmpty ? (
        <section>
          <div>
            {allCars?.map((car) => (
              <CarCard car={car} />
            ))}
          </div>
        </section>
      ) : (
        <div>
          <h2>Oops, no results</h2>
        </div>
      )}
    </main>
  );
}

我无法将道具传递给组件并处理状态加载，因为我的主页是服务器组件，而且我不想转换它。

我将自己包裹在 Suspense 中，我还使用了 loading.tsx，但它们不起作用。

有什么方法可以显示页面的一部分在服务器组件中的加载吗？ （我更改了 url 和搜索参数以获取新数据）

Answer 1

如果您的组件随着用户操作而更改，您必须使用客户端组件。

因此创建单独的客户端组件用于搜索和产品列表。然后在您的页面中使用它们。

您可以创建一个用于加载骨架的组件，或者在产品组件列表中创建另一个函数并在调用 api 时显示它。