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.
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:
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:
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:
<!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.
If you wish to develop apps like e-commerce, marketing websites, or simple landing pages, you can use Next.js. If you want to develop apps like Social Media apps or streaming tools like Netflix or Youtube, you can go with React.
If you want to watch a video version of this blog, you can find it here: Next.js Framework Course — Pre-Rendering in Next.js.
And if you want to learn more about Next.js, I am building a course on it. It’s a playlist where you will learn all this Next.js stuff. It is still in progress. Check it out here: https://youtube.com/playlist?list=PLWgH1O_994O_8Hg0-Q1xaD8ewXMx-fsBb