- Client-side (at runtime)
- Server-side rendered (universal or isomorphic)
- Static generation (at build time)
Excluding client-side rendering, that renders a very dynamic type of UI, the other two types of rendering are very similar. The main difference is that server-side rendering is done at runtime, while static generation is done at build time, and they both deliver static pages to the browser.
- Full hydration (full app bootstrap)
- Partial hydration
- Island architecture
Application type (based on routing strategy)
- Single Page App
- Multi Page App
- Hybrid App (SPA + MPA)
Single page applications are typically built with a client-side rendering strategy, while multi page applications are typically built with a server-side rendering strategy. Hybrid applications are a combination of both, and many times we find micro-frontends as the result of this combinations.
Application type (based on use of libraries, open standards and cloud technologies)
- Static Web App
- Progressive Web App
- Functional Web App
Before we dive into details, let’s discuss a shift in architecture trends that influenced the creation of new generation frameworks.
Why the shift from client-side to SSG and/or SSR?
The answer is simple: it’s all about performance. About user experience. About speed. And obviously, about avoiding end-user bounce and facilitating conversion.