diff --git a/docs/guide/examples/hello_world_ssr.rs b/docs/guide/examples/hello_world_ssr.rs new file mode 100644 index 000000000..8039e9fed --- /dev/null +++ b/docs/guide/examples/hello_world_ssr.rs @@ -0,0 +1,61 @@ +// ANCHOR: all + +// ANCHOR: main +#![allow(non_snake_case)] +use axum::{response::Html, routing::get, Router}; +// import the prelude to get access to the `rsx!` macro and the `Scope` and `Element` types +use dioxus::prelude::*; + +#[tokio::main] +async fn main() { + let addr = std::net::SocketAddr::from(([127, 0, 0, 1], 3000)); + println!("listening on http://{}", addr); + + axum::Server::bind(&addr) + .serve( + Router::new() + .route("/", get(app_endpoint)) + .into_make_service(), + ) + .await + .unwrap(); +} + +// ANCHOR_END: main + +// ANCHOR: endpoint +async fn app_endpoint() -> Html { + // render the rsx! macro to HTML + Html(dioxus_ssr::render_lazy(rsx! { + div { "hello world!" } + })) +} +// ANCHOR_END: endpoint + +// ANCHOR: second_endpoint +async fn second_app_endpoint() -> Html { + // create a component that renders a div with the text "hello world" + fn app(cx: Scope) -> Element { + cx.render(rsx!(div { "hello world" })) + } + // create a VirtualDom with the app component + let mut app = VirtualDom::new(app); + // rebuild the VirtualDom before rendering + let _ = app.rebuild(); + + // render the VirtualDom to HTML + Html(dioxus_ssr::render(&app)) +} +// ANCHOR_END: second_endpoint + +// ANCHOR: component +// define a component that renders a div with the text "Hello, world!" +fn App(cx: Scope) -> Element { + cx.render(rsx! { + div { + "Hello, world!" + } + }) +} +// ANCHOR_END: component +// ANCHOR_END: all diff --git a/docs/guide/src/en/getting_started/ssr.md b/docs/guide/src/en/getting_started/ssr.md index f78623003..7a1954191 100644 --- a/docs/guide/src/en/getting_started/ssr.md +++ b/docs/guide/src/en/getting_started/ssr.md @@ -40,54 +40,30 @@ tokio = { version = "1.15.0", features = ["full"] } Now, set up your Axum app to respond on an endpoint. ```rust -use axum::{response::Html, routing::get, Router}; -use dioxus::prelude::*; - -#[tokio::main] -async fn main() { - let addr = std::net::SocketAddr::from(([127, 0, 0, 1], 3000)); - println!("listening on http://{}", addr); - - axum::Server::bind(&addr) - .serve( - Router::new() - .route("/", get(app_endpoint)) - .into_make_service(), - ) - .await - .unwrap(); -} +{{#include ../../../examples/hello_world_ssr.rs:main}} ``` And then add our endpoint. We can either render `rsx!` directly: ```rust -async fn app_endpoint() -> Html { - // render the rsx! macro to HTML - Html(dioxus_ssr::render_lazy(rsx! { - div { "hello world!" } - })) -} +{{#include ../../../examples/hello_world_ssr.rs:endpoint}} ``` Or we can render VirtualDoms. ```rust -async fn app_endpoint() -> Html { - // create a component that renders a div with the text "hello world" - fn app(cx: Scope) -> Element { - cx.render(rsx!(div { "hello world" })) - } - // create a VirtualDom with the app component - let mut app = VirtualDom::new(app); - // rebuild the VirtualDom before rendering - let _ = app.rebuild(); - - // render the VirtualDom to HTML - Html(dioxus_ssr::render_vdom(&app)) -} +{{#include ../../../examples/hello_world_ssr.rs:second_endpoint}} ``` +And then add our app component: + +```rust +{{#include ../../../examples/hello_world_ssr.rs:component}} +``` + +And that's it! + + ## Multithreaded Support The Dioxus VirtualDom, sadly, is not currently `Send`. Internally, we use quite a bit of interior mutability which is not thread-safe.