diff --git a/ssr.md b/ssr.md new file mode 100755 index 0000000..2bcec69 --- /dev/null +++ b/ssr.md @@ -0,0 +1,160 @@ +## Server-Sider Rendering + +#### Web Applications / Websites + +- Client-Side Rendering (**`CSR`**) + +- Server-Side Rendering (**`SSR`**) + +#### Client-Side Rendered apps + +`SPA` (*Single-Page Apps*) - each page is rendered on the **client**, _not_ on the server + +- the server serves up a *single* static `index.html` document +- the browser then parses `HTML` & loads `CSS`, `JS`, `img` & fonts +- the `JS` bundle, once loaded, fetches data from an `API` & constructs the `DOM` +- the user navigates between routes via the `history API`, *not* page reloads +- the app lazy-loads remaining `JS` chunks on demand (*code splitting*) +- the site can be served from a `CDN` to speed up the load time + +##### Pros + +- decreased load on the server +- better UI/UX interactivity +- static hosting & caching +- decoupled architecture + +##### Cons + +- slow initial render +- [heavy `JS` dependency](https://kryogenix.org/code/browser/everyonehasjs.html) +- non-SEO friendly +- poor accessibility + +##### Caveats + +- initial render depends on `JS`, and can thus be *very* slow + - bundle size (framework + app code), network latency, hardware limitations +- the page is technically ready to render once `HTML` & `CSS` are loaded + - it doesn't need to wait on JS to load & execute before it can paint + +#### Server-Side Rendered apps + +`MPA` (*Multi-Page Apps*) - each page is rendered on the **server**, *not* on the client + +- the server serves up a new `HTML` document on *each* request + +- the browser loads & parses `CSS` to paint the UI + +- the browser then loads & parses *deferred* `JS` to enhance the UI* + +- the user navigates between routes by requesting a *new* page + +- the browser caches assets (`CSS`, `JS`, `img`, etc.) for faster page load (just like with `CSR`) + +- the server can cache static `HTML` on a `CDN` to decrease the load + + +\* `JS` can be made non render blocking; often done by + +- `