Scribd
Upload
15 views

Next - Js Vs React - What Are The Differences

Uploaded by

holircon1218
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
15 views

Next - Js Vs React - What Are The Differences

Uploaded by

holircon1218
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 5

12/1/24, 12:32 PM Next.js vs React – What are the Differences?

Next.js vs React – What are the Differences?


freecodecamp.org/news/next-vs-react

freeCodeCamp April 3, 2023

By Nishant Kumar

Hey everyone! Next.js 13 is trending these days, and it's a great time to learn it. But what
even is Next.js? What is pre-rendering in Next.js, and why do we use it?

Well, let me explain.

https://www.freecodecamp.org/news/next-vs-react/ 1/5
12/1/24, 12:32 PM Next.js vs React – What are the Differences?

What is Next.js?
Next.js is a backend framework which is based on React.

Everything we can do in React we can also do in Next.js – with some additional features like
routing, API calls, authentication, and more. We don’t have these features in React. Instead,
we have to install some external libraries and dependencies – like React Router for routing in
a single page React app, for example.

But in Next.js, things are different. We don’t have to rely on external libraries to get these
kinds of things done. They come built into the package when we create a Next.js app.

This is the main reason why a Next.js app is different from a traditional React app.

Client Side Rendering vs Server Side Rendering


Next.js also uses something called server-side rendering. And in order to understand how
that works, we need to talk about client-side rendering as well.

Basically, a client is what we see on the screen – the user interface. That is the client, what
we can see. In other words, it's the front-end part of the code.

A server, on the other hand, is something that we cannot see. It's the backend side of the
code, or the server code.

Now in Client Side Rendering, the application loads and it generates the output on the
browser dynamically. In other words, the browser renders pages using JavaScript.

But in Server Side Rendering, the user interface that we see on the screen is not generated
by the browser, but on the server. When an application loads, it does not need to parse the
user interface on the browser. Instead it comes from the server side, that has been
generated in advance in the server.

How React and CSR Work


So when we load a React application or when it is mounted and we check the source code in
the browser, we get something like this:

React source code

https://www.freecodecamp.org/news/next-vs-react/ 2/5
12/1/24, 12:32 PM Next.js vs React – What are the Differences?

And if you simplify this, we get the following:

<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="/favicon.ico" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta name="description" content="Blogs by Cybernatico" />
<link rel="apple-touch-icon" href="/logo192.png" />
<link rel="manifest" href="/manifest.json" />
<title>Blogs by Cybernatico</title>
<link href="/static/css/2.877ae64e.chunk.css" rel="stylesheet" />
<link href="/static/css/main.4d9c354c.chunk.css" rel="stylesheet" />
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>

<script src="/static/js/2.48c493c5.chunk.js"></script>
<script src="/static/js/main.f9b5cf72.chunk.js"></script>
</body>
</html>

And if you look at the output in the UI, it will be something like this:

https://www.freecodecamp.org/news/next-vs-react/ 3/5
12/1/24, 12:32 PM Next.js vs React – What are the Differences?

React app

In the source code of this page, we only get a few lines of code which include the title, meta
tags, and link references.

But in the body, we only have this:

<div id="root"></div>

So, where is the rest of the code? We don’t see it in the browser when the page loads. This
is because React uses client-side rendering (CSR). A React application processes the DOM
on the client side, that is in the browser.

Whenever we load a React application, all the UI components get generated on the browser,
dynamically.

How Next.js and SSR Work


If you do the same things we did before, but with a Next.js app, you will get something
different:

https://www.freecodecamp.org/news/next-vs-react/ 4/5
12/1/24, 12:32 PM Next.js vs React – What are the Differences?

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Next.js Tutorial</title>
<meta name="description" content="This is a Next.js Tutorial" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="icon" href="/favicon.ico" />
<meta name="next-head-count" content="5" />
<noscript data-n-css=""></noscript>
</head>
<body>
<div id="__next">
<div>
<h2>This is the Home Page!</h2>
<a href="/profile/1"><p>Go to the Profile Page of 1!</p></a>
</div>
</div>
</body>
</html>

Now, this is the source code of a simple Next.js app. We see the entire contents, like the
HTML, CSS, and JavaScript.

This means that when a Next.js app loads, the content on the web that we see on the UI is
already generated. And this takes place on the server. This is because Next.js utilizes
server-side rendering (or SSR), also known as pre-rendering.

What is Pre-Rendering?
Pre-rendering is an example of server-side rendering where the content is generated in
advance, before loading the app or the website on the browser.

Why use Pre-Rendering?

Server-side rendering (or pre-rendering) makes an application load faster. This is because
the output we are going to see is already generated on the server side. It does not need to
be generated on the browser. This makes a server-side app faster than one on the client
side.

Thank you for reading!


Now you should know morea bout the main differences between Next.js and React. React
uses CSR or Client Side Rendering, where the UI elements are generated on the browser. In
Next.js, the UI comes from the server, which gets generated in advance.

https://www.freecodecamp.org/news/next-vs-react/ 5/5

You might also like