RFC: an SPA experience for SSG MPAs without client side rendering

[juls0730]

Hi all, I've recently been critical of how my Nuxt blog site works, and I specifically found an issue with how the routing works, when I navigate from my home page to my blog page, I either have to block for a while or suspend despite my blogs page already being prerendered, so I took it upon myself to write a rudimentary MPA router just as a proof of concept that this might be feasible and a good idea. I write this as a very minimal solution that works for a vanilla static site, and it works as you would expect:

function clickLink(event: Event) {
    event.preventDefault();
    navigate();
    history.pushState({}, "", props.to);
    // cant use router.push because it has side effects that are possibly undesirable atm
}

function navigate() {
    fetch(props.to)
        .then((response) => response.text())
        .then((html) => {
            const parser = new DOMParser();
            const doc = parser.parseFromString(html, "text/html");

            document.documentElement.innerHTML = doc.documentElement.innerHTML;

            // we have to do this because otherwhise script tags wont work correctly for some reason
            document.querySelectorAll("script").forEach((script) => {
                const newScript = document.createElement(script.tagName);
                for (let i = 0; i < script.attributes.length; i++) {
                    const attribute = script.attributes[i];
                    newScript.setAttribute(attribute.name, attribute.value);
                }

                if (script.textContent) {
                    newScript.textContent = script.textContent;
                }

                script.parentNode.replaceChild(newScript, script);
            });
        })
        .catch((error) => {
            console.error(`Error fetching component for ${props.to}:`, error);
        });
}

However, this solution isnt drop in for Vue as I assume I need to hydrate the pages somehow, but I believe I cannot go deeper in a component and force a page hydration. I think I like this solution, but I want to hear what others think. Specifically, I want to know a few things:

• Would this change be a good fit for vue-router or does vue-router focus on SPA routing only
• Is this even a good idea at all, or should I just take what I can get or pack it up and move on to an MPA first solution

I think this solution is better than an SPA as it leverages the pregenerated pages, like a non-routed MPA that uses just traditional anchor tags, but doesnt have the drawbacks of traditional MPAs like FOUC on first page load, but I'd like to hear what others think. Furthermore, if we do consider this, I think we should discuss how we might handle things like tracking page load progress, how we might toggle this in config, and anything else that might impact vue-router.

[posva]

To answer your questions:

• Vue Router focuses on SPA and SSR
• I don't think it's a good idea if you are using Vue. You will just complicate your life and get a worse user experience

To me it sounds like you want to use https://turbo.hotwired.dev/

[juls0730]

I see, thanks for your help.