Skip to content

SPA (single-page application)

A single-page application (SPA) is a web application or website that interacts with the user by dynamically rewriting the current web page with new data from the web server, instead of the default method of a web browser loading entire new pages.

Workflow

SPA Workflow

  1. The frontend app is a static website which served by Nginx or other web server.
  2. When user visit the website, index.html is served and browser download JS, CSS files.
  3. The browser will then use the JS to init React / Vue app and build DOM tree.
  4. And then React / Vue app will interact with API backend through REST API or GraphQL protocol.

Frontend

  1. We can use create-react-app to create a React application.
  2. We can use vue-cli to create Vue application.

Backend

Django

For Django dev, we might also need below packages.

  1. Django REST framework which will help build REST API.
  2. dj-rest-auth or djoser for auth API support.
  3. django-cors-headers will help solve Cross-Origin Resource Sharing (CORS) issue.
  4. graphene-django Integrate GraphQL into your Django project.

Flask

For Flask dev, we might also need below packages.

  1. flask-restful
  2. flask-api
  3. flask-graphql
  4. flask-cors

FastAPI

  1. CORSMiddleware

Pros and Cons

Pros:

  1. Friendly to both frontend and backend developers, and there are many learning resources online about this architecture.
  2. The decoupled structure is clean, easy to understand.

Cons:

  1. Can not benefit from some awesome Django, Flask features (templates, form, built-auth)
  2. The web application is not SEO friendly and is a little slow on first page load.

References

  1. Wikipedia: Single-page application

Demo

React Django SPA Demo