React SSR外部数据加载、Suspense使用与Hydration报错问题

问题1：ProductProperty组件无法配合Suspense异步加载JSON #

Suspense 只支持 React 官方定义的异步资源加载机制，useEffect 是客户端 hydration 完成后才执行的副作用，不属于 Suspense 能捕获的异步加载阶段，所以没法触发 Suspense 的 fallback。要解决这个问题，改用 React 18+ 支持的 use 钩子配合缓存的异步加载函数即可：

1. 封装缓存的异步数据加载函数

   import { cache } from 'react';
   
   // 用cache包裹，确保多次调用只请求一次JSON
   const fetchProductProperties = cache(async () => {
     const res = await fetch('/path/to/your/product-properties.json');
     return res.json();
   });
   

2. 在ProductProperty组件中用use钩子加载数据，配合Suspense

   import { use } from 'react';
   
   function ProductProperty() {
     // use钩子会让Suspense捕获加载状态
     const data = use(fetchProductProperties());
   
     return (
       <div>
         {/* 渲染数据内容 */}
         {Object.entries(data).map(([key, value]) => (
           <div key={key}>{key}: {value}</div>
         ))}
       </div>
     );
   }
   

3. 在父组件中用Suspense包裹ProductProperty

   import { Suspense } from 'react';
   
   function App() {
     return (
       <Suspense fallback={<div>Loading properties...</div>}>
         <ProductProperty />
       </Suspense>
     );
   }
   

注意：use 钩子需要 React 18.2+ 版本支持，如果你用的是更早版本，可以考虑在服务器端预加载数据后通过props传递给组件。

问题2：Hydration不匹配报错 #

这个报错核心是服务器渲染的HTML和客户端初始渲染的HTML结构/内容不一致，结合你的场景，大概率是服务器端未加载ProductProperty的异步数据，导致服务器渲染空白或loading，客户端useEffect加载后显示数据引发不匹配。解决办法如下：

方案1：服务器端预加载数据（推荐） #

在服务器端渲染App之前，先加载ProductProperty需要的JSON数据，通过props传递给组件，确保服务器和客户端渲染内容完全一致：

1. 服务器端代码（示例：server.tsx）

   import { renderToString } from 'react-dom/server';
   import App from './App';
   import fetchProductProperties from './fetchProductProperties';
   
   async function renderApp() {
     // 服务器端预加载数据
     const productProps = await fetchProductProperties();
     // 把数据作为props传递给App
     const html = renderToString(<App productProps={productProps} />);
     // 返回HTML给客户端，同时把数据序列化到window对象供客户端复用
     return `
       <html>
         <body>
           <div id="root">${html}</div>
           <script>window.__INITIAL_DATA__ = ${JSON.stringify(productProps)}</script>
           <script src="/client-bundle.js"></script>
         </body>
       </html>
     `;
   }
   

2. 客户端和组件复用预加载的数据

   // App.tsx
   function App({ productProps }: { productProps?: any }) {
     // 客户端优先用window上的初始数据，避免重复请求
     const initialData = typeof window !== 'undefined' ? window.__INITIAL_DATA__ : productProps;
   
     return (
       <Suspense fallback={<div>Loading...</div>}>
         <ProductProperty data={initialData} />
       </Suspense>
     );
   }
   
   // ProductProperty.tsx
   function ProductProperty({ data }: { data: any }) {
     return (
       <div>
         {Object.entries(data).map(([key, value]) => (
           <div key={key}>{key}: {value}</div>
         ))}
       </div>
     );
   }
   

方案2：客户端加载时保持初始渲染一致 #

如果无法在服务器端预加载数据，要确保客户端初始渲染内容和服务器端一致，再在hydration完成后加载数据：

1. 在ProductProperty组件中添加加载状态

   import { useState, useEffect } from 'react';
   
   function ProductProperty() {
     const [data, setData] = useState<null | any>(null);
     const [isLoading, setIsLoading] = useState(true);
   
     useEffect(() => {
       async function loadData() {
         const res = await fetch('/path/to/your/product-properties.json');
         const jsonData = await res.json();
         setData(jsonData);
         setIsLoading(false);
       }
       loadData();
     }, []);
   
     // 服务器端和客户端初始都渲染loading，避免不匹配
     if (isLoading || !data) {
       return <div>Loading properties...</div>;
     }
   
     return (
       <div>
         {Object.entries(data).map(([key, value]) => (
           <div key={key}>{key}: {value}</div>
         ))}
       </div>
     );
   }
   

额外检查：确保组件中没有直接使用window、document等客户端专属API，如果必须用，要放在useEffect里，或者用typeof window !== 'undefined'判断，避免服务器端渲染时执行这些代码导致结果不一致。

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