New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Server-side Rendering (without hydration) #2335
Merged
Merged
Changes from all commits
Commits
Show all changes
31 commits
Select commit
Hold shift + click to select a range
65af3a2
Basic render to html implementation.
futursolo 667796d
Remove HtmlWriter.
futursolo 820d3ac
Escape html content.
futursolo 1b2d823
Add non-suspense tests.
futursolo 5b3f5e3
Add Suspense tests.
futursolo c7c9d2d
Gated "ssr" feature.
futursolo 2bab219
Add example.
futursolo 90deefc
merge master into ssr
futursolo 482865e
Fix tests.
futursolo 10f4ac4
Fix docs.
futursolo 77b48c0
Fix heading size.
futursolo 476300a
Remove the unused YewRenderer.
futursolo 95e1d39
Remove extra comment.
futursolo 655afd4
unify naming.
futursolo 26bebb5
Update docs.
futursolo 61f44d1
Update docs.
futursolo 826b431
Update docs.
futursolo ed138b1
Isolate spawn_local.
futursolo bd26db4
Add doc flags.
futursolo f003aab
Add ssr feature to docs.
futursolo e56fcef
Move ServerRenderer into their own file.
futursolo ebe8c68
Fix docs.
futursolo 10d7295
Update features and docs.
futursolo 8635d63
Fix example.
futursolo 3599240
Adjust comment position.
futursolo 39a3d06
Fix effects being wrongly called when a component is suspended.
futursolo 49566a0
Fix clippy.
futursolo 17fd3b9
Uuid & no double boxing.
futursolo c67de39
merge master into ssr
futursolo 0f24ae6
Merge branch 'master' into ssr
futursolo 3567689
Merge branch 'master' into fursolo-ssr
hamza1311 File filter
Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,14 @@ | ||
[package] | ||
name = "simple_ssr" | ||
version = "0.1.0" | ||
edition = "2018" | ||
|
||
# See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html | ||
|
||
[dependencies] | ||
tokio = { version = "1.15.0", features = ["full"] } | ||
warp = "0.3" | ||
yew = { path = "../../packages/yew", features = ["ssr"] } | ||
reqwest = { version = "0.11.8", features = ["json"] } | ||
serde = { version = "1.0.132", features = ["derive"] } | ||
uuid = { version = "0.8.2", features = ["serde"] } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,6 @@ | ||
# Server-side Rendering Example | ||
|
||
This example demonstrates server-side rendering. | ||
|
||
Run `cargo run -p simple_ssr` and navigate to http://localhost:8080/ to | ||
view results. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,129 @@ | ||
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(); | ||
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 | ||
} | ||
} | ||
|
||
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; | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
You forgot to add your example in the table in
examples/README.md
But don't add it now, I'm changing that table so ill just add it in my PR.