Tiger

# 数据获取

数据获取是服务端渲染应用中非常重要的一个环节。通过本章节的内容，了解服务端渲染应用的一些深层次的知识

# 静态方法获取数据

我们定义了 getInitialProps 静态方法，用于获取数据

那么为什么要使用一个静态方法来进行数据的获取，而不是像传统 SPA 应用一样直接写在组件的生命周期当中呢。

在服务端会执行的生命周期只有 created/componentWillMount，而像 mounted/componentDidMount 这样的生命周期是不会被执行的。那么我们将获取数据的逻辑写在 created 当中是否可行呢。答案也是否定的

由于我们获取数据的逻辑一般都是异步的。在服务端渲染的过程中，并不会像客户端应用那样，当 props/state 改变时组件重新 render，所以我们需要定义一个静态方法来获取数据

# getInitialProps 规范

因为 getInitialProps 可能会在服务端运行、也能会在客户端运行，所以我们需要编写的时候注意环境

何时在服务端运行

SSR 在进行首屏渲染的时候，组件会在服务端渲染，并且会直接在服务端获取数据，渲染到 html 中，所以这时候就会在服务端运行

何时在客户端运行

当首屏渲染完成后，我们切换路由，这时候切换路由完全是客户端行为，所以会在客户端运行

# getInitialProps 参数

由于我们可能需要获取服务端或者客户端的请求数据，所以在执行改方法的时候我们传入了一些参数

export interface Params {
    request?: Request; // 服务端请求实例
    routerProps?: RouteComponentProps; // 客户端路由实例
}
export declare type ReactInitialPropsFunction = (params: Params) => Promise<any>;

该接口可以通过 @tiger/utils 导入

# 判断当前环境

如果我们需要在获取数据的方法中判断环境，我们可以:

  1. 通过 __isBrowser__ 全局变量
  2. 通过判断是否存在 request(服务端) / 是否存在 routerProps(客户端)