Page hydration strategies

As we’ve seen in the first section of the chapter, react provides primitives to render applications on the server and the client. However, we only looked at examples where we did exclusively client or server rendering. One key feature of React frameworks such as Next.js is that they allow you to seamlessly switch between static, client, and server rendering. We’ll look at how to achieve this using React primitives.

Figure 5.16: A sequence diagram for a server-rendered page that is subsequently rehydrated on the client

We’ll start by extending our React client/server rendering app.jsx with a ClientCounter component. Event handlers are one of the simplest ways to observe interactivity primitives. Our ClientCounter component displays a counter that initializes with 0, and on every click of the Add button, it increments the count value. We put this component in a src/client-counter.jsx file:

import React, ...