Add WASI support for server-side rendering. #3534

langyo · 2023-11-21T06:42:51Z

Description

I've been trying to use yew to render the page into the static HTML string on WASI. However, yew cannot distinguish the browser WASM target (wasm32-unknown-unknown with wasm-bindgen) and WASI target (wasm32-wasi), and it would choose wrong modules for wasm32-*.

In addition, since the current SSR implementation will create new tasks directly in the asynchronous context directly (based on prokio). It only allowed in a multi-threaded environment that it is not compatible with WASI. So I added a dedicated one for a single-threaded environment that rendering function to support single-threaded scenes.

To support this new feature, I have also made changes along with some other upstream dependencies. I've created some PRs for these upstream dependencies, and added a temporary patch entry to the root Cargo.toml for this PR. If the upstream branch can be processed, these temporary patch entries could be replaced.

I also wrote a short example for this new feature.

CC @futursolo 😉

Checklist

I have reviewed my own code
I have added tests

It would be modified later after the corresponding library branches are merged.

github-actions · 2023-11-21T06:44:51Z

Benchmark - core

Yew Master

vnode           fastest       │ slowest       │ median        │ mean          │ samples │ iters
╰─ vnode_clone  2.547 ns      │ 2.645 ns      │ 2.573 ns      │ 2.577 ns      │ 100     │ 1000000000

Pull Request

vnode           fastest       │ slowest       │ median        │ mean          │ samples │ iters
╰─ vnode_clone  3.035 ns      │ 3.371 ns      │ 3.066 ns      │ 3.07 ns       │ 100     │ 1000000000

github-actions · 2023-11-21T06:45:15Z

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

https://yew-rs--pr3534-wasi-support-test-o6il3hlo.web.app

_{(expires Thu, 23 May 2024 04:59:59 GMT)}

_{🔥 via Firebase Hosting GitHub Action 🌎}

github-actions · 2023-11-21T06:48:26Z

Benchmark - SSR

Yew Master

Benchmark	Round	Min (ms)	Max (ms)	Mean (ms)	Standard Deviation
Baseline	10	308.839	309.934	309.091	0.309
Hello World	10	485.566	498.596	490.388	5.267
Function Router	10	1645.431	1667.069	1651.687	6.381
Concurrent Task	10	1005.296	1007.192	1006.150	0.526
Many Providers	10	1128.123	1175.336	1143.905	14.769

Pull Request

Benchmark	Round	Min (ms)	Max (ms)	Mean (ms)	Standard Deviation
Baseline	10	308.774	310.309	309.155	0.455
Hello World	10	483.807	493.356	487.666	3.850
Function Router	10	1599.899	1619.124	1608.241	5.165
Concurrent Task	10	1005.784	1006.647	1006.159	0.248
Many Providers	10	1095.527	1192.815	1118.700	28.378

github-actions · 2023-11-21T06:48:32Z

Size Comparison

examples	master (KB)	pull request (KB)	diff (KB)	diff (%)
async_clock	97.653	97.623	-0.030	-0.031%
boids	167.853	167.810	-0.043	-0.026%
communication_child_to_parent	90.206	90.171	-0.035	-0.039%
communication_grandchild_with_grandparent	102.341	102.300	-0.041	-0.040%
communication_grandparent_to_grandchild	97.768	97.740	-0.027	-0.028%
communication_parent_to_child	86.565	86.521	-0.045	-0.052%
contexts	102.036	101.996	-0.040	-0.039%
counter	83.196	83.158	-0.038	-0.046%
counter_functional	83.631	83.594	-0.037	-0.044%
dyn_create_destroy_apps	86.564	86.531	-0.033	-0.038%
file_upload	97.627	97.589	-0.038	-0.039%
function_memory_game	163.858	163.824	-0.034	-0.021%
function_router	338.506	338.338	-0.168	-0.050%
function_todomvc	157.824	157.794	-0.030	-0.019%
futures	225.526	225.229	-0.297	-0.132%
game_of_life	105.197	105.159	-0.038	-0.036%
immutable	186.146	186.118	-0.028	-0.015%
inner_html	77.545	77.510	-0.035	-0.045%
js_callback	105.750	105.706	-0.044	-0.042%
keyed_list	193.396	193.360	-0.035	-0.018%
mount_point	80.534	80.497	-0.037	-0.046%
nested_list	111.160	111.125	-0.035	-0.032%
node_refs	87.884	87.843	-0.041	-0.047%
password_strength	1698.212	1698.175	-0.037	-0.002%
portals	90.809	90.775	-0.033	-0.037%
router	309.432	309.254	-0.178	-0.057%
simple_ssr	137.716	137.686	-0.030	-0.022%
ssr_router	375.773	375.559	-0.215	-0.057%
suspense	112.070	112.044	-0.026	-0.024%
timer	86.123	86.085	-0.038	-0.044%
timer_functional	94.877	94.832	-0.045	-0.047%
todomvc	138.982	138.946	-0.036	-0.026%
two_apps	83.251	83.215	-0.036	-0.043%
web_worker_fib	131.454	131.425	-0.029	-0.022%
web_worker_prime	181.591	181.551	-0.040	-0.022%
webgl	80.238	80.200	-0.038	-0.047%

