But What is NextJS ?

Next.js is an open-source full-stack web development framework by Vercel.

Quick note, I built this website using NextJS 😌

Vercel says NextJS is The React Framework for Production

Wait... What? React again..

Fasten your seat belts and let's explore the NextWorld

In the ocean of JavaScript frameworks, NextJS is one of those big boys in competition with Angular, Svelte and others.. NextJS is yet another JavaScript framework, but... a framework on steroids. While NextJS is a Beast 🔥, I'll try to give you the maximum insights about Next's Routing and Rendering strategies.

If NextJS is built on top of React why use Next in the first place?

When you are using React, for example, the MERN stack, you are shipping a lot of JavaScript with the application which leads to heavier apps, and most of the rendering part is done on the client-side. Client-side rendering is the culprit -- Parsing and compiling the uncompressed file once downloaded, the cost of executing the JavaScript, and requiring memory, all these make your application slow. Since most of the functional and UI part of the app is built on the client-side, search bots won't be able to interpret your application well, because they're seeing an HTML document with an empty body. Yes, that milliseconds for building your app is enough to upset the bots and it is bad for SEO.

By now you should be able to sense what gap would be filled by NextJS.

Before getting into the Rendering 🔥 capabilities of NextJS let's get an overview of the framework.

NextJS

When you initiate a Next app with the create-next-app command, the boiler plate generated is interesting remember Next is a framework not a library meaning you need to follow certain rules to build your next beautiful app.

Routing

NextJS uses file-system based routing i.e., each route in your application is an actual file in your application. You may wonder, how is that even possible, that is where Dynamic Routing kicks in.

Look at the below image.

image

All your routes are under the pages directory. Next has reserved the _ for its meta file, you can also modify them though. Look at index.js file it is at the root level in the pages directory, it serves the homepage of your application i.e.,www.seven-books.com/. The books.js file serves the page www.seven-books.yes/books. Now, look at pages/[author] a weird notation right? That is how NextJS represents dynamic routes.

Assume you are building a book-selling website, the homepage contains the list of all books available on your site which is server by pages/index.js. Now, you are tied up with a bunch of publishers and each publisher has their own books. You can represent each of your publishers info or books published by them using the author route. How? Let's say your publisher is 'dash' www.seven-books.com/dash this URL is served by the pages/[author]/index.js. This means the author folder is a dynamic one, anything that is substituted in the place of the author is routed to that URL, and so on. Now, say dash has published a book named uphill this would be represented as www.seven-books.com/dash/uphill served by pages/[author]/[book].js.

More on: https://nextjs.org/docs/routing/introduction

Yeah but, what is the api folder remember we read NextJS is a full-stack framework. The api folder is where you can implement your entire backend part without having to write your own server like the MERN stack. No more reinventing the wheel with Next. Your api endpoints would be something like: www.your-domain.com/api/hello

Rendering Strategies

This is where the steroids work.

While React mainly depends on client-side rendering, Next offers multiple rendering strategies to satisfy most of the use cases.

  • SSR: Server-side Rendering
  • SSG: Static-site Generation
  • CSR: Client-side Rendering
  • ISR: Incremental Static Regeneration

I'll try to walk you through these strategies briefly and make you understand why these strategies are even required.

SSR & SSG are Pre-rendering strategies they can be implemented only in the files under the pages directory

Server-side Rendering

SSR lets you fetch the page's content on the server and render a fully loaded HTML on the client. How does this affect performance? The servers your website is hosted on are extremely fast, so fetching data there is also very fast. Hence, this strategy eliminates the need for fetching all the data on the client itself. Now the bots would be able to see a full content loaded HTML and can interpret your site well. This is great for SEO and eventually, your page is a contender for ranking high in google search results.

When to use SSR ?

When your page is highly dynamic, that is content keeps changing frequently and you want to provide the latest possible content on the page.

SSR runs for every request, a new fully loaded HTML is delivered for every request fresh from the server.

Implementing SSR in NextJS.

To add the power of SSR to your page simply export a function getServerSideProps from your page pages/book.js file. I'll not get into the details / code of implementing SSR which will only make this article lengthy.

image

The content fetched shall be consumed by your page via props. SSR has a certain way of passing props to the page. Look at the return statement in the above image.

This is Server-side rendering for you.

Static-site Generation

While SSR delivers content loaded fresh HTML for every new request, SSG works a little differently. SSG pre-renders all the pages that export the getStaticProps function. These pages are pre-rendered during the build time and the user is served the same page for each request. To bring the latest updates to the page the user might want to reload the page.

getStaticProps is often used in conjunction with getStaicPaths, the getStaticPaths function returns a list of all the paths with necessary metadata (URL pramas) to let Next know what all paths are to be pre-rendered during the build time.

image

When to use SSG ?

When your page's content is not changed frequently or the user doesn't necessarily need the latest updates on the page, SSG is a great choice.

The page you are now looking at is also NextJS Static generated page.

Client-side Rendering

I want this article to focus mainly on the issues we can overcome by using NextJS so let's not get into client-side rendering. Client-side rendering is similar to what we do in traditional React apps.

Incremental Static Regeneration

We have seen that SSG generates static pages during the build time, and that same page is served for every request until reloaded. What if we wanted the page to be statically generated during build time and also be able to update itself at regular intervals, that is where ISR comes into the picture. Next allows you to create or update static pages after they are built. With ISR we can retain the benefits of static generation while giving a rich UX.

To add ISR to your page, simply add the revalidate prop to getStaticProps.

image

revalidate accepts a number (come on non-JavaScript people that's an integer) denoting the number of seconds after which Next re-generates the page.

ISR is basically the best of both worlds giving you pre-rendered HTML and also updates the UI like a usual client-side rendering application.

This is about different rendering strategies in NextJS briefly.

Want to build your next production-ready application with NextJS ?

My ultimate stack for NextJS apps

NextJS supports TypeScript out of the box. (TypeScript is ❤️) making your Next app even more robust.

My goto Next app config is:

NextJS + TypeScript + TailwindCSS + Firebase/Sanity

Although any database would work just fine with Next.

Don't want all the boring configurations? I got you covered.

Use the following commands to generate all the required boiler plate and config for the above stack.

npx create-next-app -e with-tailwindcss your-project
cd your-project

The above command adds TailwindCSS and TypeScript to your Next app 🚀

Resources

Vercel Documentation 🥇: https://nextjs.org/docs

More about Next v12: https://www.youtube.com/watch?v=kdXKz1UWc3E

Beginner's tutorial: https://www.youtube.com/watch?v=1WmNXEVia8I

The above resources would help you get used to the NextJS framework and all the best for your next server-side rendered, blazing fast, extensively dynamic, SEO optimised, statically generated and hydrated website.

Until next time 👋