Server

SSG vs SSR vs SPA

Static pages like this one are SSG, server side generated. The HTML files are bundled at build time along with the CSS and JS they import. They can be served by a CDN.

Dynamic pages, like dashboards, are SSR, server side rendered. A server combines a template with data and returns personalized pages.

View states can be managed by an SPA, Single Page App. It's a JS bundle incrementally downloaded by a browser in chunks corresponding to components, pages or libraries. Browser history stack can be used to manage view states.

Next.js

Next.js uses handles the bundling of SSG pages, serving of SSR pages and downloading chunks like an SPA. It also optimizes images and pre-fetches resources. It generates manifests of chunks and caches them using a service worker.

When a user visits a page like /a/b, the HTML is served as a document, JS is downloaded in a separate file and injected, and linked pages are pre-fetched as JS chunks and rendered in browser.

Next.js with React and amplify-js require about 150kb of initial JS. If the JS bundle is large and takes long to download, parse and execute, it will delay Time To Interactive since all interactivity is based on event listeners.