SSR & SSG
To understand what it's all about, let's look at how requests are handled by the server:
SSR (Server Side Rendering)* - the server prerenders the corresponding HTML and sends it to the client.
SSG (Static Site Generation)* - the server sends the corresponding pregenerated HTML file to the client.
* Along with the static HTML, your SPA is bundled and sent to the client. Once the SPA is received, it handles all subsequent navigation. From this point, the server only serves assets.
- SSR handles dynamic content as HTML is rendered in realtime.
- SSG is faster as all HTML is prerendered.
- Better SEO - search engines can crawl your page.
- External references to your site become rich objects when using Open Graph.
- Optional and enabled by default.
- SSR and SPA use the same code. No complicated boilerplate required.
- The code isn't limited to a Node environment.
- No tight coupling with arbitrary framework paradigms.
- Painless async handling with
- Easy build & deployments.
- Requires a host with functions support (Now, Netlify, etc.) or a server.
- Browser environment is headless, occasional consideration may be required.
While SPA, PWA, SSR, SSG, Dynamic imports etc. all happily coexist, there can be times where you want to disable one or more features.
SSG - can be disabled by removing
SSR (Vercel) - can be disabled by setting
SSR (Netlify) - can be disabled by setting