Next.js - Introduction
Next.js is a framework built on top of React.js to provide additional features like Static Site Generation and Server-Side Rendering. It offers many benefits over simple React.js.
Static Site Generation
There are many benefits of using static site generators, as it could potentially be one of the biggest selling points of any project. One of the major benefits of static site generation is that it helps developers and users with SEO (Search Engine Optimization).
What's the Problem with Normal Web Apps?
In usual web apps built with major JavaScript frameworks like Angular and React, there's one major drawback: their client-side hydration nature.
In simple terms, what this means is that whenever a user requests a web app or website, the server basically sends back
a simple HTML file that contains absolutely nothing at all. It only contains one single <div> element that will
eventually hold the entire app. Once that HTML file loads, it starts loading the bundled runtime, other application
JavaScript files, and then the stylesheets.
The problem with this is that JavaScript files usually take a long time to load and parse before any JavaScript executes in the browser environment.
According to what I learned from the Chrome team, this is not at all helpful if we want to match all the base core web vitals. The Largest Contentful Paint (LCP) takes almost forever, which is not good at all for any website.
In terms of SEO, this is also not ideal because the longer it takes to load any website, the lower its SEO rank will be. Google only gives preference to fast-loading websites with the most relevant content. Not only that, but whenever a web crawler visits our web app or website, what it usually sees is an empty HTML document with one single element in it.
This is bad because it means the web crawler never finds the actual content of the website itself. Most of the time, people are unaware of this fact and think just having a website perform well in terms of navigation and user experience is the only thing that's required, but that's not true.
How SSG (Static Site Generation) Helps?
Static Site Generators (SSG) usually take our web app or website and convert it into normal HTML, CSS, and JS—hence the keyword "static". However, it never converts the entire site into a static site; only the main bits are static. We could make it generate a static site from the entire codebase, but that's not really ideal, as I'll explain in a bit.
The main problem with converting the whole site is that it will take a lot of time depending on how big the website is and how often it updates. It's redundant and inefficient to do that.
The benefit of converting only the main parts of the app is that it's faster, takes less time and resources, and is easier to manage. Once the main parts of the app load, client-side hydration takes over, and web apps work normally with client-side routing and other cool features.
Why Use Next.js, Not Gatsby?
To be honest, there is no right or wrong answer here. You can go for either one, and it will work just as well, but I prefer Next.js since there are a couple of advantages over other static site generators. These advantages are as follows:
- It's 10x faster in terms of its development lifecycle, providing faster dev hot reloads, resulting in a better developer experience.
- It provides a built-in solution for markdown, unlike Gatsby, where you have to set up plugins and configurations.
- It handles image optimization and page optimization automatically internally, which means fewer headaches for developers.
- There are 3 different kinds of rendering in Next.js:
- Static Site Generation (SSG)
- Static Server-Side Generation (SSG)
- Static Incremental Server-Side Generation (ISG)
- Many other benefits—please check the Next.js documentation for more information.
Conclusion
I'd say you should give Next.js a try. If it works out for you, then I'm pretty sure you'll fall in love with it and will never want to use anything else. They also just released their latest v12, which packs a lot of goodies for developers, like middleware, edge functions, and more.
That's me now signing off. Let me know if you try out Next.js, whether it worked for you, and what you liked or didn't like about it. I'd love to know your opinions and thoughts. Thanks! :3
