CREATE-REACT-APP VS GATSBY VS NEXT.JS | Which one to choose? Depending upon your website.

Create-react-app VS Gatsby VS NEXT.js

Being a web-developer, we have probably heard any one of these or all of these. These all are to build react application without having handle the bundling of app which help us in ease in setting up an REACT applications.

CREATE-REACT-APP

Create-React-App is a tool for the REACT development with zero configurations. It supports only a client side rendering which means the browser build the HTML code that gets served to the user whenever user navigate on different page or routes on the REACT application.

Creact-React-App Flow

From above picture we can see that whenever client tries to navigate to different routes. It request for HTML code. The code we got in REACT is compiled in client machine and send to the client within its machine. The browser engine helps to compile our REACT code into a browser understandable HTML code.

NEXT.JS

Next.js is a framework that allow us to write code in the REACT and support server-side rendering. Server-side rendering is almost exactly same as a client-side rendering, except instead of letting the browser engine to compile and generate the HTML code it let backend server to generate HTML code.

NEXT.js FLOW

Server will generate HTML code using our REACT code and this way more robust because our backend server is obviously more powerful and it is capable of generating fast compare to browser. So, we will use NEXT.js when we need to build a robust and large website that end up having really complex logic to build out the views.

Thing to remember:
Create-React-App and Next .js are both dynamically generated which means that we directly generate HTML whenever the browser navigates to different routes. So, these are all live generated.

Gatsby

Gatsby is the static generated website which means that all of the code that build HTML pages that end-up comprising our application is all done at the build step. Similar, to the npm run build in REACT app.

Gatsby Flow

When we push our Gatsby code to a server they will run the build script, which will automatically generate the static HTML that a browser end up using in order to display the views. Hence, none of the code that is dynamically generated. It is generate way ahead of the time when we push code on the server.

So these are the main difference with GATSBY. So its really good when we wanna build static websites that generally don’t need to change that views time and again.

SUMMARY (Which one to use)

• GATSBY
  - Static web site (Like: Blog)
  - Conversion of REACT code take place during build process
• NEXT.js
  - Large website and complex logic
  - Conversion of REACT code take place in backend server
  - Server Side Rendering
• Creact-React-App
  - Small website
  - Conversion of REACT code take place in client-machine by browser engine
  - Client Side Rendering

Thank you :)
Follow me @beevekmgr