Next.js 实践：从 SSR 到 CSR 的优雅降级

Next.js 是一个非常流行的 React 框架，它提供了开箱即用的服务端渲染（Server-Side Rendering, SSR）能力，我们可以很轻松地借助 Next.js 实现 SSR，并部署到 Vercel 上。然而，Vercel 在国内没有服务节点，SSR 时通过 Vercel 服务器请求国内的服务接口存在一定比例的请求失败，影响到了页面的渲染。因此，我们需要增加客户端渲染（Client-Side Rendering, CSR）的逻辑作为兜底，以提升渲染成功率。

在 Next.js 中我们通过给页面组件增加 getServerSideProps 方法，即可触发 SSR。例如，我们根据页面 URL 上的路径参数 id 调用接口获取详细信息，并将数据提供给页面组件方法渲染。代码如下：

interface Props {
   
  detail: Detail;
}

async function getServerSideProps(context: GetServerSidePropsContext): Promise<{
    props: Props }> {
   
  const {
    id } = context.params;
  const detail = await getDetail(id);

  return {
   
    props: {
   
      detail,
    },
  };
}

Next.js 会传递 context 给 getServerSideProps 方法，其中包括了路由及请求参数信息；我们通过返回一个包含 props 的对象，将获取到的数据通过 props 提供给页面组件在服务端渲染。

const Page: React.FC<Props> = props => {
   
  return <div>detail 的渲染逻辑 {
   props.detail}</div>;
};

由此可见，页面组件强依赖了服务端传递 props 的数据，如果请求失败势必导致页面无法正常渲染。

实现 CSR 的兜底逻辑

首先，我们需要对 getServerSideProps 进行改造，增加请求出错时的容错：

async function getServerSideProps(context: GetServerSidePropsContext): Promise<{
    props: Props | {
   } }> {
   
  const {
    id } = context.params;