Mirrors/dioxus
2
0
Fork 0
mirror of https://github.com/DioxusLabs/dioxus synced 2025-02-17 06:08:26 +00:00
Code Issues Projects Releases Packages Wiki Activity

publish: ssr

Browse source
This commit is contained in:
Jonathan Kelley 2021-09-24 22:15:50 -04:00
parent 4a5041c590
commit 71f0df6374
6 changed files with 51 additions and 78 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
packages/core/Cargo.toml
View file

@ -20,7 +20,7 @@ fxhash = "0.2.1"
longest-increasing-subsequence = "0.1.0"
# internall used
log = { version = "0.4.14", features = ["release_max_level_off"] }
log = { version = "0.4", features = ["release_max_level_off"] }
futures-util = "0.3.15"

4
packages/ssr/Cargo.toml
View file

@ -3,11 +3,13 @@ name = "dioxus-ssr"
version = "0.1.0"
authors = ["Jonathan Kelley <jkelleyrtp@gmail.com>"]
edition = "2018"
description = "Dioxus render-to-string"
license = "MIT/Apache-2.0"
# See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html
[dependencies]
dioxus-core = { path = "../core", version = "0.1.2", features = ["serialize"] }
dioxus-core = { path = "../core", version = "0.1.3", features = ["serialize"] }
[dev-dependencies]

38
packages/ssr/README.md
View file

@ -2,23 +2,53 @@
Render a Dioxus VirtualDOM to a string.
```rust
// Our app:
const App: FC<()> = |cx, props|cx.render(rsx!(div {"hello world!"}));
const App: FC<()> = |cx, props| rsx!(cx, div {"hello world!"});
// Build the virtualdom from our app
let mut vdom = VirtualDOM::new(App);
// This runs components, lifecycles, etc. without needing a physical dom. Some features (like noderef) won't work.
vdom.rebuild_in_place();
let _ = vdom.rebuild();
// Render the entire virtualdom from the root
let text = dioxus_ssr::render_root(&vdom);
let text = dioxus_ssr::render_vdom(&vdom, |c| c);
assert_eq!(text, "<div>hello world!</div>")
```
## Usage in pre-rendering
## Pre-rendering
This crate is particularly useful in pre-generating pages server-side and then selectively loading dioxus client-side to pick up the reactive elements.
In fact, this crate supports hydration out of the box. However, it is extremely important that both the client and server will generate the exact same VirtualDOMs - the client picks up its VirtualDOM assuming that the pre-rendered page output is the same. To do this, you need to make sure that your VirtualDOM implementation is deterministic! This could involve either serializing our app state and sending it to the client, hydrating only parts of the page, or building tests to ensure what's rendered on the server is the same as the client.
With pre-rendering enabled, this crate will generate element nodes with Element IDs pre-associated. During hydration, the Dioxus-WebSys renderer will attach the Virtual nodes to these real nodes after a page query.
To enable pre-rendering, simply configure the `SsrConfig` with pre-rendering enabled.
```rust
let dom = VirtualDom::new(App, |c| c);
let text = dioxus::ssr::render_vdom(App, |cfg| cfg.pre_render(true));
```
## Usage in server-side rendering
Dioxus SSR can also be to render on the server. Obviously, you can just render the VirtualDOM to a string and send that down.
```rust
let text = dioxus_ssr::render_vdom(&vdom, |c| c);
assert_eq!(text, "<div>hello world!</div>")
```
The rest of the space - IE doing this more efficiently, caching the virtualdom, etc, will all need to be a custom implementation for now.
## Usage in static site generation
Dioxus SSR is a powerful tool to generate static sites. Using Dioxus for static site generation _is_ a bit overkill, however. The new documentation generation library, Doxie, is essentially Dioxus SSR on steroids designed for static site generation with client-side hydration.
Again, simply render the VirtualDOM to a string using `render_vdom` or any of the other render methods.

62
packages/ssr/index.html
View file

