This discussion came up at Trippeo about whether we should rewrite the web dashboard to use a modern framework. A few of the developers held differing opinions about whether switching to client-side rendering would be beneficial. I did not even understand what client-side rendering meant. I spent two days reading up on the topic. At one point I had over 15 tabs open in my browser! It can be a little overwhelming when one article leads to another and then every article has new terms you need to google. Although a lot of the information went over my head, I feel I have a better understanding of client-side rendering now.
Here is a summary of my notes:
Client-side rendering is when the client-side environment is used to run scripting. The source code is transferred from the web server to the user’s device and then run, typically in a browser.
Server-side rendering is when the web server runs the scripting language. The web server runs the script to create dynamic HTML pages which are then sent to the client’s browser.
- Faster navigation If data does not need to be loaded, clicks and interactions are much faster since the entire payload is loaded up front. “Last paint time” is much shorter.
- Server performance Traffic and server load can be decreased. The server only needs to deliver static files and answer API calls with JSON. Server performance can be improved with good use of JSON and client-side caching.
- Testability You can build out the entire view layer of your app without firing up a server. (Put your mock data in a JSON file.) This mock JSON can also be used for testing.
- Maintainability While the ideal scenario leads to a clean separation of concerns, application logic and view logic may end up duplicated between client and server in different languages. Examples of this could be date formatting, currency formatting and form validations. This makes maintenance of complex apps difficult.
Question: Does there have to be a tradeoff?
Why not render the initial state of the page on the server, and then re-render the parts that need to be updated on the client? Biggest reason: server-side rendering and client-side rendering typically isn’t mixed because they are written in different languages.