Loading a client only dependency in SSR

[sangelxyz]

I'm using https://github.com/feral-dot-io/leptos-chartistry to display charts on a website i'm making in leptos, however it will only compile as wasm so it needs to run only on the client.

I have the following that works, however if i refresh a route or go directly to the route it will instead load the server and not the client code.

I have tried updating the client using an effect however it's still loading the server section of the code.

Is there anyway i can load a dependency only on the client?

#[component]
pub fn DisplayChart() -> impl IntoView {
    view! {
        <div>
            {move || {
                if is_server() {
                   view! { <div>server</div> }
                } else {
                    view! { <div>client</div> }
                }
            }}
        </div>
    }
}

[dustypomerleau]

You can gate server-only code with:

#[cfg(feature = "ssr")]

(or by using server functions).

---

You can gate client-only code with:

#[cfg(feature = "hydrate")]

[sangelxyz]

Thank you for your reply, ill give this a go.

[hustlong]

hi, I met the same problem, i tried only render at client, but got error: "element with id 0-0-0-172 not found, ignoring it for hydration".
so do you have find the solution use chartistry with leptos ssr feature?

                { #[cfg(target_arch = "wasm32")] {
                    view! {<DisplayChart/>}
                }}

[sangelxyz]

Both Client & Server need to be the same, i ended up using charming which has been working well so far.

#[component]
pub fn LineChart(ctx: ChartContext, data: ReadSignal<Vec<MyData>>) -> impl IntoView {
    #[cfg(feature = "hydrate")]
{// code for hydrate }

// code for both, which is the same
view {
<div id="chart"><div>
}
}