React服务端渲染(SSR)API数据映射失效问题求助

你遇到的是SSR场景下的客户端水合（Hydrate）不匹配问题：服务端渲染时能拿到API数据并生成包含内容的HTML，但客户端初始化时没有同步获取这份数据，导致组件中data为undefined，调用map时触发报错。服务端输出的HTML只是静态内容，客户端需要相同的初始数据才能完成水合，保持前后端渲染逻辑一致。

1. 服务端注入初始数据到HTML #

修改server.js，在生成的HTML中注入全局变量，把API数据传递给客户端：

// 在server.js的HTML替换逻辑中新增注入代码
const html = template
  .replace(`<!--app-html-->`, appHtml)
  .replace(`<!--app-head-->`, `${helmet.title.toString()}${helmet.meta.toString()}`)
  // 新增：将API数据注入为全局变量
  .replace(`<!--initial-data-->`, `<script>window.__INITIAL_DATA__ = ${JSON.stringify(data)}</script>`)

同时在你的index.html模板中预留<!--initial-data-->占位符，确保替换操作生效。

2. 客户端读取初始数据并传递给组件 #

修改客户端入口文件（通常是entry-client.jsx），读取服务端注入的全局数据，传递给根组件：

import React from 'react'
import { hydrateRoot } from 'react-dom/client'
import App from './App'

// 读取服务端注入的初始数据
const initialData = window.__INITIAL_DATA__

// 将初始数据传递给根组件
hydrateRoot(document.getElementById('root'), <App data={initialData} />)

3. 组件添加防御性编程 #

在Leistungen.jsx中给data设置默认值，并添加空值判断，避免报错：

const Leistungen = ({data = []}) => { // 给data设置默认空数组
  return (
    <>
      <LeistungenContainer>
        <LeistungenHeadline>
          <Headline>Unsere<br /><span>Leistungen</span></Headline>
          <LeistungenText>Test</LeistungenText>
        </LeistungenHeadline>
        {/* 使用可选链操作符确保data存在再执行map */}
        {data?.map((leistung, i) => {
          const iconLink = leistungenIconsLinks.find(item => item.Leistungsart === leistung.attributes.Leistungsname);
          // 找不到对应iconLink时跳过当前项渲染
          if (!iconLink) return null;
          return (
            <LeistungenKasten key={i}> {/* 添加key属性，符合React列表渲染要求 */}
              <KastenLink to={iconLink.link}>
                {iconLink.icon}
                <Titel>{leistung.attributes.Leistungsname}</Titel>
                <Text>{leistung.attributes.Leistungsbeschreibung}</Text>
                <Button to={iconLink.link}>Erfahre mehr</Button>
              </KastenLink>
            </LeistungenKasten>
          );
        })}
      </LeistungenContainer>
    </>
  )
}

4. 确保服务端render函数正确传递数据 #

检查entry-server.jsx中的render函数，确保把data传递给根组件：

export function render(url, context, data) {
  const appHtml = renderToString(
    <StaticRouter location={url} context={context}>
      <App data={data} /> {/* 传递data给根组件 */}
    </StaticRouter>
  )
  return appHtml
}

SSR的核心是前后端渲染一致性：服务端用数据生成HTML，客户端需要用相同的数据进行水合，才能复用已渲染的静态内容，避免重新渲染或报错。通过注入全局变量的方式，让客户端获取到服务端的初始数据，保证水合过程中组件props与服务端完全一致。

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