How to Fix CSS Caching Issues in React Sites?

When you set up Prerender.io , it should cache everything necessary to display your website correctly, including HTML, stylesheets, and scripts. However, in some cases—especially when using React and libraries like Material UI—the styles may not render properly.

How to tell there's a problem?

• Unstyled content: When you view the saved version of your site, it looks plain or broken, like it’s missing all the visual design.
• Console Warnings: You might see console messages in browsers (like Firefox) indicating that unstyled content flashes while the page is loading. This issue mainly arises from how CSS in Material UI is added using JavaScript, rather than being included as static files that browsers can save and reuse (cache).

Breaking Down the Solution

The good news is there's a practical fix: tweak your emotion-js setup—a tool Material UI uses for styling. By turning off the "speedy" mode during server-side rendering, styles can be properly applied and shown when the page is saved and reused by Prerender.io.

Step 1: Check the User Agent for Prerender

You need to check whether the page is being prerendered by identifying if the browser's user agent string includes “prerender.” Further details: Verifying the integration.

Step 2: Create a Cache Configuration

You need to set up an Emotion cache compatible with your React app’s structure.
Here’s how to modify your App.js file to do that:

import { CacheProvider } from '@emotion/react';
import createCache from "@emotion/cache";

// Check if the user agent is Prerender. Speedy should be false if so.
const speedy = navigator.userAgent.toLowerCase().indexOf("prerender") === -1;

// Create an emotion cache
const emotionCache = createCache({
  key: "emotion-cache",
  speedy: speedy,
})

function App() {
  return <CacheProvider value={emotionCache}>
  </CacheProvider>
}
 
export Default App;

Code Explanation

• CacheProvider: This component wraps your entire application and provides the necessary context for Emotion’s styling to work.

• createCache: This function creates a cache for Emotion (a styling library). Setting the speedy option to false helps make sure that styles are correctly included on pages that are prerendered on the server.

Step 3: Adjust Your Server-side Rendering Logic

Make sure your middleware setup in Express is designed to handle prerendering requests and defines the routes you intend to cache. Below is an example that fits this setup:

app.use("/", (req, res, next) => {
  // URLs that don't include extensions are assumed to be pages
  const extRegex = /.\w+\/?$/;
  if (!extRegex.test(req.url)) {
    req.url = "/index.html"; // Set to index.html for React Router
  }
  next();
}, express.static(BUILD));

Conclusion

By following these steps, you should be able to fix the issue of Prerender.io not caching your site’s CSS. This ensures that your React application preserves its styling even when viewed from a cached version. The result is a better user experience and improved SEO, thanks to a more visually polished website.

If you still face problems, double-check your cache settings or review your server configuration. Happy coding!