Next Js is not React Js
Table Of Content
Next.js, as we know, is a server-rendered framework for React. You write React code, and before it goes to the users, it gets run on a server so the user gets a page that actually has the content of the page
- SPA
So, each of these, you request to the server, you get HTML, you do some stuff, you request the server again, you get some JavaScript, you do some stuff, you request the data that comes back again, and now you can actually finish rendering the page. But each of those steps is because the server isn't generating HTML per request. On this request, the first one is the server doesn't know what you want; it doesn't know what the user is asking for. It's just handing them an HTML page, and from there, the HTML page can load the JavaScript and then from that JavaScript figure out what it's actually meant to be doing. But all of those steps have to occur on the client's device before it can render the correct page.
- SSR (Server Side Rendering) The goal of Next.js was to prevent this
The getServerSideProps function is server code that runs when a user requests the page. So, if I request a page like, let's say, I'm requesting, I'll just change it, the user requests /user/Theo, so the user requests /user/Theo, Next.js server gets the request, and it runs the getServerSideProps function that is in that page file. This getServerSideProps function probably is taking a user ID from the query param, in this case, the /Theo, and it is running that against something like a database to fetch some data, and then it returns that as props for that page, specifically, so it can render that into the HTML.
So, your React code is running here on the server. React runs on the server using properties from getServerSideProps. This means that the actual page, the HTML that has the information that you want the HTML to have on it, is run and generated on the server. The server then sends correct HTML to the user based on what this React code renders, and then the user loads HTML, then loads JS to catch up to what the server rendered.
This catch-up step is a very important piece; the catching up is how the term for it is Hydration , because when your client isn't rendering the whole page, it's just getting HTML that's correct initially, you still want things to change. Like in React, if I have a hook that renders an account, and I want it to go up every time a user clicks, but the server rendered it at zero, I still want it to increase when I click it on the user side. The way that you do that is you take the HTML that you got from the server and you hydrate it with JavaScript.
In order for the hydration to work, it needs to know exactly what properties were passed to generate that HTML because effectively what it's doing when you hydrate in React is it is regenerating the same HTML in React. So, it knows, 'Hey, that element on the page matches this virtual element in our virtual DOM,' so it can do updates from that point forward.
This hydration step takes roughly as long as the painting step there in SPA, where you actually are generating and running that code to figure out what you need to fetch and then fetch it and whatnot. That takes just as long to hydrate. However, the page already exists, and the user already sees something, and they're probably reading the content of that page as everything else is updating behind the scenes. By the time they go to click something, all the JS is loaded and hydrated, the page properly.
The main benefit here of Next.js specifically is that the correct data is on the page when it renders for the user the first time. You don't have the blank pop-in that then shows the correct content.
NOT ALL CODE CAN RUN ON A SERVER
- Things that call
window- Things that call
localStorage- Anything stateful
- Media Queries
Next JS vs SPA
People saying single-page app versus don't actually understand what Next.js is because Next.js is not a multi-page app framework; it is a single-page app framework. It is a React-based framework that runs on the server and lets you generate different HTML based on different routes, but you're still building a single-page app. Once that first page loads, it's just a normal React app. I hope this video covers it well enough that I can start linking to it and no longer answer these annoying questions.
Next.js gives you the benefits of server-side rendering and single-page app-style React applications in one. React is a way to make interactive websites, and Next.js is a way to make the HTML correct for those interactive websites as soon as it loads. That's it. Next.js isn't an alternative to these things; Next.js is an alternative to React. Next.js is an alternative to single-page apps. Next.js lets you build a powerful single-page app with correct HTML from the server on first paint and a much better overall developer experience around it.
Next.js is a single-page application framework that happens to be back-end ready, runs on servers, and enables you to do really cool things. But it does not have to do those things if you don't want it to because, in the end, it is a way to build React applications. Next.js is not something that prevents you from having an interactive, customizable, live experience on your app.
Next JS is also a backend framework
A back-end framework can do lots of different things. It can run code on a server that the user does not own, I should even say on a computer or CPU that the user does not own. Usually, that is in the state or on a server in a box somewhere like AWS. You can have it in a server environment like lambdas or on edge functions, but all of those are running on CPUs that the user themselves do not own. The developer probably doesn't either; what they're paying a fee for is to have access to them. But the key of a back-end framework is that it runs on servers; it runs on code or on machines that users do not use. They request and receive a response from it. Usually, a back-end framework prescribes a method for making and fulfilling requests to servers.
So for those who have used Next.js before, I'm going to ask another question: how does Next.js differ from Create React App? Pop quiz, here's the answer: it's a really obvious one - it can run on a server (SSG, ISR, etc.), and it allows you to build API endpoints for sending and receiving non-HTML data. It even has a pages directory for creating new HTML routes in React. As you can see, the things that Next.js does differently from Create React App are actually the things that a back-end framework does. It runs on a server and allows you to build endpoints for sending and receiving non-HTML data. So it prepares a method for making and fulfilling requests to servers. It is a back end written around building the best possible React experience, which is kind of trippy to think about. It's awesome, in my opinion. It's so cool that there is a framework that is Express compliant. You can write and use pretty traditional Express functions in it.