[2023.09.16]: Yew的Hydration的底层逻辑3问

今天是周六,周末的事情感觉比平时都多,所以也没有写代码。所以打算结合这几天开发Yew应用的经历,聊聊Yew的Hydration。

首先Hydration这个单词是什么意思,我查了一下字典,意思是"水合"。而什么又是水合呢?我有查了一下字典,发现这是化学里面的一个词汇,意思是物质溶解在水里时,与水发生的化学作用。 一般指溶质分子(或离子)和水分子发生作用,形成水合分子(或水合离子)的过程。

即便我理解了上面这段话,那这里面的物质怎么和Yew的Hydration相关的元素对应起来呢?虽然现在项目能正常运行了,但是关于Hydration的底层逻辑,我感觉目前还是云里雾里的。

要运行Yew的SSR模式开发的应用,要运行下面两个命令行

rust 复制代码
trunk build index.html
cargo run --features=ssr --bin=ssr_hydrate -- --dir dist

当第一个命令行运行时,会生成dist文件夹,里面包含的文件如下:

bash 复制代码
zycao@ZydeiMac dist % ls -lah
total 4320
drwxr-xr-x   6 zycao  staff   192B  9 16 22:33 .
drwxr-xr-x  11 zycao  staff   352B  9 16 22:31 ..
-rw-r--r--   1 zycao  staff   2.1K  9 16 22:32 index-6acd6682c1b8241.css
-rw-r--r--   1 zycao  staff   602B  9 16 22:33 index.html
-rw-r--r--   1 zycao  staff    31K  9 16 22:33 ssr_hydrate-9655cd31dfbca4c8.js
-rw-r--r--   1 zycao  staff   2.1M  9 16 22:33 ssr_hydrate-9655cd31dfbca4c8_bg.wasm

我这里突发奇想,如果我直接在dist文件夹下启动http-server .从浏览器中打开index.html,会是什么结果?

结果是页面一片空白,控制台里报错如下:

bash 复制代码
Failed to load resource: the server responded with a status of 404 (Not Found)

这个报错说明index.html文件加载完成后,还是要尝试去服务器端加载资源,具体是什么资源,目前我也不知道。

在运行第二个命令行时,会启动服务器,并且执行bin/ssr_server.rs里面的代码。在ssr_server.rs的文件中,我们可以看到,它是读取了index.html的。代码如下:

rust 复制代码
    let index_html_s = tokio::fs::read_to_string(opts.dir.join("index.html"))
        .await
        .expect("failed to read index.html");

    let (index_html_before, index_html_after) = index_html_s.split_once("<body>").unwrap();

从这里的代码可以推断出,它是要将服务端生成的代码添加到已经生成好了的index.html中。难道这个过程即是hydration吗?

另外,这个项目中还有一个bin/ssr_hydrate.rs,这个bin在哪里被调用呢?我怀疑是在trunk build index.html中调用或者运行的。果然,将bin/ssr_hydrate.rs删除后报错如下:

bash 复制代码
zycao@ZydeiMac app % trunk build index.html
2023-09-16T15:17:33.507159Z  INFO 📦 starting build
2023-09-16T15:17:33.510702Z  INFO spawning asset pipelines
2023-09-16T15:17:33.825368Z  INFO building app
2023-09-16T15:17:33.827025Z  INFO compiling sass/scss path="index.scss"
2023-09-16T15:17:33.957026Z  INFO finished compiling sass/scss path="index.scss"
error: no bin target named `ssr_hydrate`.

原来在app/index.htmldata-bin属性上设置了ssr_hydrate

ssr_hydrate.rs的代码确很简单,就几行如下:

rust 复制代码
use app::App;

fn main() {
    #[cfg(target_arch = "wasm32")]
    wasm_logger::init(wasm_logger::Config::new(log::Level::Trace));
    yew::Renderer::<App>::new().hydrate();
}

上面的代码中有一个方法调用叫.hydrate(),难道trunk build index.html的过程才是Hydration吗?

这里我想起来之前的一个发现,即页面展现出来了,但是点击页面上的按钮没有反应,最初我以为是代码的问题,后来才发现,当页面展现出来的时候,wasm文件还在加载中。那么这个现象是不是可以说明页面上展现出来的内容不是wasm文件本身生成的,而是服务器端渲染的。

等等,如果展现的页面是服务器端渲染的,那wasm文件又是如何知道当前页面的状态的呢?服务器端渲染的内容最终是要加载到浏览器端然后和wasm文件中的代码交互的啊。这是不是就是Hydration呢?

最后附上Yew官方关于SSR Hydration的阐述,如下

Hydration is the process that connects a Yew application to the server-side generated HTML file. By default, ServerRender prints hydratable html string which includes additional information to facilitate hydration. When the Renderer::hydrate method is called, instead of start rendering from scratch, Yew will reconcile the Virtual DOM generated by the application with the html string generated by the server renderer.

很抱歉留下了一个问题,我也希望能够尽快在后面的开发过程中找到这个问题的答案。

相关推荐
我爱挣钱我也要早睡!9 小时前
Java 复习笔记
java·开发语言·笔记
Yang-Never10 小时前
Kotlin协程 -> Job.join() 完整流程图与核心源码分析
android·开发语言·kotlin·android studio
牧羊狼的狼10 小时前
React 中的 HOC 和 Hooks
前端·javascript·react.js·hooks·高阶组件·hoc
知识分享小能手12 小时前
React学习教程,从入门到精通, React 属性(Props)语法知识点与案例详解(14)
前端·javascript·vue.js·学习·react.js·vue·react
luckys.one12 小时前
第9篇:Freqtrade量化交易之config.json 基础入门与初始化
javascript·数据库·python·mysql·算法·json·区块链
魔云连洲12 小时前
深入解析:Vue与React的异步批处理更新机制
前端·vue.js·react.js
TomCode先生12 小时前
c#动态树形表达式详解
开发语言·c#
mCell12 小时前
JavaScript 的多线程能力:Worker
前端·javascript·浏览器
高-老师13 小时前
基于R语言的物种气候生态位动态量化与分布特征模拟
开发语言·r语言·物种气候
大翻哥哥13 小时前
Python 2025:量化金融与智能交易的新纪元
开发语言·python·金融