Next.js

Introduction.

in my previous article i talked about different reasons to pick next.js and i mentioned all three types of rendering. Today, i will show you when to use which rendering method.

The Network.

Networks!! you might be wondering, how are networks connected to rendering, well, different forms of rendering store data in different parts of the network and for you to fully comprehend this topic, you have to understand some different parts of the network.

Don't worry, this is not a networking lecture, you can relax, we will barely scratch the surface but it is super important, so let's dive into it.

In the case of a next.js application, your application code can be distributed to origin servers, content delivery networks (CDN's) and the edge.

what are these ?

Heh, i promise this is the last gif 😂😂😂.

• Origin server: The server refers to the main computer that stores and runs the original version of your application code.

we use the term origin to distinguish this server from other places application code can be distributed to, such as CDN servers or edge servers.

when an origin server recieves a request, it does some computation before sending a response. The result of this computation work can be moved to a CDN.

• Content Delivery Network(CDN): CDN's store static content(such as HTML and image files) in multiple locations around the world and are a place between the client and the origin server. When a new request comes in, the closest CDN location to the user can respond with the cached result.

This reduces the load on the origin because the computation doesn't have to happen on each request.

it also makes it faster for the user because the response comes from a location geographically closer to them.

in Next.js, since pre-rendering can be done ahead of time, CDN's are well suited to store the static result of the work, making content delivery faster.

• The Edge: the edge is a generalized concept for the fringe of the network, closest to the user. CDN's could be considered part of the Edge because they store static content at the fringe of the network.

similar to CDN's, Edge servers are distributed to multiple locations around the world. But unlike CDN's which store static content, some Edge servers can run code.

This means both caching and code execution can be done at Edge closer to the user.

By running code at the Edge, you can move some of the work that was traditionally done client side or server-side to the edge. This can make your application more perfomant because it reduces the amount of code sent to the client, and part of the user's request does not have to go all the way back to the origin server, thus reducing latency.

in Next, you can run code at Edge with the help of middleware.

now that you understand where your data is stored in your next.js app let's move to the NEXT point.

When to use static Generation and Server-side Rendering.

Next.js recommends using static Generation (with and without data) whenever possible because your page can be built once and served by CDN, which makes it much faster than having a server render the page on every request.

you should ask yourself, can i pre-render this page ahead of a user's request? if the answer is yes, then you should choose static Generation.

on the other hand, static Generation is not a good idea if you can pre-render a page ahead of user's request. Maybe your page shows frequently updated data, and the page content changes on every request.

in that case, you can use server-side rendering. it will be slower, but the pre-rendered page will always be up-to-date, or you can skip pre-rendering and use client side javascript to populate frequently updated data.

Conclusion.

Now that you know when to use which type of rendering. you can go play around with it. if not, i soon plan to do another blog where we get our hands dirty and fetch data from an api, from local files and from a server.

This will cover all use cases, so stay tuned.

Happy Coding nerds!!!