Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

HashedStylesheet and Meta lead to meta mixing #3633

Closed
alexichepura opened this issue Feb 18, 2025 · 2 comments
Closed

HashedStylesheet and Meta lead to meta mixing #3633

alexichepura opened this issue Feb 18, 2025 · 2 comments

Comments

@alexichepura
Copy link

Describe the bug
Meta register should not be called twice in shell, otherwise it's breaking meta tags.
So adding HashedStylesheet to shell leads to meta mixing/breaking, because it's using meta register. Changing it to use plain view!{<link... resolves the issue.

Leptos Dependencies
0.7

To Reproduce
Steps to reproduce the behavior:

  1. Go to ssr modes axum
  2. Comment Stylesheet in App and add <HashedStylesheet id="leptos" options=options /> to the shell.
  3. Wrap post suspend in a closure. This is required to react on post id change, like going from /post/0 to /post/1 by <A> tag.
    https://github.com/leptos-rs/leptos/blob/main/examples/ssr_modes_axum/src/app.rs#L201
    let post_view = move || {
        Suspend::new(async move {
  1. Add this snippet to App for navigation between posts
<div><a href=format!("/post/{}", 0)>post 0</a></div>
<div><a href=format!("/post/{}", 1)>post 1</a></div>
<div><a href=format!("/post/{}", 2)>post 2</a></div>
  1. Navigate between posts
  2. See meta mixing

Screenshots

Screen.Recording.2025-02-17.at.18.23.40.mov

Additional context
Coming from #3629
gbj added a commit that referenced this issue Feb 25, 2025
@gbj
fix: avoid hydration issues with HashedStylesheet (closes #3633)
5c47a30
@gbj
Copy link
Collaborator

gbj commented Feb 25, 2025

Ah, ok. This is an interesting kind of hydration error.

Like most hydration errors, it happens because you are rendering different things on the client and on the server; but it happens in a confusing way, because of the particularities of how leptos_meta works, and how HashedStylesheet works.

In particular: note that in this example (where you put HashedStylesheet in the shell), you are only calling HashedStylesheet on the server, and not on the client. This means that on the server, there are 3 metadata tags rendered by <MetaTags/>: the <link> for the HashedStylesheet, and then the two <meta> tags from the <Meta/> components (one in the App component and one in Post).

On the client, however, there are only two meta tags hydrated: the two <meta> tags (because HashedStylesheet is not run in App). You can see that as a result it hydrates the wrong elements in the <head>: you can see it updating the color-scheme tag with the description, etc.

Normally I'd say to move HashedStylesheet into App but it takes LeptosOptions, which is not normally available on the client.

PR #3654 would fix this by only allowing HashedStylesheet to be used in the shell (which is already the only real possibility), and then handling it correctly. I think it's technically (?) breaking, although I can't imagine anyone would want to/be able to use HashedStylesheet outside the shell anyway, so I've made it against the leptos_0.8 branch.

@alexichepura
Copy link
Author

Yep, i did just the same in my application.
HashedStylesheet is using std::fs::read_to_string so only for server and no breaking change i think.
Workaround is easy so 0.7 can be skipped and we wait 0.8.
Merge and close this issue?)
Thank you!

gbj added a commit that referenced this issue Feb 26, 2025
@gbj
fix: avoid hydration issues with HashedStylesheet (closes #3633) (#…
1e0a9ef 
…3654)
@gbj gbj closed this as completed Feb 26, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@gbj @alexichepura