In addition to SSR support, Next.js offers link prefetching and dynamic routing features. We explore these features alongside Agility CMS.

Server-side rendering (SSR) has become a widely adopted technique to enhance the performance and SEO of web applications. And while static site generation (SSG) is considered simpler and faster, there are cases where server-side rendering is your only option.

Implementing server-side rendering on specific pages could be a challenging task, however. Next.js attempts to solve this problem by allowing you to choose between SSG and SSR for each page of your application.

This post will explore these and other concepts that make Next.js a powerful React framework by building a blog with Agility CMS, a CMS built for speed.

Outcomes

The goal of this post is to ensure that you:

• Understand the two types of preloading techniques Next.js offers
• Can effectively utilize the many inbuilt features that come with Next.js
• Can create and set up an Agility CMS instance

Next.js: The React framework with built-in SSR

Next.js is a React framework that addresses common pain points that many developers face when building web applications. Whether it’s ensuring all your code is bundled and minimized using a bundler like webpack or implementing optimizations like code splitting to improve page performance, Next.js has all the tools you need.

If you’re a TypeScript user, you’ll be pleased to hear that all you need to do is create a tsconfig.json file to get started! The development experience is truly great because you get to choose what you want to build your application with; for example, Next.js allows you to use a CSS-in-JS library, but it also ships with support for Sass and CSS Modules.

But what makes Next.js truly great is the fact that it pre-renders pages by default. This means every page will use static site generation by default, one of the two rendering options that make up the hybrid architecture of Next.js.

However, SSG isn’t always an ideal option because the markup is generated at build time, which means if your page contains content that is fetched from an external source and changes frequently, then those changes will not be reflected on your page until you build the page again. This is where SSR comes in!

Next.js allows you to fetch the dynamic content and then generate the markup appropriately at every request instead. Next.js does this by providing you the option of declaring one of two asynchronous functions in your page-type components called getServerSideProps() or getStaticProps().

#next #react #javascript #web-development #developer