✅ None of the examples has changed their size significantly.

bytecodealliance/wasmtime#4312

yewstack/prokio#11 (comment)

langyo · 2023-12-15T03:45:50Z

I am commenting separately because the original comment cannot be quoted directly.

Ref #3534 (comment)

There's still a problem. The WASI environment cannot directly establish a server like other environments. Because this part has not been standardized yet. In other words, I can only print the SSR results directly to the stdout stream for the time being.

Originally I wanted to remove this demo, but I discovered this problem when checking other demos.

If it weren't for this reason, this change would be really elegant. 😉

…lServerRender.

lemmih · 2023-12-15T21:51:01Z

I haven't reviewed this PR, but I can confirm that it works in my use-case. Landing this WASI support would be amazing.

langyo · 2024-03-28T13:06:37Z

This merge request has almost completed all scheduled work, but no one has continued to review it. Do you have time to help take a look?

@WorldSEnder @futursolo @hamza1311

ranile

Thanks for the bump

examples/wasi_ssr_module/README.md

ranile · 2024-03-28T14:02:58Z

examples/wasi_ssr_module/README.md

I thought preview2 added support for it, no? I don't mind forcing WASI consumers to use wasm32-wasip2 target

ranile · 2024-03-28T14:06:22Z

website/docs/advanced-topics/server-side-rendering.md

