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;