This article is also cross-posted in —
React is all the rage these days and IMHO developing websites feels a lot easier with React. Of course, you can use and favor other frameworks too but I'm gonna limit the context of this post to React affictionados.
Let's get a little more into why all these things happen.
React loads the site into DOM after this line is invoked.
ReactDOM.render(<App />, document.getElementById('root'));
What this means it, the whole DOM, styles and behavior of the site is initialized only after the
bundle.js is loaded and executed.
Unfortunately that's how search engines look at your site during indexing. So if you create your site with just React, only your page title will be indexed and nothing else inside your React code will be indexed.
Other than SEO implications, loading your site without the DOM in the first load (paint) increases your TTI metric. If you could load the DOM in the first load before loading your scripts, you'll drastically improve the UX.
SSR Websites and Static Websites are two different things. SSR pages are rendered from a server on each request where as static pages are generated during build time.
Ideally, only event handlers and complementary data should be loaded and attached after the first render.
Of course there are a lot other options and reasons to choose your right tool but personally these two will be enough for most preliminary requirements.
Other points to argue
In other news, I'm totally smitten and unfathomably in love with Gatsby ❤️
Going forward, I'm planning to build all my side projects in Gatsby this year. I created a Gatsby starter boilerplate with added configurations over default Gatsby starter - Gatsby Boilerplate.
My Gatsby based sites so far
You are amazing! ✨