yew SSR 服务器端渲染
Yew
是 wasm(WebAssembly)
框架,可谓 Rust 生态中最受关注的项目之一,github 点赞数量接近 20k。其性能在和其它 js 前端库评测中,也很出彩。多个评测文章中,可以和轻量级的 preact 等性能等同,相较于 react.js 和 vue.js,具有多方面的优势。
感兴趣的请参阅文章:
默认情况下,Yew
组件仅在客户端渲染。当浏览者访问网站时,服务器会向浏览器发送一个没有任何实际内容的框架 html
文件,以及一个 WebAssembly
包。所有需要展现的内容,都是由 WebAssembly
包在客户端呈现的。
这种方法适用于大多数网站,但有几点不足:
- 在下载整个
WebAssembly
绑定包并完成初始渲染之前,用户将无法看到任何内容。这点就受限于网络,有些用户可能体验不佳。 - 最大的问题是搜索引擎。一些搜索引擎不支持动态呈现的 web 内容,即使在支持的搜索引擎中,搜索排名也是比较低的。目前,笔者使用
yew
也开发了几个 wasm 应用:对于图像处理、数据可视化等,涉及搜索较少,搜索引擎的问题可以忽略;对于 web——有些朋友可能要说这个不是 wasm 的适宜场景——但很多开发者(包括笔者)不这样认为,因此也是用yew
开发了一个实验性的博客应用。google 搜索收录,关键词读取,问题不大。但有些评测文章中的支持 js 页面动态渲染的 bing、yandex 等境外众多搜索引擎,并不能收录,或许是因为 wasm 绑定包和 js 动态渲染处理不同。至于国内的,表现更差。再者,即使 google 可以搜索收录,但缓存是读不到任何内容的(包括文字版缓存)。
在此不必纠结于技术细节,总之因以上原因,yew
社区中,对于 SSR 的呼声一直较高。2019 年,即有一个专门的 github/project 主题,是 SSR 方案的讨论。
为了解决上述问题,yew
终于有了解决方案,最早可能将于下一代版本(0.20.x)中发布,将可以在服务器端呈现我网站。虽说 Yew
的服务器端渲染(SSR,Server-side Rendering)方案还处于实验性质,但技术概念非常棒:通过极少的工作,即可构建一个与客户端无关的 SSR 应用。虽然有些功能还未完善,但已经初具端倪,可以使用于静态网站的构建了。
是挺令 Rust 爱好者兴奋的(此处应有掌声 :-))))!
笔者对于当前的初步 SSR 方案,进行了浅尝,体验很棒——代码改动极少,可以具体到一句话:通过 ServerRenderer
渲染器包裹你当前的 yew
主入口组件即可。
我们开始吧,作为服务器的分别是:tide、actix-web,以及 warp。展现的数据,通过读取 rest API 来获取。
启用
Yew
的 SSR 方案,需要使用开发版本,目前最新版本(0.19.3)不支持。
yew
服务器端渲染(SSR,Server-side Rendering)的概念和原理
SSR 如何工作?
如上文所述,yew
提供了一个服务器渲染器 ServerRenderer
,以渲染服务器端页面。
比如,你现有的 wasm 入口,即为 yew::start_app::<App>();
的这个 App
组件。我们要对其做服务器端渲染:首先使用 ServerRenderer::<App>::new()
创建一个渲染器,然后调用 renderer.render().await
。如此简单,即可完成服务器端渲染。
如下代码为笔者的 wasm 入口组件:
struct App; impl Component for App { type Message = (); type Properties = (); fn create(_ctx: &Context<Self>) -> Self { Self } fn view(&self, _ctx: &Context<Self>) -> Html { html! { <BrowserRouter> <Header /> <main class="ps-relative t64"> <Switch<Routes> render={ Switch::render(switch) } /> </main> <Copyright /> <LoadJs /> </BrowserRouter> } } } fn main() { set_panic_hook(); yew::start_app::<App>(); }
如何对其渲染?增加一个方法即可:
struct App; impl Component for App { // 与上文代码相同 } // 1、增加异步运行时属性 #[async_std::main] // 或者 #[tokio::main] // 2、声明为异步方法 async fn main() { // 3、创建一个渲染器 let renderer = ServerRenderer::<App>::new(); // 4、对 wasm 入口组件进行渲染 let rendered = renderer.render().await; println!("{}", rendered); }
笔者的 yew 项目源码在 surfer/frontend-yew,你可以下载后运行。或许你只是想尝试一下,请直接复制下端代码:
use yew::prelude::*; use yew::ServerRenderer; #[function_component] fn App() -> Html { html! {<div>{"Hello, World!"}</div>} } #[tokio::main] async fn main() { let renderer = ServerRenderer::<App>::new(); let rendered = renderer.render().await; // Prints: <div>Hello, World!</div> println!("{}", rendered); }
代码迭代时极为精简吧!
组件生命周期(Component Lifecycle)
yew
的服务器端渲染中,推荐使用函数组件(function components)
。
钩子(hooks)
中,use_effect
以及 use_effect_with_deps
将不能正常工作。其它所有的钩子(hooks)都可以正常使用,直到组件第一次呈现为 html
。
Web APIs 将不可用。如果你想使用
web_sys
,请注意逻辑隔离。
推荐使用
函数组件(function components)
。虽然结构体组件(Struct Components)
在服务器端渲染时仍然可用,但安全逻辑界限不明显,所以推荐使用函数组件(function components)
。
服务器端渲染时的数据获取
数据获取,是服务器端渲染的基础功能,但也是重点和难点。目前,yew
试图使用组件 <Suspense />
解决此问题。
概念和原理就简化到这个地步吧,毕竟目前还是实验性质的,后续的改动或许完全不同。
我们上面说到服务器端渲染时的数据读取,这个是互联网应用的最基础功能。我们接下来,通过读取公开的 github 和 httpbin 的 REST API,来演示 yew
中,如何在服务器端渲染时,异步读取并展示数据。
yew
+ tide
+ surf
组合的 yew ssr 示例
代码很简单并清晰,仅作几点说明:
- 使用
State
来异步读取后端数据。 - 使用
钩子(hooks)
,返回SuspensionResult
来渲染页面,展示数据。 - 上文所述,渲染的数据格式是
字符串(String)
,因此要转换为tide
服务器的html
数据类型tide::Result
。下问不同服务器类同,不再赘述。
再次说明:启用
Yew
的 SSR 方案,需要使用开发版本,目前最新版本(0.19.3)不支持。
Cargo.toml
[package]
name = "yew-ssr-tide"
version = "0.0.1"
edition = "2021"
[dependencies]
async-std = { version = "1.10.0", features = ["attributes"] }
tide = "0.17.0-beta.1"
yew = { path = "../../../packages/yew", features = ["ssr"] }
surf = "2.3.2"
serde = { version = "1.0.136", features = ["derive"] }
因为现在是作为 bin
应用,所以一个 main.rs
文件即可
use std::cell::RefCell; use std::rc::Rc; use async_std::task; use serde::{Deserialize, Serialize}; use tide::{http::mime, Request, Response, StatusCode}; use yew::prelude::*; use yew::suspense::{Suspension, SuspensionResult}; #[derive(Serialize, Deserialize, Clone)] struct UserResponse { login: String, name: String, blog: String, location: String, } async fn fetch_user() -> UserResponse { // surf works for both non-wasm and wasm targets. let mut resp = surf::get("https://api.github.com/users/zzy") .header("User-Agent", "request") .await .unwrap(); println!("Status: {:#?}", resp.status()); let user_resp: UserResponse = resp.body_json().await.unwrap(); user_resp } pub struct UserState { susp: Suspension, value: Rc<RefCell<Option<UserResponse>>>, } impl UserState { fn new() -> Self { let (susp, handle) = Suspension::new(); let value: Rc<RefCell<Option<UserResponse>>> = Rc::default(); { let value = value.clone(); // we use async-std spawn local here. task::spawn_local(async move { let user = fetch_user().await; { let mut value = value.borrow_mut(); *value = Some(user); } handle.resume(); }); } Self { susp, value } } } #[hook] fn use_user() -> SuspensionResult<UserResponse> { let user_state = use_state(UserState::new); let result = match *user_state.value.borrow() { Some(ref user) => Ok(user.clone()), None => Err(user_state.susp.clone()), }; result } #[function_component] fn Content() -> HtmlResult { let user = use_user()?; Ok(html! { <div> <div>{"Login name: "}{ user.login }</div> <div>{"User name: "}{ user.name }</div> <div>{"Blog: "}{ user.blog }</div> <div>{"Location: "}{ user.location }</div> </div> }) } #[function_component] fn App() -> Html { let fallback = html! {<div>{"Loading..."}</div>}; html! { <Suspense {fallback}> <Content /> </Suspense> } } async fn render(_: Request<()>) -> tide::Result { let content = task::spawn_blocking(move || { task::block_on(async { let renderer = yew::ServerRenderer::<App>::new(); renderer.render().await }) }) .await; let resp_content = format!( r#"<!DOCTYPE HTML> <html> <head> <title>yew-ssr with tide example</title> </head> <body> <h1>yew-ssr with tide example</h1> {} </body> </html> "#, content ); let mut resp = Response::new(StatusCode::Ok); resp.set_body(resp_content); resp.set_content_type(mime::HTML); Ok(resp.into()) } #[async_std::main] async fn main() -> Result<(), std::io::Error> { let mut server = tide::new(); server.at("/").get(render); println!("You can view the website at: http://localhost:8080"); server.listen("127.0.0.1:8080").await?; Ok(()) }
如何运行?
上文提到,现在是作为一个 bin
应用,因此 cargo run
后,浏览器中打开 http://localhost:8080/ 即可看到读取的 github REST API 公开数据。
本工程完整代码在 github/yew-ssr-tide。
第二个出场的是 yew + actix-web + reqwest 代表队
注意的地方和上一个 tide
示例相同,区别就在于 async-std
、tide
,以及 surf
的代码 API。
Cargo.toml
[package]
name = "yew-ssr-actix-web"
version = "0.0.1"
edition = "2021"
[dependencies]
tokio = { version = "1.17.0", features = ["full"] }
actix-web = "4.0.0-rc.1"
yew = { path = "../../../packages/yew", features = ["ssr"] }
reqwest = { version = "0.11.9", features = ["json"] }
serde = { version = "1.0.136", features = ["derive"] }
main.rs
use std::cell::RefCell; use std::rc::Rc; use actix_web::{get, App as ActixApp, Error, HttpResponse, HttpServer}; use tokio::task::LocalSet; use tokio::task::{spawn_blocking, spawn_local}; use serde::{Deserialize, Serialize}; use yew::prelude::*; use yew::suspense::{Suspension, SuspensionResult}; #[derive(Serialize, Deserialize, Clone)] struct UserResponse { login: String, name: String, blog: String, location: String, } async fn fetch_user() -> UserResponse { // reqwest works for both non-wasm and wasm targets. let resp = reqwest::Client::new() .get("https://api.github.com/users/zzy") .header("User-Agent", "request") .send() .await .unwrap(); println!("Status: {}", resp.status()); let user_resp = resp.json::<UserResponse>().await.unwrap(); user_resp } pub struct UserState { susp: Suspension, value: Rc<RefCell<Option<UserResponse>>>, } impl UserState { fn new() -> Self { let (susp, handle) = Suspension::new(); let value: Rc<RefCell<Option<UserResponse>>> = Rc::default(); { let value = value.clone(); // we use tokio spawn local here. spawn_local(async move { let user = fetch_user().await; { let mut value = value.borrow_mut(); *value = Some(user); } handle.resume(); }); } Self { susp, value } } } #[hook] fn use_user() -> SuspensionResult<UserResponse> { let user_state = use_state(UserState::new); let result = match *user_state.value.borrow() { Some(ref user) => Ok(user.clone()), None => Err(user_state.susp.clone()), }; result } #[function_component] fn Content() -> HtmlResult { let user = use_user()?; Ok(html! { <div> <div>{"Login name: "}{ user.login }</div> <div>{"User name: "}{ user.name }</div> <div>{"Blog: "}{ user.blog }</div> <div>{"Location: "}{ user.location }</div> </div> }) } #[function_component] fn App() -> Html { let fallback = html! {<div>{"Loading..."}</div>}; html! { <Suspense {fallback}> <Content /> </Suspense> } } #[get("/")] async fn render() -> Result<HttpResponse, Error> { let content = spawn_blocking(move || { use tokio::runtime::Builder; let set = LocalSet::new(); let rt = Builder::new_current_thread().enable_all().build().unwrap(); set.block_on(&rt, async { let renderer = yew::ServerRenderer::<App>::new(); renderer.render().await }) }) .await .expect("the thread has failed."); Ok(HttpResponse::Ok() .content_type("text/html; charset=utf-8") .body(format!( r#"<!DOCTYPE HTML> <html> <head> <title>yew-ssr with actix-web example</title> </head> <body> <h1>yew-ssr with actix-web example</h1> {} </body> </html> "#, content ))) } #[actix_web::main] // or #[tokio::main] async fn main() -> std::io::Result<()> { let server = HttpServer::new(|| ActixApp::new().service(render)); println!("You can view the website at: http://localhost:8080/"); server.bind(("127.0.0.1", 8080))?.run().await }
运行方式同 tide
。
本工程完整代码在 github/yew-ssr-actix-web。
yew + warp + reqwest
注意的地方和上一个 tide
示例相同,区别就在于 async-std
、tide
,以及 surf
的代码 API。
Cargo.toml
[package]
name = "yew-ssr-warp"
version = "0.1.0"
edition = "2021"
# See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html
[dependencies]
tokio = { version = "1.17.0", features = ["full"] }
warp = "0.3.2"
yew = { path = "../../../packages/yew", features = ["ssr"] }
reqwest = { version = "0.11.9", features = ["json"] }
serde = { version = "1.0.136", features = ["derive"] }
uuid = { version = "0.8.2", features = ["serde"] }
main.rs
use std::cell::RefCell; use std::rc::Rc; use serde::{Deserialize, Serialize}; use tokio::task::LocalSet; use tokio::task::{spawn_blocking, spawn_local}; use uuid::Uuid; use warp::Filter; use yew::prelude::*; use yew::suspense::{Suspension, SuspensionResult}; #[derive(Serialize, Deserialize)] struct UuidResponse { uuid: Uuid, } async fn fetch_uuid() -> Uuid { // reqwest works for both non-wasm and wasm targets. let resp = reqwest::get("https://httpbin.org/uuid").await.unwrap(); println!("Status: {}", resp.status()); let uuid_resp = resp.json::<UuidResponse>().await.unwrap(); uuid_resp.uuid } pub struct UuidState { s: Suspension, value: Rc<RefCell<Option<Uuid>>>, } impl UuidState { fn new() -> Self { let (s, handle) = Suspension::new(); let value: Rc<RefCell<Option<Uuid>>> = Rc::default(); { let value = value.clone(); // we use tokio spawn local here. spawn_local(async move { let uuid = fetch_uuid().await; { let mut value = value.borrow_mut(); *value = Some(uuid); } handle.resume(); }); } Self { s, value } } } impl PartialEq for UuidState { fn eq(&self, rhs: &Self) -> bool { self.s == rhs.s } } #[hook] fn use_random_uuid() -> SuspensionResult<Uuid> { let s = use_state(UuidState::new); let result = match *s.value.borrow() { Some(ref m) => Ok(*m), None => Err(s.s.clone()), }; result } #[function_component] fn Content() -> HtmlResult { let uuid = use_random_uuid()?; Ok(html! { <div>{"Random UUID: "}{uuid}</div> }) } #[function_component] fn App() -> Html { let fallback = html! {<div>{"Loading..."}</div>}; html! { <Suspense {fallback}> <Content /> </Suspense> } } async fn render() -> String { let content = spawn_blocking(move || { use tokio::runtime::Builder; let set = LocalSet::new(); let rt = Builder::new_current_thread().enable_all().build().unwrap(); set.block_on(&rt, async { let renderer = yew::ServerRenderer::<App>::new(); renderer.render().await }) }) .await .expect("the thread has failed."); format!( r#"<!DOCTYPE HTML> <html> <head> <title>Yew SSR Example</title> </head> <body> {} </body> </html> "#, content ) } #[tokio::main] async fn main() { let routes = warp::any().then(|| async move { warp::reply::html(render().await) }); println!("You can view the website at: http://localhost:8080/"); warp::serve(routes).run(([127, 0, 0, 1], 8080)).await; }
运行方式同 tide
。
此文仅是简单的模板示例分享,笔者将要对已经开发的 wasm 博客进行服务器端渲染的改造,以和 handlebars-rust 模板开发进行体验和比较。以后若有体会,再与各位朋友分享。
谢谢您的阅读!