Hi devs. Let's talk about the major changes in React and how to create new React applications. Before starting, you may want to watch the 10 minute video version (with visual animations) of this post for better understanding.
Let's continue for the others.
As you know, the React team released the new documentation last March. And we were expecting some updates on how to create new react applications. Because some people were complaining that create-react-app was too slow and outdated. And we thought they would update create-react app or recommend using Vite instead.
But after the new documentation was released, something surprising happened. Because on the installation page, they now recommend using a framework instead of the pure React library.
Well, for developers who already know React, it makes sense. Because now we know the future vision of the React team. (Obviously, it's the Server side rendering). But when it comes to beginners and developers who create React apps but aren't quite into frameworks, that installation page might be a little bit confusing. I know that because I see many posts on social media, and people seem to be lost.
To clear the confusion, let's define and compare them (React and it's most popular framework: Next.js).
What's React?
React is a Javascript library for building user interfaces. It's primary goal is to minimize the bugs that occur when developers are building UIs. To do that it uses JSX (JavaScript XML) and it allows us to write HTML in React.
<div className="sidebar" />
compiles into
React.createElement(
'div',
{className: 'sidebar'}
)
It's great because now, we can implement JavaScript code into HTML elements without using complex and long Vanilla JavaScript codes in a different file.
What's Next.js
Next.js is a production framework for React and used on top of React. It means it still uses all the React features but also expanding its capabilities and streamlining the development process.
Basically React and Next.js are not two different things. To use Next.js you should already know React.
Should a Beginner Start Learning React with Next.js
Sure you can start learning React with a framework as the documentation recommends, but in this case you won't be able to fully understand why exactly you are using a framework.
It’s not exactly the same thing I know, but it's like recommending Typescript to JavaScript learners. And explain to them why they should use it and what are the possible difficulties they might face if they don't.
You can convince them, and they can learn Typescript. But for me, the best way to comprehend why one option is superior to the other is to use both of them and observe their strengths and weaknesses. Then it’s easier to make a choice and compare options.
In my opinion, they should first use plain React, make some small applications then learn a framework and see the differences.
What Are the Differences
- Purpose
While React focuses on building UIs and components, Next.js is a built-in solutions for developing web applications. It means, it is easier to create simple single page applications using Pure React and it's more effective to create full-stack applications using Next.js.
- Routing
By default React does not have any routing tool. If you need to create multiple pages and navigate between them you should install a library like react-router-dom and create each path in the main file of the application. On the other hand, Next.js comes with an advanced routing system and you can navigate between different pages by using only App directory
React.js Routing
const router = createBrowserRouter([
{
path: "/",
element: <Layout />,
children: [
{
path: "/",
element: <Home />,
},
{
path: "/posts",
element: <Posts />,
},
{
path: "/contact",
element: <Contact />,
}
],
},
]);
Next.js Routing
- Rendering
React renders pages on the Client side (CSR) and Next.js renders them on the Server side (SSR) by default.
How CSR and SSR Work?
There is a visual explanation in the video above but let me explain here as much as I can.
CSR
An HTTP request is made to the server. The server receives the request and sends an empty HTML file and a bunch of bundled JavaScript as a response. And your browser process those bundles and renders the final HTML file. So the initial page load speed of the application can be slow because of this process. (Of course, we are talking about a large project that has a really big bundle size. It doesn’t mean every app is slow).
SSR
An HTTP request is made to the server. The server receives the request, and processes all (or most of) the necessary code and creates an HTML file and sends it to the browser and the browser shows it to the user directly. It makes the initial speed of the app faster. And since it shows the HTML file directly, it's easier to index pages by search engines. But since everything happens on the server side, you won’t be able to interact with the user. If you want to create an event, you have to create a client-side component. So if you have a highly interactive website, it might be really annoying.
- When to Use React and Next.js
Don't forget you can create all your apps using a React framework even if they are fully client side, and you can create all your apps using Vanilla React even if you have many pages and fetching processes. But here are my recommendations.
- When to Use Pure React
- When learning React.
- When creating basic single page applications (portfolio, agency website etc.)
- When creating highly interactive websites (creative apps, user/admin dashboards etc.)
- When to Use Next.js
- When you have multiple pages and SEO is important.
- When your app is too large and you need code splitting.
- When you want to create an API without using any other frameworks (Express.js etc).
Thanks for reading
Lama Dev
🔥 The YouTube Channel
⚡️ Web Developers Facebook Group
👾 Web Developers Discord Server
👉 Instagram
Top comments (0)