Simple solution for SSR flickering

This is a simple solution if your background color is flickering on loading when using SSR. For example, a site with a black background flashes white on loading. That’s because your browser doesn’t know the background color before the site is loaded.\

So the problem is general, and the solution is pretty specific. I used Gatsby with Netlify and had this problem since I have a black background color.\

In gatsby-ssr.js, I added:

exports.onRenderBody = ({setBodyAttributes}) => {
    
    setBodyAttributes({
      style: {
        backgroundColor: '#000000',
      },
    });
  }

Adding this code, the background color is set before the site is built, so no more flickering.

-

That’s it, small hacks are easy :)