Concepts and Features of Next.js #2

Photo by RetroSupply on Unsplash

Concepts and Features of Next.js #2

Next.js simplified #2

Previously we've given an overview of what next.js is all about, a description of some features which include minifying, bundling, code-splitting, and compiling of codes, and a basic description of which packages Next.js contains you could check it out at https://obasivera.hashnode.dev/concepts-and-features-of-nextjs

In this article, we would focus on providing definitions for some basic terminologies that are being used in next.js

Some basic terminologies in Next.js

it is important to note that most of these terminologies apply to other frameworks in javascript and in other programming languages.

BUILD TIME:

This is the process and steps that prepare your code for production. During the build time, next.js transforms your code into production-optimized files ready to be deployed to the server for use.

CLIENT:

This is the browser on the user end or device that makes a request to the server for the application code. the browser then turns the response or result it receives from the server into something that the user can interact with.

SERVER:

This is the storage of your application code which gives a response, receives a request from a client, does some computation and sends back an appropriate response.

RENDERING:

it involves converting react codes into your user interface's HTML representation. it could happen on the server or the client side, it could also happen during the build time or on every request at runtime.

It is also a process that translates website codes into pages that users can see on your device.

TYPES OF RENDERING

Rendering could be described from two different spheres which are the

  • Pre-rendering which includes the Server-side rendering and the Static-site generation and,

  • Client-side rendering

Pre-Rendering:

This basically involves fetching external data and transforming of react components into HTML before the results are sent to the client's side.

Now Pre-rendering renders every page by default so it means that the HTML is generated in advance on a server instead of having it all done on the client side.

Pre-rendering includes Server-side rendering and static site rendering

In Server-Side Rendering: Here the HTML of the page is generated on a server for each request, and the HTML, JavaScript, and JSON data instruction created is then sent to the client.

In the Static site generation: Generated HTML is stored in a CDN and is then reused for each request.

CLIENT-SIDE RENDERING:

Ordinarily in react the browser gets an empty HTML container from the server with the javascript instruction on how it would be structured, this makes up the client-side rendering because the rendering happens on the users' browser.

The unique thing about next.js is that it gives users the ability and option to choose their preferred rendering method for their use case on a page-to-page basis.

Conclusion:

From these terminologies, it could be noted that Next.js makes for flexibility, speed, and user satisfaction, by including in itself features that promote that and makes page navigation easier and faster.