@ -1,62 +0,0 @@
<div title="About W3Schools">
<div title="About W3Schools" style="color:blue;text-align:center" class="About W3Schools">
<p title="About W3Schools">Hello world!: 0</p>
</div>
<div title="About W3Schools" style="color:blue;text-align:center" class="About W3Schools">
<p title="About W3Schools">Hello world!: 1</p>
</div>
<div title="About W3Schools" style="color:blue;text-align:center" class="About W3Schools">
<p title="About W3Schools">Hello world!: 2</p>
</div>
<div title="About W3Schools" style="color:blue;text-align:center" class="About W3Schools">
<p title="About W3Schools">Hello world!: 3</p>
</div>
<div title="About W3Schools" style="color:blue;text-align:center" class="About W3Schools">
<p title="About W3Schools">Hello world!: 4</p>
</div>
<div title="About W3Schools" style="color:blue;text-align:center" class="About W3Schools">
<p title="About W3Schools">Hello world!: 5</p>
</div>
<div title="About W3Schools" style="color:blue;text-align:center" class="About W3Schools">
<p title="About W3Schools">Hello world!: 6</p>
</div>
<div title="About W3Schools" style="color:blue;text-align:center" class="About W3Schools">
<p title="About W3Schools">Hello world!: 7</p>
</div>
<div title="About W3Schools" style="color:blue;text-align:center" class="About W3Schools">
<p title="About W3Schools">Hello world!: 8</p>
</div>
<div title="About W3Schools" style="color:blue;text-align:center" class="About W3Schools">
<p title="About W3Schools">Hello world!: 9</p>
</div>
<div title="About W3Schools" style="color:blue;text-align:center" class="About W3Schools">
<p title="About W3Schools">Hello world!: 10</p>
</div>
<div title="About W3Schools" style="color:blue;text-align:center" class="About W3Schools">
<p title="About W3Schools">Hello world!: 11</p>
</div>
<div title="About W3Schools" style="color:blue;text-align:center" class="About W3Schools">
<p title="About W3Schools">Hello world!: 12</p>
</div>
<div title="About W3Schools" style="color:blue;text-align:center" class="About W3Schools">
<p title="About W3Schools">Hello world!: 13</p>
</div>
<div title="About W3Schools" style="color:blue;text-align:center" class="About W3Schools">
<p title="About W3Schools">Hello world!: 14</p>
</div>
<div title="About W3Schools" style="color:blue;text-align:center" class="About W3Schools">
<p title="About W3Schools">Hello world!: 15</p>
</div>
<div title="About W3Schools" style="color:blue;text-align:center" class="About W3Schools">
<p title="About W3Schools">Hello world!: 16</p>
</div>
<div title="About W3Schools" style="color:blue;text-align:center" class="About W3Schools">
<p title="About W3Schools">Hello world!: 17</p>
</div>
<div title="About W3Schools" style="color:blue;text-align:center" class="About W3Schools">
<p title="About W3Schools">Hello world!: 18</p>
</div>
<div title="About W3Schools" style="color:blue;text-align:center" class="About W3Schools">
<p title="About W3Schools">Hello world!: 19</p>
</div>
</div>

18
packages/ssr/src/lib.rs
View file

@ -189,13 +189,13 @@ impl<'a> TextRenderer<'a> {
}
pub struct SsrConfig {
// currently not supported - control if we indent the HTML output
/// currently not supported - control if we indent the HTML output
indent: bool,
// Control if elements are written onto a new line
/// Control if elements are written onto a new line
newline: bool,
// Choose to write ElementIDs into elements so the page can be re-hydrated later on
/// Choose to write ElementIDs into elements so the page can be re-hydrated later on
pre_render: bool,
// Currently not implemented
@ -240,16 +240,16 @@ mod tests {
use dioxus_core as dioxus;
use dioxus_core::prelude::*;
use dioxus_html as dioxus_elements;
use dioxus_core_macro::*;
use dioxus_html as dioxus_elements;
static SIMPLE_APP: FC<()> = |cx, props|{
static SIMPLE_APP: FC<()> = |cx, props| {
cx.render(rsx!(div {
"hello world!"
}))
};
static SLIGHTLY_MORE_COMPLEX: FC<()> = |cx, props|{
static SLIGHTLY_MORE_COMPLEX: FC<()> = |cx, props| {
cx.render(rsx! {
div {
title: "About W3Schools"
@ -268,14 +268,14 @@ mod tests {
})
};
static NESTED_APP: FC<()> = |cx, props|{
static NESTED_APP: FC<()> = |cx, props| {
cx.render(rsx!(
div {
SIMPLE_APP {}
}
))
};
static FRAGMENT_APP: FC<()> = |cx, props|{
static FRAGMENT_APP: FC<()> = |cx, props| {
cx.render(rsx!(
div { "f1" }
div { "f2" }
@ -331,7 +331,7 @@ mod tests {
#[test]
fn styles() {
static STLYE_APP: FC<()> = |cx, props|{
static STLYE_APP: FC<()> = |cx, props| {
cx.render(rsx! {
div { style: { color: "blue", font_size: "46px" } }
})

5
packages/web/examples/crm2.rs
View file

@ -87,7 +87,10 @@ static App: FC<()> = |cx, _| {
button {
background: "rgb(202, 60, 60)"
class: "pure-button pure-button-primary"
onclick: move |_| clients.write().clear(),
onclick: move |_| {
clients.write().clear();
scene.set(Scene::ClientsList);
},
"Remove all clients"
}
button {