getRandomId used for components ID is not compatible with Nuxt SSR

[ambroisemaupate]

Hello vue-dsfr team!

When using Nuxt 3
Every component used in Nuxt server-side rendering will lead to Hydratation mismatch errors

When used in Nuxt 3.10+ context, all component may call useId method which provides an isomorphic ID between server and client

https://nuxt.com/docs/api/composables/use-id

[laruiss]

Oui, tout à fait, et j’ai fait en sorte que tous les id puissent être transmis en props. Libre donc à vous d’utiliser useId pour donner un id compatible SSR. Si vous pensez que j’en ai oublié, faites-le moi savoir.
Nous ne souhaitons pas embarquer une dépendance en plus qui ne concerne que ceux qui utilisent Nuxt.

[ambroisemaupate]

Hello @laruiss

Merci pour ta réponse.

Je crois qu'il reste des getRandomId sans override possible dans les composants :

• SideMenu : https://github.com/dnum-mi/vue-dsfr/blob/main/src/components/DsfrSideMenu/DsfrSideMenu.vue#L74
• Tabs : https://github.com/dnum-mi/vue-dsfr/blob/main/src/components/DsfrTabs/DsfrTabs.vue#L58

[laruiss]

Pour les tabs, il y a tout ce qu’il faut pour mettre des ids et que la fonction getRandomId ne soit pas appelée.

Pour SideMenu, j’ai fait la correction, elle sera disponible très bientôt.

[ambroisemaupate]

Je crois que sur le DsfrNavigation, la prop id n'est pas propagée aux DsfrNavigationItem, mais directement au DsfrNavigationMenuLink sous-jacent. Du coup on a des hydratation mismatch sur les DsfrNavigationItem:

https://github.com/dnum-mi/vue-dsfr/blob/v5.18.2/src/components/DsfrNavigation/DsfrNavigation.vue#L80C8-L80C26

A-t-on vraiment besoin d'un id sur DsfrNavigationItem ? Il n'y a pas d'aria-* sur ce composant.

https://github.com/dnum-mi/vue-dsfr/blob/v5.18.2/src/components/DsfrNavigation/DsfrNavigationItem.vue

[laruiss]

Oui, il le faut pour savoir si je dois déplier un menu ou un mega-menu