Introduction

NextJs is a flexible React Framework that gives you building blocks to create fast Web Applications. Basically, it provides some of the crucial features and building blocks on top of a standard React.js application to make a modern website and apps.

NextJS Folder Structure

.next

public

src/app

Static routes are given priority over dynamic routes

Link tag in Next and link Prefetching

React Server Components

Motivation

Developers constantly have to make choices about using third-party packages. Using a package to render some markdown or format a date is convenient for us as developers, but it increases code size and hurts performance for our users.

React's new Server Components compliment Server-side rendering, enabling rendering into an intermediate abstraction format without needing to add to the JavaScript bundle. This both allows merging the server-tree with the client-side tree without a loss of state and enables scaling up to more components.

Server Components are not a replacement for SSR.

• When paired together, they support quickly rendering in an intermediate format, then having Server-side rendering infrastructure rendering this into HTML enabling early paints to still be fast.
• We SSR the Client components which the Server components emit, similar to how SSR is used with other data-fetching mechanisms.

It's been considered a best-practice to only serve code users need as they need it by using code-splitting.

• This allows you to break your app down into smaller bundles requiring less code to be sent to the client.
• Prior to Server Components, one would manually use React.lazy() to define "split-points" or rely on a heuristic set by a meta-framework, such as routes/pages to create new chunks.

Some of the challenges with code-splitting are: