[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.

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

相关推荐
Struggler28111 分钟前
Chrome插件开发
前端
apihz18 分钟前
域名WHOIS信息查询免费API使用指南
android·开发语言·数据库·网络协议·tcp/ip
前端 贾公子23 分钟前
Monorepo + vite 怎么热更新
前端
coding随想32 分钟前
掌控网页的魔法之书:JavaScript DOM的奇幻之旅
开发语言·javascript·ecmascript
爱吃烤鸡翅的酸菜鱼1 小时前
IDEA高效开发:Database Navigator插件安装与核心使用指南
java·开发语言·数据库·编辑器·intellij-idea·database
然我1 小时前
不用 Redux 也能全局状态管理?看我用 useReducer+Context 搞个 Todo 应用
前端·javascript·react.js
前端小巷子1 小时前
Web 实时通信:从短轮询到 WebSocket
前端·javascript·面试
神仙别闹1 小时前
基于C#+SQL Server实现(Web)学生选课管理系统
前端·数据库·c#
web前端神器1 小时前
指定阿里镜像原理
前端
枷锁—sha1 小时前
【DVWA系列】——CSRF——Medium详细教程
android·服务器·前端·web安全·网络安全·csrf