Server Side Rendering (SSR) & Client Side Rendering (CSR) in Javascript

Photo by Lautaro Andreani on Unsplash

There are a few programming languages available for developing websites, but Javascript in particular stands out. That’s because:

• Javascript is the ONLY programming language that web browsers (e.g. Firefox) can understand and execute.
• The server side code can be all written in Javascript, thanks to Node.js
• The popular React library has made web UI development a lot easier.

For the most part, web browsers renders web pages from HTML and CSS content. In React based apps, this HTML content is generated from executing Javascript code. You can configure your React app to choose where your app’s Javascript code is executed:

• Server Side Rendering (SSR) — The Javascript code get’s executed on the web server, and the resulting html+css is returned is returned to the web browser. This is only possible following the introduction of Node.js, as discussed below.
• Client Side Rendering (CSR) — The React code is sent to the web browser, and the web browser executes the Javascript code to generate the html+css which is then rendered on screen.
• A Combination of both SSR and CSR.

A bit of History