I came across a website that showcases a list of performing artists. When I click on an artist's name, a short bio and image pop up, but the URL remains unchanged. I want to know how this is done and what the technique or concept behind it is. I can't send someone a direct link to a specific artist's information because of this. What's going on here?
4 Answers
It might not be a 'technique' in a positive sense. It's more of a design flaw since you're denying users a way to share the content. In SPA design, using `history.pushState` helps create meaningful URLs that correspond to the content being viewed.
It's actually a common approach in Single Page Applications (SPAs). When you first load the page, the server delivers a single HTML document. After that, all other content is managed through JavaScript, so you can interact with the page without navigating away. That's why the URL doesn't change when you click on different artists. It’s nice for dynamic content, but ideally, each view should correspond to a unique URL, often managed through something called page routing.
This behavior is usually attributed to AJAX. With AJAX, you can load content dynamically without reloading the page. So under the hood, when you click an artist, the JavaScript fetches the content in the background, updates it on the same page, and keeps the URL the same, which isn’t great for sharing.
The technique you’re seeing is a side effect of client-side rendering. The content is hidden or shown through JavaScript, and since no actual page reload happens, the URL doesn’t change. It’s efficient for user experience but not ideal for SEO or direct linking.
Related Questions
How to Build a Custom GPT Journalist That Posts Directly to WordPress
Cloudflare Origin SSL Certificate Setup Guide
How To Effectively Monetize A Site With Ads