Server Side Rendering

Sycamore supports creating isomorphic web applications (apps that use the same code to run on both the server and the client).

Using render_to_string

So far, we’ve been using the render or render_to functions to mount our app into the browser’s DOM. When rendering on the server, however, we don’t have a DOM accessible to use so we use render_to_string instead.

render_to_string has the same API as render except it returns a string that can be sent to the browser using your favorite web server.

let html = render_to_string(|| view! {
    div(class="my-class") {
        button { "Click me" }
    }
});

// Respond to the client with the rendered html.

Hydration

Now that your app is rendered on the server and sent to the client as HTML, you don’t want the client to recreate all the DOM nodes when they are already there. To “hydrate” the app, use hydrate and hydrate_to instead of render and render_to functions to mount your app. These functions do what they say on the tin: render your app by reusing existing DOM nodes.

In your client-side app, enable the "hydrate" feature on sycamore in your Cargo.toml file.