Render your application's UI on the client
The contents of a client-side rendered application get rendered in the browser.
When a user requests a client-side rendered application, the server initially responds with the barebones HTML file.
A basic client-side application consists of at least two files.
<html> <body> <div id="root"></div> <script src="/bundle.js"></script> </body> </html>
const root = document.getElementById("root"); // DOM manipulation root.appendChild(...)
- TTFB: The Time To First Byte can be fast, since the initial HTML does not contain large components.
- LCP: The Largest Contentful Paint can occur at the same time as the First Contentful Paint, provided there aren't any large components such as large images or videos.
Single server roundtrip: The entire web application is loaded on the first request. As the user navigates by clicking on links, no new request is generated to the server to render these pages.