Fouc in SPA mode with tailwindcss in production mode

[oxSaturn]

Reproduction

I built a site with tailwindcss in remix SPA mode, and it's deployed on cloudflare page here https://venft-lookup.pages.dev/

As you can see in the below screenshot, there's a flash of unstyled content:

CleanShot-xX4JdCH0.mp4

Code is hosted on https://github.com/oxSaturn/venft-lookup, but I can't reproduce it on dev env.

System Info

System:
    OS: macOS 14.2.1
    Shell: 3.6.1 - /opt/local/bin/fish
  Binaries:
    Node: 18.17.1 - /usr/local/bin/node
    Yarn: 1.22.19 - /usr/local/bin/yarn
    npm: 9.6.7 - /usr/local/bin/npm
    pnpm: 8.14.1 - /usr/local/bin/pnpm
    bun: 1.0.21 - ~/.bun/bin/bun
  Browsers:
    Edge: 120.0.2210.133
    Safari: 17.2.1
  npmPackages:
    @remix-run/dev: ^2.5.0 => 2.5.0 
    @remix-run/node: ^2.5.0 => 2.5.0 
    @remix-run/react: ^2.5.0 => 2.5.0 
    vite: ^5.0.0 => 5.0.11

Used Package Manager

pnpm

Expected Behavior

No fouc in production.

Actual Behavior

Fouc in production.

[brophdawg11]

This looks like it's 2 underlying issues:

1. The <Meta> component rendering on the server is rendering matches past the root and including the meta information from the _index.tsx route. This causes a hydration issue because we hydrate only the root route. This is a bug we'll get fixed.
2. Even with (1) fixed, Cloudflare doesn't seem to be adding any caching headers on on the root stylesheet, so when react flips from the root HydrateFallback to the root component, and renders a new <Links> component, react seems to remove the old stylesheet and replace it with a new link tag (which is not render blocking because we've already rendered the document). It feels like react should be able to use the same link tag vi vdom diffing because it doesn't change, but for now the solution there is to add cache-control headers on your static assets in cloudflare.

[brophdawg11]

Fix by #8538 and will be available in 2.5.1 when released 👍

[github-actions]

🤖 Hello there,

We just published version 2.5.1-pre.1 which involves this issue. If you'd like to take it for a test run please try it out and let us know what you think!

Thanks!

[oxSaturn]

This looks like it's 2 underlying issues:

1. The <Meta> component rendering on the server is rendering matches past the root and including the meta information from the _index.tsx route. This causes a hydration issue because we hydrate only the root route. This is a bug we'll get fixed.
2. Even with (1) fixed, Cloudflare doesn't seem to be adding any caching headers on on the root stylesheet, so when react flips from the root HydrateFallback to the root component, and renders a new <Links> component, react seems to remove the old stylesheet and replace it with a new link tag (which is not render blocking because we've already rendered the document). It feels like react should be able to use the same link tag vi vdom diffing because it doesn't change, but for now the solution there is to add cache-control headers on your static assets in cloudflare.

1. I've updated to 2.5.1-pre.1 to test
2. seems cloudflare did cache it now (didn't check it before), but still fouc problem, am I misunderstanding something?

[brophdawg11]

That's not a cached version - a 304 means the request went to cloudflare and cloudflare responded with "nothing has changed" - but I think since it's still a net new request/response the old styles are removed and the new ones appliued causing a brief FOUC.

Instead you want to make sure you have a proper Cache-Control header on your static assets so that the browser never even makes a request (and you don't even see the 304)

[github-actions]

🤖 Hello there,

We just published version 2.5.1-pre.2 which involves this issue. If you'd like to take it for a test run please try it out and let us know what you think!

Thanks!

[github-actions]

🤖 Hello there,

We just published version 2.5.1 which involves this issue. If you'd like to take it for a test run please try it out and let us know what you think!

Thanks!

[oxSaturn]

That's not a cached version - a 304 means the request went to cloudflare and cloudflare responded with "nothing has changed" - but I think since it's still a net new request/response the old styles are removed and the new ones appliued causing a brief FOUC.

Instead you want to make sure you have a proper Cache-Control header on your static assets so that the browser never even makes a request (and you don't even see the 304)

Thanks, pushed a header of Cache-Control https://github.com/oxSaturn/venft-lookup/blob/main/public/_headers, so far it works well.