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

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 💻