All Courses
AI Career Planner
1:1 Coaching/Mentoring
Job Board
SQL
HTML/CSS/JS
Coding
Settings
LogoutClient-side rendering or CSR is a technique where content is rendered in the browser using JavaScript. Instead of getting all the content from the HTML file itself, the server sends the HTML with an empty body and script tags, including JavaScript bundles in the head, through which the browser can render the content itself.
Now let’s take a look at how client-side page rendering happens:
When the user navigates to a web page, the initial request to get the HTML document is fired.
The server sends an HTML with script tags to download the JS bundle with an empty body.
The browser parses the HTML and makes HTTP requests to fetch the JS bundle. The user only sees the HTML shell’s partial content, either a blank page or a loading indicator.
Only after the main JS bundle is fetched and rendered the user see the real, meaningful content.
In CSR, once the initial JS is loaded, the content can be loaded asynchronously. We can load the critical content first & the non-critical content later.
Client-side rendering
CSR can benefit users by caching the initial loaded JS bundles and static HTML in the browser, so the navigation between the pages becomes super fast.
However, in CSR, content starts loading only after the entire JavaScript bundle finishes executing. Until then, users have to sit duck, just watching a blank screen without an update on what’s happening.
As the bundle size increases, users will have to wait more and more before seeing anything meaningful or starting using the page.
What if we can render the content on the browser without depending on the JS bundle? This is where server-side rendering comes to the rescue!