DEV Community

kohki_takatama
kohki_takatama

Posted on

2

TIL: Why Does a SPA Have Multiple URLs? 🤔

What is SPA

  • A Single Page Application (SPA) is a web application that interacts with the user by dynamically rewriting the current page, rather than loading entire new pages from the server.
  • Antonym: Multi-Page Application (MPA), where each page load requires a server request.

Why Does a "Single Page" Have Multiple URLs?

  • Even though a SPA is designed as a single page, it often mimics traditional multi-page behavior by updating the browser's URL dynamically.
  • This dynamic URL change serves multiple purposes:
    • Enabling features like bookmarking, deep linking, and maintaining browser history for a better user experience.
    • Treating URL changes as events to trigger application state updates and screen re-renders.

How Does a "Single Page" URL Change?

  • SPAs use the History API—specifically, methods like history.pushState() and history.replaceState()—to update the URL without reloading the page.

Why Doesn't a Page Reload Work in SPAs?

  • A page reload in a SPA results in a request to the server for the current URL, which often leads to a 404 error unless the server is configured to handle SPA routing (e.g., serving the SPA's index.html for all routes).
  • To avoid this issue, developers use tools like client-side routing (e.g., React Router) and server-side configuration to properly handle SPA routes.

Reference

https://qiita.com/ozaki25/items/41e3af4679c81a204284

Image of Timescale

🚀 pgai Vectorizer: SQLAlchemy and LiteLLM Make Vector Search Simple

We built pgai Vectorizer to simplify embedding management for AI applications—without needing a separate database or complex infrastructure. Since launch, developers have created over 3,000 vectorizers on Timescale Cloud, with many more self-hosted.

Read more →

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

👋 Kindness is contagious

Discover a treasure trove of wisdom within this insightful piece, highly respected in the nurturing DEV Community enviroment. Developers, whether novice or expert, are encouraged to participate and add to our shared knowledge basin.

A simple "thank you" can illuminate someone's day. Express your appreciation in the comments section!

On DEV, sharing ideas smoothens our journey and strengthens our community ties. Learn something useful? Offering a quick thanks to the author is deeply appreciated.

Okay