DBNavigationItem hydration mismatch when used with SSR

[andre-bartak]

Which generators are impacted?

• All
• HTML
• React
• Angular
• Vue
• Web components
• Power Apps

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

Browser version

None

Add any other context about the problem here.

No response

[nmerget]

@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.

[timgrohmann]

+1, this also happens with different frameworks and components, we're experiencing issues with React / NextJs and the DBTabs Component, which uses random UUIDs as element ID.