Migrate to Next.js's app/ Directory

[dysbulic]

What would you like to be added?

So, neither <CacheProvider> nor @emotion/server worked to end the FOUC.

The documentation for CacheProvider suggests that it useServerInsertedHTML only runs once in the pages/ directory structure, and it is before rendering is complete.

An option is to migrate to Next.js's app/ server-rendered directory structure.

The question is as to whether client-rendered component styles would be captured by this method. Since almost all our components rely on accessing a Context & components that use Context have to be client-side, it's entirely possible this won't help.

Why is this needed?

There is a second or more of unstyled content when the page first loads.