search

cds-snc / gcds-components

GC Design System Components is a monorepo managing the web components of the GC Design System. | « GC Design System Components » (Composants de Système de design GC) est un référentiel unique qui gère les composants Web de Système de design GC.
https://design-system.alpha.canada.ca/
MIT License
36 stars 11 forks source link

Hydration issues when using SSR frameworks like Next.js and Remix #377

Open Fbasham opened 8 months ago

Fbasham commented 8 months ago

When integrating the GC Design System with metaframeworks that support SSR, like Next.js and Remix, there are hydration issues that appear in the console.

What appears to to be happening is that the initial page load will happen on the server with GC Design Components loading as much of their content as possible, then the subsequent hydration of styles will take over on the client. It appears that styles are injected into the head of the document on the client.

It would be nice if there was any guidance on how to resolve this issue. Can the GC Design System be used with SSR without needing to load styles on the client? Can components be loaded server side? Is the GC Design system primarily used with SPA applications?

The following images are coming from a Remix application using the GC Design Design System.

Errors in the console:

image

What appears to be injected styles in the head:

image

After scripts are disabled:

image

ethanWallace commented 8 months ago

At the current moment, the GCDS does not work well in SSR environments since it is built with web components but with that being said we are currently developing a package that would take advantage of declarative shadow-dom to allow SSR. You can follow the progress on the gcds-components-ssr branch.

We are doing a majority of the testing with Nextjs but will make sure to document the results working with Remix as well.