Client-Side Rendering (CSR)

The Next.js-specific directive "use client" has been added to the code for this page, which tells Next not to render this site server-side.
This means that the page is rendered like a traditional React app - the barebones html template is sent to the client, and then the javascript (React) runs to make requests for the page data and generate the content.

This page loads with some "Loading..." placeholders, then sends a fetch request to get the note content, and uses React.useState to re-render the page content when the response is received. This happens on the front-end*, just like a normal React app. If you use your browser dev tools, you can see the 'favouriteNote' request being made.

This is very different from the other pages which were server-side rendered. On those pages, the content could be directly fetched from the database, without any additional fetch request needed. In fact, the stoats had to add a GET endpoint to the server just to make this example page, because the main application doesn't require one!

You can see this process in action with the content displayed below. On this page, a delay has been added to make the process more visible.

Try it by updating the note here and refreshing this page.

This is the content of that note, according to this page rendered with CSR:
Loading...
And this is the value of "lastUpdated" for the note:
Loading...

The pseudo-code for this page is:
CSR code

*Actually, in Next.js client-side components are still initially rendered on the server side. Consider a traditional React app - you can try this by running npx create-react-app in your terminal and looking at the boilerplate project it creates. The page will look something like this:
React app website example

But if you open your dev tools and inspect the document request that is made, the body of the html is simply this:
React app html example

The way this works is that the JavaScript for the page includes these lines:
React app javascript example

This takes that html element and puts all of the magic of React inside of it, including all of the DOM elements, the event listeners, etc. Next.js still runs React on the client side, so your client-side components can be written just like a normal React app. However, if you open the dev tools on the page you are reading right now, refresh it, and look at the document request in the Network tab, you will see that the html for this page is already fully rendered, unlike a plain React app.

This is the whole idea of Next.js - we really want to deliver something to the client as fast as we possibly can, so even for a 'client-side' component we actually render a static page first. The page THEN gets 'hydrated' with the JavaScript, and becomes a fully interactive React app.

Back
5