Using Hashed vs. Non-Hashed URL Paths in Single Page Apps

Using Hashed vs. Non-Hashed URL Paths in Single Page Apps

There are two ways to support routing in single-page apps: Hashed URL Paths — We break the URL path with a # (Hash) so that the browser understands it’s just a virtual fragment. Ordinary URL Paths (Non-Hashed URL Paths) — The server needs to intercept the request and return the index.html.

There are two ways to support routing in single-page apps:

  • Hashed URL Paths — We break the URL path with a ## (Hash) so that the browser understands it’s just a virtual fragment
  • Ordinary URL Paths (Non-Hashed URL Paths) — The server needs to intercept the request and return the index.html.

In this article, you will learn the pros and cons of these two approaches, and it will help you decide on the better one for your use case.

Tip: Share your reusable components **between projects using [Bit](https://bit.dev/) (Github). Bit makes it simple to share, document, and organize independent components from any project.**

Use it to maximize code reuse, collaborate on independent components, and build apps that scale.

Bit supports Node, TypeScript, React, Vue, Angular, and more.

Image for post

Example: browsing through React components shared on Bit (Github)

Ordinary URL paths

From their appearance, you can identify that the following are ordinary URLs.

https://mysite.com/dashboard
https://mysite.com/shopping-cart

Advantages

  • Ordinary URLs look pretty and clean.
  • These types of URLs have a better advantage in terms of SEO.
  • The scaffolding of web apps using frameworks like Angular supports this by default.
  • Modern Development Servers (e.g., ng serve in Angular) also support this.

All in all, you can see that using ordinary URLs is the better option considering the support available. However, these advantages come with a cost.

url frontend-development single-page-applications javascript web-development

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

Hire Frontend Developers

Create a new web app or revamp your existing website? Every existing website or a web application that we see with an interactive and user-friendly interface are from Front-End developers who ensure that all visual effects come into existence....

What Is A Single-Page Application?

Single page web apps are an ideal choice when thinking about future web development. This architecture is a perfect choice for social networks stuff, SaaS platforms, or some close communities where SEO doesn’t matter.

How To Develop And Deploy Micro-Frontends Using Single-Spa Framework

In this article, we're going to develop an app composed of micro-frontends using single-spa and deploy it to Heroku. We'll set up continuous integration using Travis CI. Each CI pipeline will bundle the JavaScript for a micro-frontend app and then upload the resulting build artifacts to AWS S3.

Top 15 Free JavaScript Frameworks for Web Applications

List of some useful JavaScript Frameworks and libraries for website, web apps, and mobile apps development, that developers should know about to make selection easier.

How long does it take to develop/build an app?

This article covers A-Z about the mobile and web app development process and answers your question on how long does it take to develop/build an app.