Server-side Rendering (without hydration) #2335

futursolo · 2022-01-06T16:38:15Z

Description

This PR introduces a ServerRenderer that can be used to render a Component into a String.

The primary difference between the original API outlined in #1154 and this PR is that render() is an async fn which supports data-fetching during the rendering process via <Suspense />.

One caveat is that render() is !Send due to the use of Rc and RefCell throughout the entire library (and fields containing web_sys structs such as Element). This may cause issues when trying to use Yew with libraries that require a Future + Send future but can be worked around.
I think there's not a big enough incentive to replace everything with their sync counterpart so I have decided to make render !Send.

Most Web APIs are not gated and will be compiled in as-is when used on non-wasm targets.
Due to the following reasons:

The number of feature flag will be large with very little technical gain. (You cannot make Yew Send with only removal of Web APIs anyways.)
It's not possible to have the same API (e.g: NodeRef) on both server side and client side if web_sys is not allowed. Hence requires developer to also use feature flags to distinguish between client side and server side. I see very little reason to use feature flags if a boundary of client-side only logics can be easily established with use_effect.
(Using feature flags can be annoying from time to time as it sometimes can be easily forgotten and it's fairly easy to trigger false positive lints like unused_variables, etc.)

Fixes #1154
Fixes #1155

I have noticed that #2330 is filed in the meanwhile and I anticipate to take some time before a decision can be made on it.
So I have decided to file the server-side rending part first which should be easy to solve conflict should either this PR or #2330 is merged first. And see how #2330 goes before I work on the hydration part.

Checklist

I have run cargo make pr-flow
I have reviewed my own code
I have added tests

github-actions · 2022-01-06T16:44:10Z

Visit the preview URL for this PR (updated for commit 3567689):

https://yew-rs--pr2335-ssr-fuscyfij.web.app

_{(expires Wed, 19 Jan 2022 13:51:11 GMT)}

_{🔥 via Firebase Hosting GitHub Action 🌎}

voidpumpkin · 2022-01-06T17:03:25Z

I just read the title and already my reaction is 😲

Madoshakalaka · 2022-01-07T04:13:11Z

🤯 🤯 🤯 🤯 🤯 🤯 🤯 🤯 thank you!

sansx · 2022-01-07T04:20:59Z

wow, it's historical moment 😆

voidpumpkin · 2022-01-07T12:54:26Z

@futursolo Could you convert this into a draft if its not ready to be reviewed? I keep seeing new commits.

futursolo · 2022-01-07T13:03:14Z

@futursolo Could you convert this into a draft if its not ready to be reviewed? I keep seeing new commits.

it's ready since I submitted it.

I am just doing some improvement on the docs so ssr would show as a feature flag as nobody is reviewing it at the moment.

(If you keep seeing notifications, I am sorry. I guess I will stop doing it.)

hamza1311

I wonder how routing would handed. yew-router can't work with SSR

packages/yew/Cargo.toml

packages/yew/src/lib.rs

packages/yew/src/suspense/suspension.rs

packages/yew/src/virtual_dom/vcomp.rs

packages/yew/src/lib.rs

packages/yew/src/io_coop.rs

voidpumpkin · 2022-01-11T08:37:01Z

I am so sorry I'm taking so long to review this.
Its just that want to test the API for myself by creating a testing app, but haven't had the time yet...

hamza1311 · 2022-01-11T13:03:40Z

I am so sorry I'm taking so long to review this.
Its just that want to test the API for myself by creating a testing app, but haven't had the time yet...

@voidpumpkin, I'd say that testing the API can be done any time before release. How about you review the code changes and leave the rest for later (when hydration is in place)?

voidpumpkin · 2022-01-11T13:26:28Z

@futursolo Could you split out simple ssr example to only have one component per file.
Also main.rs should only have the main function and no components.

futursolo · 2022-01-11T13:34:06Z

@futursolo Could you split out simple ssr example to only have one component per file.
Also main.rs should only have the main function and no components.

I don't think this is a good thing to do and most examples don't follow this rule either.

one component per file

I am not writing Java or Angular, am I?

voidpumpkin · 2022-01-11T14:11:50Z

@futursolo Could you split out simple ssr example to only have one component per file.
Also main.rs should only have the main function and no components.

I don't think this is a good thing to do and most examples don't follow this rule either.

one component per file

I am not writing Java or Angular, am I?

I guess its just a preference. Ok i wont block the pr because of this

voidpumpkin

Took me some time because i have little experience with ssr. But from what i gather i don't see any issues at the moment.

voidpumpkin · 2022-01-11T14:40:08Z

website/sidebars.js

-    // But you can create a sidebar manually
-    sidebar: [
+  // But you can create a sidebar manually
+  sidebar: [


we seriously need to add a formatting hook to commits as every person keeps formatting this file differently.

hamza1311 · 2022-01-11T16:48:29Z

There's conflicts...

# Conflicts: # packages/yew/Cargo.toml

voidpumpkin · 2022-01-12T08:05:42Z

examples/simple_ssr/README.md

@@ -0,0 +1,6 @@
+# Server-side Rendering Example


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.

# Conflicts: # packages/yew/src/lib.rs

hamza1311

Excited to get this merged!

hamza1311 · 2022-01-12T13:42:22Z

This was already approved by @voidpumpkin so merging it as 2 review requirement has been met.

* Basic render to html implementation. * Remove HtmlWriter. * Escape html content. * Add non-suspense tests. * Add Suspense tests. * Gated "ssr" feature. * Add example. * Fix tests. * Fix docs. * Fix heading size. * Remove the unused YewRenderer. * Remove extra comment. * unify naming. * Update docs. * Update docs. * Update docs. * Isolate spawn_local. * Add doc flags. * Add ssr feature to docs. * Move ServerRenderer into their own file. * Fix docs. * Update features and docs. * Fix example. * Adjust comment position. * Fix effects being wrongly called when a component is suspended. * Fix clippy. * Uuid & no double boxing. Co-authored-by: Muhammad Hamza <muhammadhamza1311@gmail.com>

futursolo added 9 commits January 6, 2022 19:31

Basic render to html implementation.

65af3a2

Remove HtmlWriter.

667796d

Escape html content.

820d3ac

Add non-suspense tests.

1b2d823

Add Suspense tests.

5b3f5e3

Gated "ssr" feature.

c7c9d2d

Add example.

2bab219

merge master into ssr

90deefc

Fix tests.

482865e

futursolo added 3 commits January 7, 2022 01:47

Fix docs.

10f4ac4

Fix heading size.

77b48c0

Remove the unused YewRenderer.

476300a

Remove extra comment.

95e1d39

voidpumpkin added the A-yew Area: The main yew crate label Jan 6, 2022

hamza1311 added this to the v0.20 milestone Jan 6, 2022

unify naming.

655afd4

futursolo added 3 commits January 7, 2022 13:22

Update docs.

26bebb5

Update docs.

61f44d1

Update docs.

826b431

Madoshakalaka mentioned this pull request Jan 7, 2022

Yew started to support SSR DioxusLabs/dioxus#81

Closed

futursolo added 3 commits January 7, 2022 21:40

Isolate spawn_local.

ed138b1

Add doc flags.

bd26db4

Add ssr feature to docs.

f003aab

hamza1311 reviewed Jan 7, 2022

View reviewed changes

hamza1311 requested review from siku2 and voidpumpkin January 10, 2022 17:29

futursolo added 2 commits January 11, 2022 19:15

Uuid & no double boxing.

17fd3b9

merge master into ssr

c67de39

voidpumpkin previously approved these changes Jan 11, 2022

View reviewed changes

voidpumpkin requested a review from hamza1311 January 11, 2022 14:57

hamza1311 previously approved these changes Jan 11, 2022

View reviewed changes

Merge branch 'master' into ssr

0f24ae6

# Conflicts: # packages/yew/Cargo.toml

futursolo dismissed stale reviews from hamza1311 and voidpumpkin via 0f24ae6 January 11, 2022 22:44

voidpumpkin previously approved these changes Jan 11, 2022

View reviewed changes

voidpumpkin requested a review from hamza1311 January 11, 2022 22:56

voidpumpkin reviewed Jan 12, 2022

View reviewed changes

voidpumpkin mentioned this pull request Jan 12, 2022

Add implementation types to examples table #2361

Merged

3 tasks

Merge branch 'master' into fursolo-ssr

3567689

# Conflicts: # packages/yew/src/lib.rs

hamza1311 dismissed voidpumpkin’s stale review via 3567689 January 12, 2022 13:34

hamza1311 requested a review from voidpumpkin January 12, 2022 13:34

hamza1311 approved these changes Jan 12, 2022

View reviewed changes

github-actions bot approved these changes Jan 12, 2022

View reviewed changes

hamza1311 merged commit d8c2550 into yewstack:master Jan 12, 2022

futursolo deleted the ssr branch January 27, 2022 14:19

futursolo mentioned this pull request Mar 11, 2022

#[cfg(feature = "render")] and yew::Renderer #2498

Merged

3 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Server-side Rendering (without hydration) #2335

Server-side Rendering (without hydration) #2335

futursolo commented Jan 6, 2022 •

edited

github-actions bot commented Jan 6, 2022 •

edited

voidpumpkin commented Jan 6, 2022

Madoshakalaka commented Jan 7, 2022

sansx commented Jan 7, 2022

voidpumpkin commented Jan 7, 2022

futursolo commented Jan 7, 2022 •

edited

hamza1311 left a comment

voidpumpkin commented Jan 11, 2022

hamza1311 commented Jan 11, 2022

voidpumpkin commented Jan 11, 2022 •

edited

futursolo commented Jan 11, 2022

voidpumpkin commented Jan 11, 2022

voidpumpkin left a comment

voidpumpkin Jan 11, 2022

hamza1311 commented Jan 11, 2022

voidpumpkin Jan 12, 2022

hamza1311 left a comment

hamza1311 commented Jan 12, 2022

Server-side Rendering (without hydration) #2335

Server-side Rendering (without hydration) #2335

Conversation

futursolo commented Jan 6, 2022 • edited

Description

Checklist

github-actions bot commented Jan 6, 2022 • edited

voidpumpkin commented Jan 6, 2022

Madoshakalaka commented Jan 7, 2022

sansx commented Jan 7, 2022

voidpumpkin commented Jan 7, 2022

futursolo commented Jan 7, 2022 • edited

hamza1311 left a comment

Choose a reason for hiding this comment

voidpumpkin commented Jan 11, 2022

hamza1311 commented Jan 11, 2022

voidpumpkin commented Jan 11, 2022 • edited

futursolo commented Jan 11, 2022

voidpumpkin commented Jan 11, 2022

voidpumpkin left a comment

Choose a reason for hiding this comment

voidpumpkin Jan 11, 2022

Choose a reason for hiding this comment

hamza1311 commented Jan 11, 2022

voidpumpkin Jan 12, 2022

Choose a reason for hiding this comment

hamza1311 left a comment

Choose a reason for hiding this comment

hamza1311 commented Jan 12, 2022

futursolo commented Jan 6, 2022 •

edited

github-actions bot commented Jan 6, 2022 •

edited

futursolo commented Jan 7, 2022 •

edited

voidpumpkin commented Jan 11, 2022 •

edited