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