SSR + Hydration

[norman784]

I was wondering how to achieve this, in theory is simple, but if you try to use it, isn't.

My goal is to use SSR to render the html and then hydrate them without needing to pass any data to the wasm binary, so it will use just the data that the backend provided, but where I'm struggling is to figure out how to accomplish this using the same components, also my use case is to have complex objects that not entirely printed in the html, maybe if we can pass some props (or set the state) as the html tag param like:

<div data-hk='1.0' data-props='{ name: "John", hidden: "value"}'>
  Name: <!--#-->John<!--/-->
</div>

#[component]
fn App<G: Html>(cx: Scope, user: User) -> View<G> {
  view! { cx,
    div {
      "Name: " user.name
    }
  }
}

or maybe

<div data-hk='1.0' data-signal-user='{ name: "John", hidden: "value"}'>
  Name: <!--#-->John<!--/-->
</div>

#[component]
fn App<G: Html>(cx: Scope) -> View<G> {
  // So you can read from the scope maybe the user? that was set by the hydrate.
  let user = create_signal(cx, cx.get::<User>().unwrap_or_default()); 
  view! { cx,
    div {
      "Name: " user.name
    }
  }
}

[lukechu10]

I was thinking of something more like the latter. In that case, the data would be fetched on the server, serialized into some JSON payload which could be inlined in the html and then deserialized and put into a context (https://sycamore-rs.netlify.app/docs/advanced/contexts) when the app is mounted. That way, the data is only fetched once on the server and not on the client.

The problem with this is that it should also work well with the router so that when navigation occurs, the data is fetched on the client since nothing is being rendered on the server.

[norman784]

Thanks, I will check that as well

[arctic-hen7]

Perseus does basically exactly this, so you could have a look at its code. The way it works is by serializing properties to a string and then inserting that as a script that defines a global variable. That's executed as JS, and then when the Wasm runs, it can access that variable.

As for navigation, Perseus fetches JSON payloads from the server for what we call subsequent loads. There's a fair bit in the advanced section of the Perseus book about how all that works. Hope it helps!

[norman784]

Thanks, I will take a look at Perseus!