The difference between create-react-app, server-side rendering, and Gatsby

Charles Stover
Jan 3 · 4 min read

It may not be obvious which rendering method you want to choose for your application. This article will teach you what the differences are so that you can make an informed decision when creating your next React application.

create-react-app 🎨

More accurately, react-scripts is a collection of tooling for your React application. It comes with its own development server and build configuration. This build will generate static assets for client-side rendering; but it does not support server-side rendering, and it is not the same as the way Gatsby renders.

After running the react-scripts build command, you will find yourself with a newly-created build directory in your project folder. The build directory contains a minimal HTML and a JS bundle that tells the browser how to construct the rest of the DOM. If you are using react-router, this DOM construction will take the URL in the browser into consideration. All URLs output the same HTML and JS bundle.

if (url === PAGE1) {
buildPage1Dom();
} else if (url === PAGE2) {
buildPage2Dom();
} else {
// ...
}

No matter what URL you send to the server, you get the same HTML and JS bundle.

Server-side rendering 💻

Server-side rendering (often abbreviated SSR) takes the requested URL sent to the server, builds the HTML on the server, then sends you the finalized HTML and the JS bundle. The JS bundle will allow you to build the other pages without re-requesting from the server.

if (newUrl === PAGE1) {
buildPage1Dom();
} else if (newUrl === PAGE2) {
buildPage2Dom();
} else {
// ...
}

This the same behavior you saw with the build directory. The difference with server-side rendering is that the HTML you started with is not an empty canvas. That first buildPageDOM() was already executed, the DOM was already populated, and the HTML you received already had all the elements in it. If your server can generate the DOM faster than your client (which it generally can, especially with caching), this can be a performance boost for your users. Often more importantly, this can be a boost to your search engine ranking, as the search engine is not required to build your page DOM either and can immediately scan for keywords associated with your webpage.

Gatsby 🥚

Gatsby is a React build tool that uses “server-side” rendering to build every page up front. When your customers request a page, your server does not need to build it — it has already been built. The customer just receives the static file that was generated whenever you built your Gatsby project. This static file should be identical to what server-side rendering would have generated on the fly, because the majority of projects won’t be any different on a per-request basis. For most projects, Gatsby will be faster, since the HTML for every one of your pages is pre-constructed.

In some cases, you won’t want that to happen, as the HTML may change on a per-request basis. This could happen on pages such as “My Account,” where the contents depend on the user, or search results which need to be updated rapidly. In many such cases, server-side rendering could be the better choice.

Summary ✅

Gatsby prebuilds all of your URLs’ HTML before your project ever gets sent to your production servers. This requires no server-side code to execute, no NodeJS, no PHP, nothing. The output is simply static HTML files. They can be hosted anywhere that supports static files: GitHub Pages or any free host.

Server-side rendering builds your webpage’s HTML on a per-request basis before ever sending it to the client. This gives a performance benefit closer to Gatsby than create-react-app’s build offers, but it requires server-side processing, such as NodeJS. Unlike Gatsby, this allows each request to be uniquely generated, which may be a required feature of your project. If this functionality is not a necessity for your project, Gatsby is likely the better choice.

create-react-app's build does not prebuild any of your DOM. It generates a blank canvas, and the JavaScript bundle builds the DOM for your client. Like Gatsby, these files are static and do not require server-side execution to run. It does not require NodeJS. You can host your create-react-app build output on GitHub Pages or anywhere else that can serve plain HTML and JavaScript files.

Conclusion 🔚

If you have any questions or great commentary, please leave them in the comments below.

To read more of my columns, you may follow me on LinkedIn and Twitter, or check out my portfolio on CharlesStover.com.

Charles Stover

Written by

Senior Full Stack JavaScript Developer / charlesstover.com

More From Medium

More from Charles Stover

More from Charles Stover

A React hook for asynchronous state.

233

More from Charles Stover

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade