Next.js

Let's talk Next.js

Hmm, so you are a react developer who is still debating on whether to use next.js or not, my aim in this blog is to layout some bullet points that will hopefully convince you to use it, from my personal experience of using it for almost one and a half years now (by the time of writing this article) it has been nothing short of an amazing experience and i would recommend it to any react developer and here's why.

Environment Benefits.

You can think of environments as the context in which your code is running. There are two types of environments, development and production.

In the development stage, Next js optimizes for the developer and their experience building the application, it comes with features that aim to improve the developer experience such as the typescript and eslint intergration, fast refresh and more.

In the production stage, Next.js optimizes for the end-users, and their experience using the application, it aims to transform the code to make it perfomant and accessible.

Super Compiler.

Next.js handles most of the code transformation to make it easier for you application to go to production.

The next.js has a powerful compiler written in rust, and SWC, a platform that can be used for compilation, minification, bundling and more. let me take you through what some of this terms mean so that it can make more sense to you.

• minifying: next.js removes unnecessary code formatting and comments without changing the code's functionality. The goal is to improve the applications perfomance by decreasing file size. In next.js Javascript and css are automatically minified for production.

• Bundling: The process of resolving the web of dependencies and merging the files (or modules) into optimized bundles for the browser, with the goal of reducing the number of requests for files when a user visits a web page. for instance, when you have 2 js files, they will be merged to one e.t.c, it reduces the number of files.

• Code Splitting: The process of splitting the applications bundle into smaller chunks required by each entry point. The goal is to improve the applications initial load time by loading only the code requred to run the build step. Each file inside your pages directory will be automatically code split into its own javascript bundle during the build step.

Client-side rendering and pre-rendering

of all the reasons, this is the main reasons that sold me into trying out next.js.

Listen, react does not do a good job when it comes to SEO, your website will suffer major setbacks when it comes to the SEO department, and we all know the web is a super competitive place and you need all the advantages you can get when it comes to visibility of the web app, let me show you how next is a clear winner here over plain react.

Rendering: rendering this rendering that, what even is rendering ? well, rendering is the unavoidable unit of work to convert the code you write in React into HTML representation of the UI.

now since you understand what rendering is, let's move forward and explaining all the different types of rendering i mentioned.

• Client-side rendering: There is nothing special with client side rendering, it's what happens in a standard react application to display information to the browser, essentially the browser receives an empty HTML shell from the server along with javascript instructions to construct the ui. its called client side since the initial rendering work hapens on the user's device. This is super slow and takes a longer period of time compared to the other forms of rendering.

Nevertheless, it is still exists as an option in next.js if you want to implement it.

• Pre-rendering: The action of fetching external data and transformation of React components into HTML happens before the result is sent to the client, this happens in two ways, server-side generation and static site Generation.

• Server-side rendering: with server side rendering, the HTML of the page is generated on a server for each request.The generated HTML, JSON data and javascript instructions to make the page interactive are then sent to the client.

on the client, the HTML is used to show a fast non-interactive page while react uses the JSON data and Javascript instructions to make components interactive (for example, attaching event handlers to a button). This process is called hydration.

this can be done using server-side getServerSideProps function.

export async function getServerSideProps(context) {
  return {
    props: {}, // will be passed to the page component as props
  };
}

• Static side generation: with static site Generation, the HTML is generated on the server, but unlike server-side rendering, their is no server at runtime. Instead, content is generated once, at build time, when the application is deployed, and the HTML is stored in a CDN and re-used for each request.

Hmm, what if your entire site data changes ? you can use incremental static regeneration, to create or update static pages after you've built your site. This means you do not have to rebuild your entire site if your data changes.

you can opt to statically generate changes using getStaticProps.

export async function getStaticProps(context) {
  return {
    props: {}, // will be passed to the page component as props
  };
}

Conclusion.

That's a whole lot of information for you to ponder, and i hope i managed to convince you to atleast try on next.js, in my next blog i'm going to take you through the when to use server-side rendering , static side rendering and client-side rendering.

Happy Rendering !!!