Next.js rendering strategies

Next.js supports four different rendering strategies:

• Client-side rendering: Where we can load the initial content on the server and then fetch additional data from the client.
• Server-side rendering: Where we can fetch the data on the server, inject it on the page, and return the page to the client with the provided data.
• Static site generation: Where static data is injected on the page and returned in the markup to the client.
• Incremental static regeneration: The middle ground between server-side rendering and static site generation. We can generate x number of pages statically, and then if a page that hasn’t been rendered and cached yet is requested, Next.js can render it on the server and cache it for future requests.

For our application, we will mainly focus on the first two methods, so let’s see how they work in the following examples.

Client-side rendering

Considering the user profile page example, we...