>>;\n```\n\n`withSSR`会向组件传递`getInitialProps`返回的对象，以及 `__loading__` `__error__` `__getData__` 等三个属性，你可以用这几个属性来处理异步状态。\n\n第二个参数 `getInitialProps` 接受一个对象参数，该方法在 SSR 和 CSR 端都会被调用，所以参数略有不同：\n\n- node 环境，包含 `request` 和 `response` 对象，不包含 `location` `history`\n- browser 环境，包含 `location` `history`对象，不包含 `request` 和 `response`\n- `match` 和 `parentInitialProps` 无论哪个环境都存在\n\n`getInitialProps`应该返回一个包含要传递给组件`object`，它会和组件上层传递的 props 对象合并后传递给当前组件，当前组件就可以通过 props 获取相关数据（注意，如果是从异步调用数据，`getInitialProps` 则需要返回 Promise 对象容器）:\n\n- 如果`getInitialProps`返回空值，例如`null` `undefined`，则表示不在 server 端输出渲染，在页面加载后会在浏览器端重新获取数据\n- 你不需要特别处理`getInitialProps`的异常，如果`getInitialProps`内部调用有异常发生，出错信息会放到 `{ __error__: Error }`传递给组件\n- 同样的组件也会接收`{ __loading__: true }`，如果`getInitialProps`是异步返回数据的话\n- `getInitialProps` 也会通过 `{ __getData__ }` 传递给组件，方便在组件内部发起重新调用\n\n```typescript\nwithSSR(MyComponent, () =>\n fetch('/data.json').then(resp => ({\n data: resp.toJSON()\n }))\n);\n\n/**\n * async/await语法，同上\n */\nwithSSR(MyComponent, async () => {\n const resp = await fetch('/data.json');\n return { data: resp.toJSON() };\n});\n\n/**\n * 动态 path 路由，数据需要根据路由参数获取\n */\nwithSSR(UserDetail, async ({ match }) => {\n const resp = await fetch(`/api/user/${match.params.userid}`);\n\n return { userData: resp.toJSON() };\n});\n\n/**\n * 嵌套子路由路由，子路由的数据请求依赖于父级路由的数据\n * 这里假设父级路由获取userList数据，该UserDetail组件获取并渲染userList的第一项对应的数据\n * 通过 parentInitialProps 可以拿到父级路由的初始props对象\n */\nwithSSR(UserDetail, async ({ parentInitialProps }) => {\n const resp = await fetch(`/api/user/${parentInitialProps.userList[0].id}`);\n\n return { userData: resp.toJSON() };\n});\n```\n\n> **TypeScript 注意事项：** 如果使用 ts 开发，请使用 `withSSR` 包装的组件需要通过 `SSRProps<{}>` 来声明组件的 props 类型，这样就可以在组件内部安全的通过 props 访问 `passToComponentPropName` `__error__` `__loading__` `__getData__` 等属性了\n\n```typescript\nconst MyComp: React.FC<\n SSRProps<{\n passToComponentPropName: string;\n }> &\n RouteComponentProps\n> = props => {\n if (props.__loading__) {\n return 'loading...';\n }\n\n if (props.__error__) {\n return props.__error__.message;\n }\n\n return {props.passToComponentPropName}
;\n};\n\nexport default withSSR(MyComp, async () => ({\n passToComponentPropName: 'I am good!'\n}));\n```\n\n**prefetchRoutesInitialProps**\n\n`prefetchRoutesInitialProps` 用于在 SSR 端预加载通过 `withSSR` 绑定了 `getInitialProps` 方法的组件。它支持嵌套路由。\n\n当匹配到嵌套路由时，它会预先调用父级路由的 `getInitialProps`，然后将结果(`parentInitialProps`)和子路由的匹配信息(`match`等对象)一起传递给子路由的`getInitialProps`。这是一个递归过程，支持多级路由。\n\n```typescript\nfunction prefetchRoutesInitialProps(\n routes: RouteItem[],\n url: string,\n request: any,\n response: any,\n extendProps?: object\n): Promise<{}>;\n```\n\n具体使用示例请参考上方 [路由与异步数据处理](#路由与异步数据处理)\n\n### 国际化 i18n\n\n`tiger-new`的模板中带了一个`utils/i18n`模块，用于处理多语言。如果要支持 SSR，需要注意的是，界面语言不可以通过全局的`__()`方法处理了，必须放到组件的生命周期中声明，并且通过`utils/i18n/withI18n`高阶组件传递的`i18n.__()`来处理多语言文案。\n\n**错误示例：**\n\n```typescript\n// About.tsx\nconst title = __('About Us'); // 错误，不可以在组件外直接通过全局 __() 调用语言包\n\nfunction AboutPage() {\n return {title}
;\n}\n```\n\n**正确示例：**\n\n```typescript\n// About.tsx\nimport withI18n, { I18nProps } from 'utils/i18n/withI18n';\n\nfunction AboutPage(props: I18nProps) {\n const title = props.i18n.__('About Us');\n\n return {title}
;\n}\n\nexport default withI18n(About);\n```\n\n另外服务端入口需要提供下`withI18n`依赖的 i18n 上下文入口：\n\n```typescript\nimport type { Request, Response } from 'express'; // 引入ts类型定义，js可以省略\nimport cookick from 'cookick'; // cookick是utils/i18n模块使用的cookie解析模块\nimport { createI18n, context as i18nContext } from 'utils/i18n';\n\nconst renderer = async (templateFile: string, request: Request, response: Response) => {\n // 如果不是html页面请求，忽略；或这里执行其它逻辑处理\n if (!request.accepts().includes('text/html')) {\n return response.status(404).end();\n }\n\n /**\n * 设置cookick的解析来源\n */\n cookick.updateCookieSource(request.headers.cookie || '');\n\n /**\n * 创建一个新的适用于服务端的i18n对象\n * 注意，这里并没有指定createI18n的第三、四个参数，是因为设置cookie由浏览器端js完成即可\n */\n const i18n = createI18n(request.url, request.get('accept-language') || '');\n\n const initialProps = await prefetchRoutesInitialProps(routes, request.url, request, response, {\n // 将i18n对象作为getInitialProps的额外参数传递，这样就可以在getIntialProps中也可以访问i18n对象了\n i18n\n });\n const ctx: StaticRouterContext = {\n initialProps\n };\n\n let body = renderToString(\n \n {/* 这里需要通过i18nContext.Provider将i18n向下传递，供withI18n模块访问 */}\n \n \n \n \n );\n\n let html = template\n .replace('%ROOT%', body)\n .replace('%DATA%', `var __DATA__=${initialProps ? JSON.stringify(initialProps) : 'null'}`);\n\n if (ctx.url) {\n response.redirect(ctx.url);\n } else {\n response.send(html);\n }\n};\n```\n\n### 注意事项\n\n- `SSR`功能并不包含对任何`web` `node`运行时环境的兼容处理，你应当注意自己的代码的环境兼容性\n- `SSR`功能并不包含任何路由的处理，如果有需要，你需要自行解决（使用 react-router 比较容易解决，参考[路由与异步数据处理](#路由与异步数据处理))\n- `SSR`功能并不包含任何页面初始化异步数据的处理，如果有需要，你需要自行解决(参考[路由与异步数据处理](#路由与异步数据处理))\n- `SSR`功能并不包含任何其它对于`SEO`场景的处理，如果有需要，你需要自行解决（建议使用 [`react-helmet`](https://github.com/nfl/react-helmet)，它支持`SSR`）\n- `mobx-react`在`SSR`场景下会导致内存泄漏，请参考[Server Side Rendering with `useStaticRendering`](https://github.com/mobxjs/mobx-react#server-side-rendering-with-usestaticrendering)\n","readmeFilename":"README.md"}