Back to list
Lv.2

CSR

Client-Side Rendering

A system where a webpage's rendering happens in the user's browser instead of on the server.

In Simple Terms

CSR is a system where, when you open a webpage, your smartphone or computer's browser assembles the data and displays the screen itself. The browser receives just a minimal skeleton and data from the server, then does the processing to complete the screen. It's often used on websites where clicking a button smoothly updates just the part that changed, instead of reloading the whole page.

Behind the Name

CSR stands for Client-Side Rendering. "Client" refers to the browser viewing the website, "Side" means that side of things, and "Rendering" means building and displaying the screen. So altogether, it means building the screen right there in the user's own browser.

Take a Closer Look!

CSR is a technology where the process of assembling a webpage's screen happens in the user's browser instead of on the server.
Simply put, only the basic framework data is loaded first, and the browser builds the actual content on the spot.

With traditional webpages, the server would finish building the screen's data and send it to the browser for display.
With CSR, on the other hand, the load on the server is reduced, and just part of the page can be quickly rewritten.
Because of this, it's sometimes used on websites like social media timelines, where new information keeps appearing as you scroll.

However, when you first open the page, the browser needs to load the program that handles this assembly process.
Because of that, the very first display can take a bit of time.
Depending on a page's purpose and usability needs, this is used alongside the server-side approach to building screens.