Single Page Applications

Example
Multi-page apps Single-page apps
Lose state across pages Maintain state across pages
Repeat code Keep code DRY
Reload every navigation Load only once
SPA Simple example

Pros

  • Maintain state across pages
  • Keep code DRY
  • Load only once
SPA Simple example

Cons

  • Everything in one file
    • Difficult to maintain
    • Inefficient
  • No URLs

Components: Multiple files

SPA Component Example

All files are loaded at once...

Async Components: Load Only What You Need

SPA Component Example

URLs for Single Page Apps

Why URLs?

  • Feedback in address bar
  • Back/forward
  • Bookmarking
  • Sharing links
  • "Open in new tab"

URLs for Single Page Apps

The first way: Fragments / hashes

URLs for Single Page Apps

The modern way: History API

  • Pro: Gets rid of "#" in URL
  • Con: Requires server side configuration

Console example:

						history.pushState({}, "", "/mypage")

Running Example

The Web ≠ A File Directory

Bonus: Custom Transitions

Example

Single Page Applications

  • Maintain state across pages
  • Keep code DRY
  • Load only once
  • Multiple files via components
  • Efficient loading via async components
  • URL consistency via fragments or History API
  • Bonus: fun transitions
  • In practice: Vue Router

Hydration

Load async components preemtively.

Can happen when client is idle or in response to a particular interaction.

Vue docs

Server-Side rendering (SSR)

SPA require frameworks which can be large:

  • Vue.js (536.38 KB)
  • Vue Router (99.88 KB)

First load is slow

With SSR, a parallel Vue client runs on the server and immediately sends HTML before client downloads Vue.

Vue docs