Sync mod with SSR

[slava-bg]

Hi,

I've managed to migrate my CSR app to cargo-leptos and implement SSR, although it's not 100% complete.

Generally, I'm working on a dashboard-like tool and am not particularly interested in SEO. Some features still depend on CSR.

For example, I use local storage to determine whether the drawer is open or closed by default. After transitioning to SSR, if the drawer should be closed, I see it momentarily just after the page loads; it then closes once the WASM is loaded.

Additionally, some of the APIs I'm using are entirely dependent on Gloo.

If I'm using the start-axum-workspace template, what would be the best way to 'fake' CSR? In other words, I'd like to load the WASM first and then render my content without any server-side rendering.

Thanks!

[Umenokin]

According to the #1194 thread, ClientOnly features are still on the roadmap thus I used proposed solution from that thread:

use leptos::*;

#[component]
pub fn ClientOnly(children: ChildrenFn) -> impl IntoView {
    let (is_mount, set_mount) = create_signal(false);

    create_effect(move |_| {
        request_animation_frame(move || set_mount(true));
    });

    move || match is_mount() {
        true => Some(children().into_view()),
        false => None::<View>,
    }
}

[notnullonline]

I am wondering, why the same approach doesn´t work in my scenario

...
<Route path="/" view=move || {
        view! {
            <Show when=move || { global_state.current_user.get().is_none()}>
                <Redirect path=LOGIN_URL/>
            </Show>
            <Outlet/>
        }
    }
>
  <Route path="/" view=HomePage/>
</Route>
...

...
 let global_state = use_context::<GlobalState>().unwrap();

    create_effect(move |_| {
        let current_user = AuthService::get_current_user();

        if current_user.user_name.is_empty() {
            global_state.current_user.set(None);
        } else {
            global_state.current_user.set(Some(CurrentUser {
                user_name: create_rw_signal(current_user.user_name.clone()),
            }));
        }
    });
 ...

The code redirects to the LOGIN_URL regardless of the presence of the current user (in the browser's local storage)? :(

[gbj]

@notnullonline I'm not sure there's enough information in your post to follow what's going on. You might consider opening a new post, with a more complete example/explanation, as this one is quite old.

[notnullonline]

I found a workaround...

I replaced the built-in Redirect component with my custom component:

...
  <Show when=move || { global_state.current_user.get().is_none()}>
      <RedirectComponent path=LOGIN_URL/>
  </Show>
...

Here is the implementation of the component:

#[component]
pub fn RedirectComponent(path: &'static str) -> impl IntoView {
    let global_state = use_context::<GlobalState>().unwrap();
    let is_logged_in = move ||global_state.current_user.get().is_some();

    create_effect(move |_| {
        if !is_logged_in() {
            Navigate::go_to(path, None);
        } 
    });
}

Now, it works as expected :)