在任何JavaScript框架中的服务器端渲染（SSR），并保存应用程序的反应性行为，取决于冬眠运行时状态（在服务器）的能力，以便以后（在客户端）水合回来到先前的状态。

视频

https://www.youtube.com/watch?v=HXmWYlhQCeU
（PS，这是我十年来的第一部视频，希望我的编码技巧弥补视频质量；）

源代码

kitchen-sink

以下代码段是冬眠和水合如何工作的基本SSR模拟。

// ~/pages/hello-world.ts
export default function server() {
      console.log("Hello World");

   function client() {
      console.log("Hello World");
   }

   return client;
}

我希望我可以为我编写的名为@xania/view的UI库使用现有解决方案，但是我可以找到的所有解决方案都针对其他UI框架。
因此，我决定构建一个UI不可知论解决方案。这非常困难，它会演变为编写代码transpiler/编译器，但我还是这样做了，我被炒作与您分享结果。

介绍vite-plugin-resumable

此插件是用于冬眠和补充JavaScript封闭的UI框架不可知的解决方案。您可以说我们找到了一种序列化功能的方法。它是@xania/view的SSR功能的基础，但可以与其他UI库一起使用。

继续阅读以了解如何设置项目或访问github here以获取示例的完整源代码。

设置

目前，我们仅支持Vite Projects。

1. 创建新的Vite Project

   npm init vite my-vite-app

2. 安装简历软件包

   npm i vite-plugin-umigumable

3. 下一步是将插件添加到您的Vite配置
   

import resumable from "vite-plugin-resumable"

  ...
  plugins: [
    resumable();
  ]
  ...

默认情况下，此插件在pages文件夹中查看所有带有.tsx扩展名的文件，并为每个文件创建服务器条目。

所以继续创建一个名为hello-world.tsx脚本的页面 pages 文件夹

// ~/pages/hello-world.ts
export function view() {
   console.log("Hello server");
   const counter = new State(1);
   counter.subscribe({
     next(value) { 
       console.log("counter", value);  
     }
   });

   function client() { 
      console.log("Hello client");
      document.body.addEventListener("click", 
          () => counter.set(x => x + 1));
   }

   return client;
}

REOMABLE软件包将自动推断从服务器输入功能的结果中的客户端代码。
在这种情况下，客户端代码是从client的函数声明生成的。此功能将在客户端上执行，并将使用计数器对象的水合实例，包括注册的 next-Observer 。

让我们启动应用程序，然后在Action In Action

npm开始

打开浏览器并导航到 http://localhost:5173/hello-world

// terminal output
Hello server

// browser output
Hello client

单击该文档将增加计数器并触发观察者，该观察者将将当前值打印到浏览器的控制台。

// browser output
counter, 2

结论

此插件通过简化可以在服务器和客户端执行的Web应用程序所需的代码结构来简化开发过程。

这是当前是Alpha（又名概念验证）版本，可以验证该方法的有用性。到目前为止，此插件捕获了SSR的通用功能，因此任何UI库都可以从中受益。

我们优化发送给客户端的客户端脚本的数量，但是将来我们将寻找更多的机会来优化状态数据（例如，如果我们仅访问对象的属性，那么我们可能要发送仅该属性而不是整个对象的值。

接下来是通过React尝试一下，我还将为@xania/view