Recently, I came across the following Stack Overflow question regarding state handling on refresh in a single page application (SPA). I found the approach OP was taking towards developing a SPA interesting: they wanted to avoid third party libraries and frameworks because they “prefer the simpler ways first”.

Here’s the question that sparkled this article

I’ve made a simple proof of concept to illustrate how one could achieve what they were looking for, which can be seen here (or cloned from github).

In the uploaded version, I’m using the last URL parameter to determine what should be loaded. This is standard practice, but it requires server-side configuration in order to route all your incoming requests to a single file.

The other alternative (default option of the code on github) is using the anchor fragment. My script supports both alternatives, and you can see here the uploaded version that uses anchors instead of URL rewriting.

The code is pretty simple (though it could be further simplified by using fetch or a less verbose XHR implementation).

---

#javascript #vue #reactjs #html #web-development