数据请求

优质

小牛编辑

133浏览

2023-12-01

在 Rax 的 Web 应用中，尤其是 SSR 应用中，我们推荐在页面入口组件中定义 getInitialProps 属性，来处理数据请求的工作。这是因为：

一旦代码运行在 Server 端，无法像在 Client 那样，异步获取数据后，再通过 setState 来更新页面 UI。渲染引擎需要预先获取数据，然后执行 render 操作。因此，组件的数据请求必须是可被独立调用的。

基于 getInitialProps 定义数据请求，在传统 CSR （客户端渲染）页面中，也可以更方便做的数据预加载等优化，也可以更低成本的切换为 SSR 应用。

为页面入口组件添加 getInitialProps 的示例如下：

import fetch from 'isomorphic-unfetch'

function Page({ stars }) {
  return <div>Rax stars: {stars}</div>
}

Page.getInitialProps = async (ctx) => {
  const res = await fetch('https://api.github.com/repos/alibaba/rax')
  const json = await res.json()
  return { stars: json.stargazers_count };
}

export default Page

通过 getInitialProps 返回的数据，将被作为组件的初始 props。

在 server 端，getInitalProps 会在页面 render 之前被执行，其返回值将作为页面的初始 props 用于渲染。同时这份数据，会被 JSON.stringify 后，放置于页面中。

在 client 端，会优先去检测页面中是否输出了这份数据，如果有，则使用这份数据 hydrate 页面，如果没有，则执行 getInitialProps 。

getInitialProps 在 server 端被执行时，会接收一个 ctx 入参，包含以下字段：

req HTTP request 对象（仅在server端输出）

res HTTP response 对象（仅在server端输出）