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;
  
  try {
    const detail = await getDetail(id);

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

当请求失败时，我们通过 catch 捕捉到错误，并将 props 设置为 {}，以通知组件获取数据失败。我们在组件中利用 useEffect 再次发起请求：

const Page: React.FC<Props> = props => {
  const isEmptyProps = Object.keys(props).length === 0;
  const [detail, setDetail] = useState(props.detail);
  const router = useRouter();

  useEffect(() => {
    if (isEmptyProps) {
      const { id } = router.query;

      getDetail(id).then(props => setDetail(props.detail));
    }
  }, []);

  return <div>detail 的渲染逻辑 {detail}</div>;
};

我们通过判断 props.detail 是否为空对象，决定是否在浏览器端是否再次发起请求，请求参数 id 可以通过 Next.js 提供的 next/router 中 useRouter 获取。数据获取成功后，保存在组件的 State 中。

至此我们就完成了页面组件从 SSR 到 CSR 的降级。但是，我们有很多个页面都需要支持降级，逐一改造的成本太高，我们需要将这些逻辑进行抽象。

抽象降级的逻辑

从上面的实现过程来看，降级的逻辑主要分为两步：

1. getServerSideProps 增加错误捕获，出错时 props 返回 {}
2. 页面组件中判断 props 是否为空对象，如果是则再次发起请求获取数据

针对这两个步骤，我们可以分别进行抽象：

抽象 SSR 错误捕获

我们可以通过定义一个工厂函数，用来在原 getServerSideProps 上增加错误捕获：

 function createGetServerSidePropsFunction<F = GetServerSideProps>(getServerSideProps: F): F {
    return async (context: GetServerSidePropsContext) => {
      try {
        return await getServerSideProps(context);
      } catch {
        return {
          props: {},
        };
      }
    };
  }

再将这个工厂函数产生的函数导出：

export const getServerSideProps = createGetServerSidePropsFunction(getServerSidePropsOrigin);

抽象 CSR 数据请求

我们可以实现一个高阶组件（Higher-Order Components, HOC）将这部分逻辑抽象：

function withCSR<C extends React.FC<any>, P extends object = React.ComponentProps<C>>(component: C, getServerSideProps: GetServerSideProps) {
  const HoC = (props: P) => {
    const [newProps, setNewProps] = useState<P>(props);
    const router = useRouter();
    const isPropsEmpty = Object.keys(props).length === 0;

    useEffect(() => {
      if (isPropsEmpty) {
        const context: GetServerSidePropsContext = {
          locale: router.locale,
          locales: router.locales,
          defaultLocale: router.defaultLocale,
          params: router.query,
          query: router.query,
          resolvedUrl: router.asPath,
          req: {} as unknown,
          res: {} as unknown,
        };

        getServerSideProps(context).then(setNewProps);
      }
    }, []);

    if (newProps) {
      return React.createElement(component, newProps);
    }

    return null;
  };

  HoC.displayName = `Hoc(${component.name})`;

  return HoC;
}

逻辑与前面的实现基本一致，在高阶组件中判断如果 SSR 失败，我们在浏览器端再次调用 getServerSideProps 发起请求，此时我们需要构造一个与 Next.js 一致的 context，这里我们选择从 next/router 上获取相关信息并构造。最后，我们将页面组件传入高阶组件，返回一个新的页面组件并导出。

export default withCSR(Page, getServerSidePropsOrigin);

页面组件的接入

完成这两步抽象后，我们的页面组件降级的实现变得非常简单，在不需要修改页面组件和 getServerSideProps 的基础上，只需要增加以下几行：

import { withCSR, getServerSideProps } from '../ssr-fallback';

export const getServerSideProps = createGetServerSidePropsFunction(getServerSidePropsOrigin);

export default withCSR(Page, getServerSidePropsOrigin);

至此，我们就实现了从 SSR 到 CSR 的优雅降级。

进一步抽象成 NPM 包

我们将以上逻辑抽象成了 NPM 包 next-ssr-fallback，并进一步抽象了 SSRFallback 类，简化 getServerSideProps 的传递。使用方式如下：

import FallbackSSR from 'next-ssr-fallback';

const fallbackSSR = new FallbackSSR({
  getServerSideProps: getServerSidePropsOrigin,
});

export const getServerSideProps = fallbackSSR.createGetServerSidePropsFunction();

export default fallbackSSR.withCSR(Page);

next-ssr-fallback 的 GitHub 仓库：github.com/crazyurus/n…

这里也有一个接入了 next-ssr-fallback 的 Next.js 项目 recruit-pc 供参考，项目部署在 Vercel 上 recruit-pc.vercel.app

总结

我们在 Next.js 中遇到了 SSR 渲染失败的问题时，选择了降级到 CSR 以提升渲染成功率，并将这部分实现逻辑抽象为 next-ssr-fallback 以复用到其它项目，实现更为优雅的降级。

如果有其它有关 SSR 降级的实践，欢迎分享