极客降级之谜：用优雅的 CSR 来拯救失败的 SSR

前端

2023-09-16 10:18:25

优雅地降级 SSR：用 next-ssr-fallback 拯救失败的服务器端渲染

在纷繁复杂的 IT 江湖中，我们是编程世界的潇洒剑客，挥舞着代码之剑，探索技术奥秘。今天，我将揭开一个极客降级之谜，讲述一个用优雅的 CSR 来拯救失败的 SSR 的传奇故事。

什么是 SSR 和 CSR？

SSR（服务器端渲染） ：

在服务器端渲染 HTML 页面，发送给浏览器。
首次加载时即可展现完整内容，提升用户体验。

CSR（客户端渲染） ：

在客户端浏览器中渲染 HTML 页面。
更具交互性，可根据设备和网络环境优化。

为何需要降级 SSR？

SSR 虽然强大，但有时会失败，导致页面无法正常渲染。此时，我们需要优雅地降级到 CSR，确保用户体验不受影响。

next-ssr-fallback：SSR 到 CSR 的降级利器

next-ssr-fallback 是我们团队开发的开源库，专门用于实现 SSR 到 CSR 的优雅降级。它通过对 Next.js 的改造，实现了：

检测 SSR 失败
自动切换渲染模式到 CSR
客户端补全渲染

降级流程剖析

检测 SSR 失败 ：next-ssr-fallback 监听 SSR 过程中的错误，触发降级逻辑。
切换渲染模式 ：SSR 失败时，渲染模式切换到 CSR，并将服务器端渲染的 HTML 代码作为初始状态传递给客户端。
客户端补全渲染 ：客户端接收到初始状态后，使用 React 的 hydrate 功能，将初始状态注入到 DOM 中，完成渲染。

代码示例

import { useEffect, useState } from "react";
import { hydrate } from "react-dom";

function App() {
  const [data, setData] = useState(null);

  useEffect(() => {
    // SSR 失败时，从 window.__INITIAL_STATE__ 获取初始状态
    if (typeof window.__INITIAL_STATE__ !== "undefined") {
      setData(window.__INITIAL_STATE__);
    } else {
      // CSR 正常渲染
      // ...
    }
  }, []);

  return <div>{data}</div>;
}

export default App;