+Yew supports single thread mode for server-side rendering by `yew::LocalServerRenderer`. This mode would work in a single thread environment like WASI.
+
+```rust
+// Build it by `wasm32-wasi` target


Preview 2, perhaps? It's nightly only but maybe it's better to use that. I'm totally fine with making WASI examples to be nightly only in yew (no need to make the framework nightly only for it; the consumption is much better in p2)

Preview 2, perhaps? It's nightly only but maybe it's better to use that. I'm totally fine with making WASI examples to be nightly only in yew (no need to make the framework nightly only for it; the consumption is much better in p2)

WASI's multi-threading proposal is still not stable even in preview2. If it were not for compatibility with the multi-threaded version of WASI, at least currently requiring users to use nightly channels to build WASI would do more harm than good.

Of course, I still support the new proposal of using WASI as soon as possible. When WASI's multi-threading capabilities stabilize at some point in the future, I'll improve the code.

ranile · 2024-03-28T14:07:42Z

.github/workflows/main-checks.yml

-      - ".github/workflows/main-checks.yml"
-      - "ci/**"
-      - "packages/**/*"
-      - "Cargo.toml"
-      - "Cargo.lock"
+      - '.github/workflows/main-checks.yml'
+      - 'ci/**'
+      - 'packages/**/*'
+      - 'Cargo.toml'
+      - 'Cargo.lock'


This still needs to be resolved. Lots of unnecessary changes here

Co-authored-by: Elina <imelina@elina.website>

langyo · 2024-04-10T05:18:31Z

Do you have time to take a look?😂 @hamza1311

langyo · 2024-05-16T04:45:55Z

cc rustwasm/wasm-bindgen#3946

Until this fix of wasm-bindgen is released with a new version, CI wouldn't be fixed for a while.

langyo added 6 commits November 15, 2023 00:33

Try to add wasi feature to avoid browser's ABI.

263fc9d

Add async render for single-threaded env.

7bd1e04

Temporarily enable my own patch branch.

a935141

It would be modified later after the corresponding library branches are merged.

add example for WASI SSR.

3338893

Ready to run WASI on wasmtime.

b218db9

complete the example

7ef5659

fix fmt

dae7f15

langyo added 7 commits November 21, 2023 14:49

fix fmt

b2e0bdc

I made a mistake..sry

517ed00

add yew-router suites for demo

ff4a0ba

fix typo

1335d20

Make the async render stream function public

1de83b7

Use target_os instead of feature.

e91895a

Renew gloo-history's patch.

cc02f93

langyo mentioned this pull request Dec 5, 2023

Add WASI example for CI. rustwasm/gloo#411

Merged

langyo added 5 commits December 5, 2023 13:40

Exclude WASI example to avoid web-sys.

d9bae8d

Try to add CI for WASI example.

bf0c898

Fix CI.

0286b69

Fix CI that requires compiler 1.67 or newer.

666aa6a

Use CLI's flag instead of exclude example.

2c035e9

bytecodealliance/wasmtime#4312

langyo mentioned this pull request Dec 8, 2023

Add WASI support by tokio_wasi yewstack/prokio#11

Merged

4 tasks

langyo added 5 commits December 9, 2023 01:35

Remove patchs.

dea1dba

Use LocalServerRenderer instead of ServerRenderer.

133169e

yewstack/prokio#11 (comment)

Remove unused exports.

a520095

Add description about LocalServerRenderer.

b3f2b6e

fix fmt

459e110

fix

f0494f0

langyo added 8 commits December 15, 2023 11:52

Bump gloo-history version.

0991e0a

Block raw html update tests on WASI.

05650be

Rollback indexmap's version.

edab060

fix CI

1d8c171

fix CI

32e86d0

Update some SSR test suites that replace ServerRender instead of Loca…

d79f9c2

…lServerRender.

Remove yew-router's cfg macro

3eedd37

Fix fmt

da76e98

langyo requested a review from ranile December 15, 2023 06:12

Try to fix CI

6336f52

Merge branch 'master' into wasi-support-test

c861fa5

ranile reviewed Mar 28, 2024

View reviewed changes

langyo and others added 4 commits March 29, 2024 00:40

Update examples/wasi_ssr_module/README.md

1692b4a

Co-authored-by: Elina <imelina@elina.website>

Revert back some unnecessary changes.

0b5bb9e

Clippy

e9429db

fmt

8375313

langyo requested a review from ranile March 28, 2024 17:36

langyo and others added 3 commits May 16, 2024 09:32

Merge branch 'yewstack:master' into wasi-support-test

a7d1350

Fix CI.

d148fcb

Fix CI.

491a2c1

langyo force-pushed the wasi-support-test branch 2 times, most recently from 9e24e93 to 71951bd Compare May 16, 2024 02:17

Try to fix clippy.

d42077a

langyo force-pushed the wasi-support-test branch from 71951bd to d42077a Compare May 16, 2024 04:44

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add WASI support for server-side rendering. #3534

Add WASI support for server-side rendering. #3534

langyo commented Nov 21, 2023 •

edited

github-actions bot commented Nov 21, 2023 •

edited

github-actions bot commented Nov 21, 2023 •

edited

github-actions bot commented Nov 21, 2023 •

edited

github-actions bot commented Nov 21, 2023 •

edited

langyo commented Dec 15, 2023 •

edited

lemmih commented Dec 15, 2023

langyo commented Mar 28, 2024

ranile left a comment

ranile Mar 28, 2024

ranile Mar 28, 2024

langyo Mar 28, 2024

ranile Mar 28, 2024

langyo commented Apr 10, 2024

langyo commented May 16, 2024

Add WASI support for server-side rendering. #3534

Are you sure you want to change the base?

Add WASI support for server-side rendering. #3534

Conversation

langyo commented Nov 21, 2023 • edited

Description

Checklist

github-actions bot commented Nov 21, 2023 • edited

Benchmark - core

Yew Master

Pull Request

github-actions bot commented Nov 21, 2023 • edited

github-actions bot commented Nov 21, 2023 • edited

Benchmark - SSR

Yew Master

Pull Request

github-actions bot commented Nov 21, 2023 • edited

Size Comparison

langyo commented Dec 15, 2023 • edited

lemmih commented Dec 15, 2023

langyo commented Mar 28, 2024

ranile left a comment

Choose a reason for hiding this comment

ranile Mar 28, 2024

Choose a reason for hiding this comment

ranile Mar 28, 2024

Choose a reason for hiding this comment

langyo Mar 28, 2024

Choose a reason for hiding this comment

ranile Mar 28, 2024

Choose a reason for hiding this comment

langyo commented Apr 10, 2024

langyo commented May 16, 2024

langyo commented Nov 21, 2023 •

edited

github-actions bot commented Nov 21, 2023 •

edited

github-actions bot commented Nov 21, 2023 •

edited

github-actions bot commented Nov 21, 2023 •

edited

github-actions bot commented Nov 21, 2023 •

edited

langyo commented Dec 15, 2023 •

edited