SSR
Apollo 客户端 React 服务器端渲染 API
安装
Apollo 客户端 >= 3 自带 React 钩子功能,无需安装任何额外包。
getDataFromTree
该getDataFromTree 函数接受您的 React 树,确定渲染它们所需的查询,然后获取所有这些查询。
import { getDataFromTree } from "@apollo/client/react/ssr";
参数
| 参数 | 类型 | 描述 |
|---|---|---|
树 | React.ReactNode | 您想渲染和获取数据的 React 树。 |
上下文 | { [key: string]: any } | 您想在渲染/数据检索期间在 React 上下文中可用的可选值。 |
结果
getDataFromTree 返回一个承诺(Promise<string>)当数据在你的 Apollo 客户端存储中准备好时解决。结果是通过 在内部使用 ReactDOMServer.renderToStaticMarkup生成的。
示例
有关 使用 getDataFromTree 执行查询的更多信息。
renderToStringWithData
函数 renderToStringWithData 与 getDataFromTree 类似,但使用 ReactDOMServer.renderToString来渲染其结果,而不是 ReactDOMServer.renderToStaticMarkup(React 文档有助于解释差异)。
import { renderToStringWithData } from "@apollo/client/react/ssr";
参数
| 参数 | 类型 | 描述 |
|---|---|---|
组件 | ReactElement | 你想渲染和获取数据的 React 组件树。 |
结果
renderToStringWithData 返回一个承诺(Promise<string>)当数据在你的 Apollo 客户端存储中准备好时解决。结果是通过 ReactDOMServer.renderToString在内部生成的。