Introduction 🤓
Yo, yo, yo! Guess who's back?! 🤙 I've not been posting here for some long amount of time 😅. However, it's time to change that! I won't be able to post here daily as I've got a lot of side projects, but I'll try my best to be more active! This post is quite short, but it should be enough to cover the subject. If not, then let me know in the comments what else you want to know 😃. Ok, let's get back to the topic! 🔥
Create React App vs NextJS
Many developers are questioning themselves if they should use either Create React App (CRA) or NextJS to create a project. In this post, I’ll give you a quick overview of Create React App and NextJS, show some pros and cons of each, and then I’ll point out in which case I would use them. However, you should know that they are kind of different technologies, so I won’t strictly compare them.
Also, you must remember that there are no bad or good technologies (except PHP - it’s bad 😝 ). Everything depends on the need of the project.
Create React App
Create React App is a standalone command-line tool used to generate a new React project. Project created with Create React App is using client-side rendering (CSR) solution. That means the browser gets mostly an empty HTML document with just links to your CSS and JavaScript bundles. In this case, the user will need to wait for all bundles to load and then have the virtual DOM moved to the browser DOM for the page to be viewable.
NextJS
NextJS is a framework that is built on top of React library. It was developed by Vercel (formerly Zeit). It uses a server-side rendering (SSR) solution to render the project in the browser. In this case, the browser will receive from the server’s response a ready-to-be rendered HTML document of the page. That means the user can start viewing the page while the process of building a virtual DOM and attaching events is in progress. Also, there is a command-line tool called Create Next App, which bootstraps a Next.js app.
Create React App - Pros
Pros
- You can host your app on any file host as it’s rendered on client-side
- Website is rendered pretty fast after the initial slow load
- Avoids constant full page reloads
- Only one build dependency - react-scripts
- Supports TypeScript out of the box
- It’s very well maintained
Create React App - Cons
Cons
- Initial load time can be slow due to the requirement of rendering the JS bundles
- It has a negative impact on SEO, which can be solved using pre-renderer
- Client-side rendering causes higher memory consumption on client-side devices
- It’s quite hard to add custom build configs
NextJS - Pros
Pros
- SEO is not impacted due to HTML being rendered on the server-side and directly passed to the browser
- It provides an easy-to-use routing system out of the box
- Initial page load is crazy fast - the advantage of SSR
- It’s kind of easy to deploy when using the Vercel platform (CI/CD provided)
- Easy to add custom build configs
- Supports TypeScript out of the box
- It’s very well maintained
NextJS - Cons
Cons
- Higher server consumption as every page load is rendered on the server-side. However, this can be reduced by cache implementation.
- Higher server consumption increase its cost
- It’s hard to customize provided routing system if there is such a need
When to use each?
React
When building web applications or gated web applications (the ones that can be accessed only after login).
NextJS
When building a landing page, eCommerce shop, marketing website, or another website where we care about SEO.
Meme for today
