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

[Fbasham]

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:

What appears to be injected styles in the head:

After scripts are disabled:

[ethanWallace]

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.