Server-side data fetching not re-rendering

Problem
Merging the server-side rendering+data-fetching example, and the server-side routing example results in empty renders when navigating back to the component that uses server-side fetching.

It's entirely possible I've made a mistake in transcribing the examples, but I can't

Steps To Reproduce
Steps to reproduce the behavior:

I combine the examples here in this repository (ignore the Bazel stuff, that's additional work)
trunk build index.html
cargo run --features=ssr --bin simple_ssr_server -- --dir dist/
Navigate to localhost:8081 – see nav + random uuid rendered
Click the "Hi" link – see nav + "Hi" rendered
Use the back button, or click the "Home" link – see only nav rendered
Reload the root page - see nav + random uuid rendered

Expected behavior
Either cached value from the first render, or re-render with a new random uuid

Screenshots
Initial load:

After clicking "hi" link:

Clicking "home" or via browser back button:

Environment:

Yew version: yew: 0.20.0 yew-router: 0.17.0
Rust version: 1.64.0
Browser and version, if relevant: Safari 16.1 & Chrome 107.0.5304.121

Questionnaire

I'm interested in fixing this myself but don't know where to start
I would like to fix and I have a solution
I don't have time to fix this right now, but maybe later

The repository link is broken. Can you make sure the repository exists and is publicly accessible

The repository link is broken. Can you make sure the repository exists and is publicly accessible

oops 😓 , it should now be public, sorry

@snapbug

@snapbug you have a error in the console:

simple_ssr_hydrate-a29c5ab3795cfc5.js:342 panicked at src/lib.rs:47:10:
     called `Option::unwrap()` on a `None` value

it is coming from this line:

let uuid = use_prepared_state!(async move |_| -> Uuid { fetch_uuid().await }, ())
    .map_err(|e| {
        println!("error: {:#?}", e);
        e
    })?
    .unwrap();

On the server side , when calling use_prepared_state, fetch_uuid() is called and it results in Ok(Some(uuid))
On the client side, when calling use_prepared_state, fetch_uuid() is not called and it results in Ok(None)

Then it explains that calling ?.unwrap() on the client side result in the above error

This behavior is described here: #2649 (comment) :

During client-side rendering hydration, it will return Ok(None) if:

The component is not hydrated.
The deps passed during the hydration do not match deps associated with the server-side rendered result.

@hamza1311 @futursolo could we have a example of when "the deps passed during the hydration match deps associated with the server-side rendered result"?

Is there any ideas on this issue?

Navigation Menu

Repository navigation

Server-side data fetching not re-rendering #3023

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Server-side data fetching not re-rendering #3023

Description

Activity

ranile commented on Dec 10, 2022

snapbug commented on Dec 10, 2022

christobill commented on Feb 28, 2024

bio-aeon commented on Dec 4, 2024

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions