0

For example, on reddit.com, when you click on your profile from the home page, it does not redirect.

Eat Ing
  • 312
  • 1
  • 3
  • 7
  • 1
    They aren't redirecting. They are dynamically pulling in content and changing the url. You can achieve the same by **insert favorite internet search engine here** and searching that concept using the keywords I just mentioned. ......... At least thats my take, I may be completely wrong. Hence to research. – GetSet Jul 08 '20 at 00:52

2 Answers2

1

That's an example of a Single Page Application or SPA. SPAs dynamically load content as needed by the client and use it to update the page. This may include updating the browser URL to simulate navigating between pages. SPAs are generally considered to have a more fluid user experience due to the lack of a redirect as you noticed. Vue.js is an example of a web framework dedicated to creating SPAs if you're interested in exploring more.

Montgomery Watts
  • 3,806
  • 2
  • 10
  • 24
0

There are many strategies for updating a page's content, without an actual redirect or full page refresh, perhaps too many to list here.

I'm assuming you are not using any front-end framework, like Vue/React/Elm etc, so I will discuss the overall strategy, which should shed some light on how to get started.

First let's setup a simple example:


<html>
<head></head>
<body>
   <nav>
     <a href="/page-1.html> Page One </a>
     <a href="/page-2.html> Page Two </a>
     <a href="/page-3.html> Page Three </a>
     <a href="/page-4.html> Page Four </a>
   </nav>
   <div id="stage">
   <!-- Updated content goes here -->
   </div>
   <div id="footer"></div>
</body>

Ok, here we have a simple HTML document, with a three "sections", nav, stage and footer.

Essentially, you would update the innerHTML of the id="stage" div with new content, using plain JavaScript, or even a little bit of JQuery.

MDN has great documentation on the Javascript fundamentals and working with the DOM

StackOverflow, has many more detailed breakdowns, such as HERE

Triggers

You would listen for any hyperlink "click" events, and prevent any redirects, fetch the new content and then update the id="stage" innerHTML with the new content.

History API

You will most likely want to hook into the History API, so your users can use their back and forward buttons, as they expect.

AJAX

You can fetch new content, using AJAX requests, in response to "click" events using plain JS or a helper library such as JQuery.

DESIGN CONSIDERATIONS

You would need to design your site, to work this way, and ensure the content you request, is compatible with you site's design and layout.

BRUTE FORCE SOLUTION

You could, fetch the content, via AJAX for full pages, then replace the current document with a whole new one. This could have some benefits of it's own, such as pre-fetching/caching, smoother transitions, but may result in a "flash" when the content is updated.

rexfordkelly
  • 1,623
  • 10
  • 15