CODEWITHSUNDEEP
reactjsserver-side-rendering
sunknudsen
sunknudsen

Reputation: 7310

What can cause fonts and images to be downloaded twice when using React with SSR?

I am using create-react-app and have configured SSR using an Express server.

When I disable JavaScript, everything works perfectly (assets are downloaded and displayed).

When I enable JavaScript, the website loads from server as expected but then hydrate triggers assets to be downloaded again (somehow, these assets are not cached by Firefox).

React double request bug

Here are the headers for /static/media/fonts/open-sans-latin-400.woff2 (both requests appear to be identical except for Accept-Encoding: gzip, deflate vs Accept-Encoding: identity).

First request

Second request

What can cause this behavior?

Upvotes: 2

Views: 556

Answers (1)

sunknudsen
sunknudsen

Reputation: 7310

Found the issue...

I use Express to serve static assets.

By default, express.static is set to not cache assets (Cache-Control: public, max-age=0).

The following solved the caching issue that caused fonts and images to be downloaded twice.

$ cat .env
EXPRESS_MAX_AGE=60000

const expressStaticOptions = {
  maxAge: process.env.EXPRESS_MAX_AGE ?? 0,
}
app.use(express.static(join(__dirname, "build"), expressStaticOptions))

The reason I don't set 60000 by default is to handle caching config using Nginx in production.

Upvotes: 1

Related Questions