Get an instant effect on every click

[frederikhors]

I just discovered Inertia! My sincere congratulations!

For a long time I have been looking for something that allows me to replace the laborious work it takes with the SPAs (single page apps).

But the real reason I'm still using SPAs is that I want to give my users the feeling of immediacy when they go from page to page, I want to give them that instant feedback even if on a wobbly and slow connection.

Unfortunately this is not the case with standard server-rendered apps or with Inertia: on a slow/medium connection, when clicked, the reaction is not instant, but there is still a wait for the server's response.

I'm not saying that with the SPA there is no waiting for the server (and here you can play with the cache in the browser which works fine if the information has not changed), but the effect is immediate and it "seems" that the application is without server round trip.

I don't know if I have explained what I mean.

The question is: is there any way to make Inertia like this? To give that effect of immediacy, perhaps by postponing the wait for data from the server after the first rendering when the page changes?

[prestonholt]

I have been trying to achieve this effect as well. On my slower pages (for example, a dashboard with many stats), I don't pass in any props to the Inertia::render method. Instead, I use skeleton placeholders on the page and use axios to fetch the data. Obviously this isn't ideal because it requires an extra route to fetch data, and it takes away the simplicity of Inertia that I've loved.

I haven't dug through the Inertia source enough to know whether this would be possible, but it would be neat if when navigating between routes, the next page component immediately renders (with null props at first) and the props are hydrated when the server response is received.

Edit: It looks like this idea has been thrown around but not yet implemented #123 (comment)

[ajnsn]

I do something similar by using Inertia::lazy(Docs) to prevent large data (queries) slowing down the initial visit, Laravel/Vue3 Example of a clients table:

return Inertia::render('Clients', [
    'clients' => Inertia::lazy(
        fn () => ClientCollection::make(
            Client::query()
                ->select('id', 'name', 'slug', 'locale', 'is_active', 'updated_at')
                ->orderBy('name')
                ->get()
        )
    ),
]);

function loadClients() {
    Inertia.visit('/clients', {
        preserveScroll: true,
        preserveState: true,
        replace: true,
        only: ['clients'],
        onStart: () => {
            // Show placeholders
        },
        onSuccess: page => {
            state.clients = page.props.clients;
        },
        onFinish: () => {
           // Hide placeholders
        },
    });
}

onMounted(() => {
    loadClients();
});

You may also try to prefetch links when hovering over them. But atm there's no Inertia way to accomplish this.

[kirkbushell]

It’s far worse on mobile. Everything feels very slow because of the delay on tap. Prefetch needs tapstart support.

[benshawuk]

I second this. Totally love inertia but find myself wanting instant page browsing like with full SPAs.
I've gone deep down the rabbit hole and got it working by reinventing the link component and swapping out content without a network request, using a separate controller to group data together and preload content. It works (even if browser is fully offline after initial load!) but it's overly complex to maintain, and feels a bit like I'm fighting the framework.

[frederikhors]

Yeah. I think it's not worth it.

[benshawuk]

I actually stepped back and found the best solution for this (in my case at least).
If you prefetch and cache the data and the components (not possible with inertia prefetch alone) - you can achieve instant browsing between pages (even on slow 3G or offline!)
The trade off is that you need to manage data reloading/invalidation yourself. But that's an expected trade off with client side routing - otherwise inertia is essentially doing the same thing, but during that gap between click and page load.
I also made a configurable way to not prefetch large datasets, but still cache the page for instant navigation, with data loading or updating (SWR) when the page is reached.
I can see why it might not be of interest to integrate this type of functionality into Inertia, as it changes the mental model of how inertia is designed to work. But so far, this is a great compromise solution for me, whilst maintaining 90% of inertia's methodology and advantages.
If anyone's interested, I can share the code/screen recording.

[frederikhors]

Please share the code and the screen recording of the final result. Much appreciated.

[benshawuk]

inertia-navigation.mp4

That's the proof of concept.
I'll come back and post the code, but I'm still messing around with it to try and simplify some edge cases with data caching etc.
You could just run router.reload() on pages to refresh the data each visit but it seems a bit blunt.