React Suspense 有效，但只是部分有效

Question

我在 React JS 中遇到 Suspense 问题。

图片胜千言：

该应用程序渲染 Suspense Skeleton（第一张图像），但它在渲染组件之前清除所有内容（第二张，然后第三张图像）。

<div className="container">
      <Suspense fallback={<CarouselSkeleton />}>
        <Carousel action={latestAction} />
      </Suspense>
...

我正在使用惰性（...）加载器加载 Carousel 组件。

我确实尝试将 Suspense 放置在几个外层上，行为相同。

我期待组件在 Suspense 回退后立即显示，我正在努力改进 CLS。

Answer 1

您面临的问题可能是由您提供给数据获取库（如 swr 和 tanstack-query）的 FallbackData 引起的，它不仅用于初始渲染，还用于之后的重新渲染。

您的目标可能是为服务器端渲染提供fallbackData，并使其在客户端的每次重新渲染时暂停。但问题是，当键发生变化时，当有数据重新验证时，fallbackData 在内部用于fallbackData，因此初始渲染后的每次重新渲染都会导致意外的布局变化（prevData -> FallbackData -> newData）。

您要做的就是在初始渲染后禁用fallbackData。

要做到这一点，你可以这样做。

  const hasMounted = useRef(false);
  const { queryString } = useQueryObject();
  const { data, isLoading, isValidating } = useSWR<DataResponse>(
  queryString,
  {
    suspense: true,
    fallbackData: hasMounted.current ? undefined : fallbackData,
  }
  );

  useEffect(() => {
    hasMounted.current = true;
  }, []);

通过使用useRef和useEffect，你可以将fallbackData设置为undefined。