Introduction

Single Page Applications (SPAs) and Multi-Page Applications (MPAs) are architectural patterns for building web applications.

SPAs are reactive web applications that give a native look and feel without page loads. SPAs owe this to AJAX/Client-Side Rendering typically provided by a client-side framework such as react/vue/angular.

Many in the industry refer to more traditional web applications as Multi-Page Applications (MPAs). Such applications are comprised of multiple webpages that the user navigates between.

Architecture and Rendering

While many have equated CSR with SPAs and SSR with MPAs, they are treaded as patterns which can be applied in either rendering method.

SSR MPAs

Server-Side Rendered Multi-Page Applications are full-stack applications built with server-side frameworks and template engines. These applications are comprised of multiple pages which are rendered on the fly by the server. Content Management systems also fall into this category.

Examples

• Django (Python)
• Express (Nodejs)
• Laravel (PHP)
• ASP.NET (C#)
• Wordpress (PHP)
• Drupal (PHP)
• Grav

SSR SPAs

Server-Side Rendered Single-Page Applications are our Isomorphic javascript frameworks. These technologies deliver the first render of a SPA from the server instead of the browser.

CSR SPA

Client-Side Rendered Single-Page Applications are any app that is built with a client-side framework with a router. A client-side router is a library which allows users to navigate to different parts of the application without needing to load a new page.

CSR MPA

Client-Side Rendered Multi-Page Applications are your regular static sites. These websites are comprised of webpages built with just HTML/CSS/JS and can even be deployed without a web server (think JAMStack). These sites may have some dynamic content brought via javascript and an API, widget or iframe but do not utilize a client-side router. Static Site Generators are tools which help in building out static sites.

Some examples:

• Gatsby
• eleventy
• jekyll
• NextJS (SSG Feature)
• NuxtJS (SSG Feature)

More on web app arhictectures:

• MPAs vs SPAs
• App Shell UX
• MPA, SPA or Hybrid?

Now that we understand the basics of rendering and app architectures, we shall finally look at comparing the approaches in the next and final post of this series.