Building Dynamic Web Applications with Next.js/

...

/

Client-Side Rendering (CSR)

Client-Side Rendering (CSR)

Learn about client-side rendering techniques and their advantages.

We'll cover the following...

A standard React app is rendered once the JavaScript bundle has been transferred from the server to the client. If we’re familiar with create-react-appcreate-react-app is a command-line tool developed to create a new React application. It sets up the development environment so we can use the latest JavaScript features, provides a nice developer experience, and optimizes our app for production., we may have noticed that right before the web app renders, the whole web page is entirely white. That’s because the server only serves a very basic HTML markup, which contains all the required scripts and styles to make our web app dynamic. Let’s take a closer look at the HTML generated by CRA:

Press + to interact
<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="utf-8" />
      <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
      <meta name="viewport" content="width=device-width, initial-scale=1" />
      <meta name="theme-color" content="#000000" />
      <meta name="description" content="Web site created using create-react-app" />
      <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
      <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
      <title>React App</title>
   </head>
   <body>
      <noscript>
         We need to enable JavaScript to run this app.
      </noscript>
      <div id="root"></div>
   </body>
</html>

As we can see, we can only find one div inside the body tag: <div id="root"></div>. During the build phase, create-react-app will inject the compiled JavaScript and CSS files into this HTML page and use the root div as a target container for rendering the whole application.

That means that once we publish this page to any hosting provider (Vercel, Netlify, Google Cloud, AWS, etc.), the first time we call the desired URL, our browser will first render the preceding HTML. Then, following the script and link tags contained in the preceding markup (injected by CRA at build time), the browser will render the whole application, ...