Get resource and cache it with SSR and Hydration

[levap5]

I'm trying to get a resource and save it in the client as global state. I want to achieve the following when navigation occurs:

• If SSR:
  Call an async function, stream the result to the client. On the client side, save the result in GlobalState struct and render it.
• If Hydration:
  Check the resource in GlobalState. If it exists, render it. If it's absent, make a request to the server, save the response in GlobalState, and render it.

I've achieved my goal, but my solution feels bad. I'm new to Leptos and can't find an appropriate example. Is my solution bad? How can I do this properly?

#[derive(PartialEq, Serialize, Deserialize, Clone)]
pub struct User {
  pub username: String,
}

#[derive(Default, Clone)]
struct GlobalState {
  user: Option<User>,
}

#[component]
pub fn HomePage() -> impl IntoView {
  let curr_user_res = create_resource(
    || (),
    |_| async move {
      let state = expect_context::<RwSignal<GlobalState>>();
      match state.get().user {
        None => get_user().await, // get_user() is server function that returns the User struct
        Some(user) => user,
      }
    },
  );

  view! {
    <Suspense fallback=move || {  view! { <h1>"Loading..."</h1> } }>
      {move || {
        let state = expect_context::<RwSignal<GlobalState>>();
        curr_user_res
          .get()
          .map(|curr_user| {
            state.update(|it| it.user = Some(curr_user.clone()));
            view! { <h1>"Welcome, "{curr_user.username}"!"</h1> }
          })
      }}
    </Suspense>
  }
}

I don't like to do state.update(...) in Suspense because the struct may already be there, but I can't move it to resource fetcher because it makes unnecessary get_user() request in "SSR (get_user()) -> (hydrated) navigate to another page -> (hydrated) navigate back (get_user())" case.

[gbj]

Why not just create the resource and share it via context? Resources can be mutated/updated, if you need to change it later. Is there a reason you want to store the same data separately in a signal?

[levap5]

I didn't get it. How can .update() help in my example? The resource's fetcher runs when a resource is created, right? I need to fetch from login() or get_user() server function, depending on the rendered component (LoginPage - only when the button clicked, or UserPage). I can't change the resource fetcher, right? So, where should I create the resource? Where should I provide it? What should be in the fetcher? Sorry if I'm asking questions that have obvious answers; I don't have much experience with Leptos.

[gbj]

In App, where you currently provide the signal, instead do this:

    provide_meta_context();
    let curr_user_res = create_resource(
        || (),
        |_| async move {
            match state.get_untracked() {
                None => get_user().await.unwrap(),
                Some(user) => user,
            }
        },
    );

    provide_context(curr_user_res);

In LoginPage, get the resource out of context, and update the resource in the event listener rather than updating the signal

#[component]
fn LoginPage() -> impl IntoView {
    let username_element: NodeRef<html::Input> = create_node_ref();
    let state = expect_context::<Resource<(), Option<User>>>();

    let on_submit = move |ev: ev::SubmitEvent| {
        ev.prevent_default();
        let username = username_element
            .get()
            .expect("<input> should be mounted")
            .value();
        spawn_local(async move {
            let user = login(UserLogin { username }).await.unwrap();
            state.update(|it| *it = Some(user));
        });
    };

In UserPage, get that same resource out of context and read it instead of creating the resource there.

[levap5]

I've tried this, but it appears to be even more suboptimal. In App, I can't do exactly

       |_| async move {
            match state.get_untracked() {
                None => get_user().await.unwrap(),
                Some(user) => user,
            }
        }

as fetcher because there is no signal now. I can only do |_| async { get_user().await.unwrap() }, which calls get_user() on every page. I don't need this on Login page, and there will be other public pages that must be rendered regardless of user authentication. This is why I provide the signal in App - it doesn't make the request or function call.

[gbj]

Ultimately, there are many number of ways to handle this, right?

• Your solution, where you synchronize a resource with a signal — fine. (Probably better done with an effect than doing it during rendering in Suspense).
• The solution I suggested, which will load the user once during server rendering, then set it whenever you log in/out. (This doesn't reload the resource every time you navigate between pages on the client.)
• Use nested routing, providing a wrapping parent Route around the only pages you want to load the user data (Login and UserPage), loading the resource in the parent route and providing it to the children

It's your application; you can pick whichever one's appropriate for your needs.

[levap5]

This doesn't reload the resource every time you navigate between pages on the client.

Yes, but a user can open a public page directly, not through the client navigation, and the unnecessary function call will be executed :)

But you are right; there are many ways to handle this. I just wasn't sure about my solution. I'll experiment with nested routing or try to improve my solution. Thank you.