search

db-ui / mono

DB UX Design System Monorepo - Provides Design Tokens and components for Web UIs
https://db-ui.github.io/mono/
Apache License 2.0
65 stars 7 forks source link

DBNavigationItem hydration mismatch when used with SSR #2395

Open andre-bartak opened 7 months ago

andre-bartak commented 7 months ago

Which generators are impacted?

Reproduction case

Nuxt 3 @db-ui/v-components@0.0.68

The SSR generated DOM for the DBNavigationItem differs to the client generation.

Background: apparently due to the use of internal functions that provide random generated ids for the sub-navigation in the DBNavigationItem component the output of SSR and Client can't be the same

Expected Behaviour

Serverside and Clientside should render the same DOM. Otherwise this could lead to bugs or performance issues.

Screenshots

hydration_mismatch

Browser version

None

Add any other context about the problem here.

No response

nmerget commented 7 months ago

@andre-bartak thanks for your issue :)

Yes, we have some issues with SSR at the moment. We want to face those in Q2, right now we are focused on SPAs to release a beta. But the next steps would be to have SSR showcases with the most common frameworks (Next, Nuxt, ...). And I believe we need to change some components and/or find another solution for the hydration.