Next.js App Router

The Frontend Framework Behind Our Website

There are currently two versions of the React-based framework: Pages Router and App Router. The main difference between the two is that the components in Pages Router are by default rendered on the client while in App Router, they are rendered on the server.

This begs the question of what the differences between rendering on a client versus a server are.

Client-Side and Server-Side Rendering

Web applications can be rendered in two environments: the client (the browser on a user's device) or the server (a computer in some data center). In short, developers used to have to write separate applications, possibly in different languages, that had to communicate with each other over a network. With Next.js App Router, developers can write React code in one single application to manage all of this. Server-side rendering with App Router comes with other benefits as well, including caching.

With App Router, components are rendered on the server by default and passed to the client. Components that must involve the use of a client's browser (e.g. components that need state or need to execute client-side functions), must include "use client" at the top of the file, forcing it to be client-side rendered. This can lead to a file structure that may be a bit confusing for newer developers as some files are client-side rendered while others are server-side rendered.

Applications

One of the prime examples of App Router at work is when we pull data from Sanity. A server component calls a cached function to pull the necessary content from Sanity and that data is sent to a client component so that it can be rendered with state.

For example, see the code for the FAQs. FAQ.tsx is the server component that calls the cached getQuestions function in getQuestions.ts to retrieve the FAQs from Sanity and the questions get rendered in FAQAccordion.tsx, a client component.

FAQAccordion needs to be a client component because it relies on state (i.e. which question of the accordion is currently open/active).

Caching and Revalidation

How is the getQuestions function cached? Next.js provides a cache function that acts as a wrapper around an asynchronous function so that its results can be cached and used later. Of course, the data in the cache may not be up to date sometimes, which will require us to repopulate it with newer data. To do this, we include the following towards the top of page.tsx (see the page.tsx for the home page):

export const revalidate = 60;

This forces Next.js to invalidate the cache after 60 seconds and send a request to populate the cache with updated data.

Routing and Pages

Next.js comes with file-based routing, which means the file structure inside the app/ directory dictates the different routes and pages in the application.

• A folder that has a name surrounded by parentheses is a folder specifically dedicated to grouping and is ignored by Next.js.

• When creating a new page, create a new folder and place a file with the name page.tsx in it. This is where the cache revalidation snippet above goes!

• If you want pages to share a common layout (e.g. a navbar or a footer), you can create a file called layout.tsx so that all pages in the same directory and subdirectories inherit that layout.