Server Side Rendering (SSR) & Client Side Rendering (CSR) in Javascript
--
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
Javascript based SSR only became possible after the arrival of Node.js. Prior to that, web developers had to using other programming languages for SSR (e.g. PHP), but still use Javascript for adding interactive elements on the web browser side.
However that all changed with the advent of Node.js, it meant that web developers can now rely on a single programming language, Javascript, to handle both SSR and CSR. Better yet, Node.js let’s you integrate a web-server (e.g. Express) right into your app. And since Express is written in Javascript, it means that you can configure it in Javascript as well.
As a result, Node.js has made other more traditional stacks (e.g. LAMP) look somewhat dated.
