1. What is Client-Side Rendering (CSR)?
- traditionally used in *Single-Page Applications (SPAs)
2. How does Client-Side Rendering (CSR) work?
- first the client sends a GET request to the server
- then the server responds with a bare-bones HTML page
- the client renders it
- which will fetch any data needed
- to finally re-render the complete app
3. What are the Pros and Cons of Client-Side Rendering (CSR)?
- clear separation between client and server code
- interactive app after first load:
- navigation with less data and no refresh -> faster and more responsive app
- data fetched on client uses bandwidth, but can be cached -> turn a site into a Single Page Application (SPA)
- slow loading times
- slow first load, worse with bigger JS bundles, which are increasing
- complete HTML cannot be cached
- data fetching might delay interactions depending on size
- SEO considerations
- crawlers might not run JS, possibly harming SEO
- code duplication
- clear separation between client and server code can lead to duplication
4. When should you use Client-Side Rendering (CSR)?
- when slow initial first load is not a problem
- when you need a complex site with a lot of interactivity
- when you need navigation without full page reloads
- when SEO is not a top priority
Perfect for anything you would call an app, for example games, editors and other complex software