A place to learn web development beyond the basics. Updated weekly with <3 since 2019
Mar 03, 2020 • ☕️ 3 min read
Single-Page Application (SPA) is often tighten to CSR but client-side rendered application can be multi-page as well.
Interactive desktop-like user experience. Page transitions and user interactions seem very responsive, only update the parts of the UI that need updating, getting only the required data from the server reduces network utilization and latency, best for high-interactive websites like social networks, admin dashboards or marketplaces.
Consuming less server resources. Offload many tasks to the browser like processing data and generating HTML pages, can be deployed in any static server, and can serve website markup static assets from CDN.
Not SEO friendly, search engines will struggle to wait multiple asynchronous content fetches util the pages are fully rendered, this point is important to any sites that depend heavily on SEO.
Create React App is the best React framework to create a CSR app. It offers a modern build setup with no configuration. You don’t need to install or configure tools like webpack or Babel, they are pre-configured and hidden so that you can focus on the code.
Before using CSR for your app, the first question you should ask is whether you actually need it. It mostly depends on how important time-to-content is for your app and SEO impact.
If you are building an internal dashboard where an extra few hundred milliseconds on initial load doesn’t matter that much, CSR would be a good choice. However, in cases where time-to-content and SEO are absolutely critical, you should consider other strategies like server-side rendering, static rendering or universal rendering.
Lerna is a tool that optimizes the workflow around managing multi-package repositories with git and npm
Grunt and Gulp are two popular tools to automate repetitive, mundane, painful and time-consuming tasks effectively