Is it possible to show a page instantly before the page content has loaded?

[7ammer]

Hello 👋

I'm looking into Inertia and it seems that if you navigate to a page it waits for the data BEFORE rendering the template. While this keeps things nice and simple it would be nice to also have the ability to be able to render the page/template and THEN load the page data with loading states. This is the kind of experience I would expect in a mobile application. Can it be achieved in Inertia?

All the website's templates are (or at least can be) stored in a bundle.js file when the website first loads, right?

[RobertBoes]

I think there's currently no (easy) way to achieve this with Inertia, because of its protocol. The response contains which component should be rendered, so Inertia isn't aware of which component should be rendered before the XHR response is returned.
It's definitely something interesting worth exploring, because it would remove the need for something like NProgress and instead using some placeholder components, like https://github.com/michalsnik/vue-content-placeholders

[7ammer]

Thanks for replying :)

Ah, I see! I assumed inertia copied all the required data to the vue router so that the vue router knew what view should be shown for each route from the first page load.

[ajnsn]

Hey @RobertBoes

It's definitely something interesting worth exploring, because it would remove the need for something like NProgress and instead using some placeholder components, like https://github.com/michalsnik/vue-content-placeholders

fyi: Some time ago Jonathan digged into this idea. I think the idea is about dynamic imports. See also this discussion. This draft PR could also be interesting.

[RobertBoes]

Ah, that was basically what I meant, I did read about that at the time, but forgot there were even plans for it because it's been almost half a year without updates

[ajnsn]

Hey @7ammer
it's one of the key benefits of Inertia to keep things simple and primarly provide the routing and data providing. But you can still do almost anything you do with a regular SPA, e.g. you can always fetch additional or time intensive data via a plain XHR/fetch from an endpoint that returns JSON.

If you want to stick to Inertia all the way you can use lazy data evaluation to render the component and then fetch additional data with a second partial visit, that replaces the initial one and preserves state , simple Laravel/Vue example:

return Inertia::render('Users', [
    ...
    'users' => Inertia::lazy(fn () => User::get()),
]);

onMounted(() => {
    Inertia.visit('/users', {
        preserveState: true,
        replace: true,
        only: ['users'],
    });
});

This will immediately render the Users-component and fetch the users afterwards.

[RobertBoes]

This will immediately render the Users-component and fetch the users afterwards.

It won't render immediately, because the first request is used to fetch the component name it should render, then when that's returned another request is made to load the actual data. Imagine the user being on a slow connection, the initial response takes ~1s to complete, so it takes 1 second before the placeholder is shown. Then when that's shown another request is made, which would be ~1s plus the additional processing time, thus making the user essentially wait a lot longer than needed.

I'd consider this a workaround, because it requires 2 roundtrips to the server, just to display a placeholder component.

[ajnsn]

Ah I only encounter this challenge when there's lots of data, e.g. 5k records in a table. Otherwise I work with Inertia like I would with Blade. That's what I mean with "immediately" what indeed it is not. Sorry when this was not clear and thank you for elobarating that further.

[clementmas]

This is also a crutial "option" for me. There are many downsides to rendering all the templates on the frontend (duplication of logic, required tooling/compilation, etc.). But the main advantage in my opinion is to have an app that feels really quick and snappy.

At the moment Inertia is really convenient over a traditional Vue Router setup but it feels much slower. I would then stick to a much simpler setup with Blade views + JS sprinkles.

I think the proposed placeholder feature is a good first step. Is the code available somewhere? It could be a good starting point for a PR if you're open to it.

[bubokko]

I think this is where Inertia should go in the future. I started thinking, what's the point of the Single Page App if the pages don't load instantly? Is it really that different experience from the old fashioned, static websites? Slightly. Is it worth all the hassle if we don't get the immediate response anyway? What's the difference if the loading bar is in the body (if we use progress config) or under the URL bar?

[stefanocurnis]

In v2 you'll have deferred props and async requests that could help you in reaching that SPA feeling when you change page. But then, no SSR for that kind of pages.

[300code]

deferred Not fix the issue , I suggest to move to ssg page to get page static otherwise you will use inertia as blade and different between both , because inertia just get data as axios js then render as component and blade get data as server side

[tiredpyrx]

are there any updates on this topic?

[tiredpyrx]

I will just say it. I can't believe a tweet with a title "proof of concept" is the only thing we are getting about this. It's like they're saying "fuck you it works on my computer".

[guratr]

I managed to make somewhat working solution.

// put this in your app.js

if (typeof window !== 'undefined') {
    const components = {
        '/author': 'Author/Index',
        '/author/.*': 'Author/Show',
        '/narrator': 'Narrator/Index',
        '/narrator/.*': 'Narrator/Show',
        '/genre': 'Genre/Index',
        '/genre/.*': 'Genre/Show',
        '/': 'Main/Index',
        '/book': 'Book/Index',
        '/top': 'Book/Top',
        '/book/.*': 'Book/Show',
    };
    const progressDelay = 50;

    router.on('before', (event) => {
        const url = new URL(window.location.href);
        const path = event.detail.visit.url.pathname;
        setTimeout(() => {
            if (
                event.detail.visit.url.href !== window.location.href
                && event.detail.visit.method === 'get'
                && event.detail.visit.url.origin === url.origin
                && path !== url.pathname
            ) {
                for (const key of Object.keys(components)) {
                    const regex = new RegExp('^' + key + '$');
                    if (regex.test(path)) {
                        router.push({
                            component: components[key],
                            url: event.detail.visit.url.href,
                            clearHistory: false,
                            props: {},
                            preserveScroll: event.detail.visit.preserveScroll,
                            preserveState: event.detail.visit.preserveState,
                        });
                        break;
                    }
                }
            }
        }, progressDelay);
    })
}

this uses Inertias Client side visits to display new component before the request is even sent to server.
progressDelay = 50 is used to delay component switching for fast responses, otherwise empty(or with loading) component flashes to fast.
But there are some problems.

1. As you can see i had to duplicate route -> component relationship on the client. For my project this is ok solution, but for bigger projects it would make sense to collect this info using Reflection and pass it from server in HandleInertiaRequests for initial request.
2. You obviously can't use Code splitting.
3. It currently works only if component(page) changes, you can remove (&& path !== url.pathname), but then you have to use something like props: (currentProps) => (/* remove changing props and leave common props */) instead of passing empty props props: {}
4. Because i couldn't find a way to omit pushing to history in manual visits, if user clicks on other link(cancels visit) while empty component is displayed, and then navigates back from history, he will see the empty component(because real visit with data newer replaced history state).
5. there may be some other bugs that i didn't noticed.

Anyone has any idea how to improve this?

[guratr]

I Fixed issues in previous solution. gonna leave code here if someone needs it. This is for laravel and svelte(probably can be easily converted to react/vue by changing handling of page component)

Php part retrieves components for each route registered for App\Http\Controllers\* , caches this and passes as prop on initial page load

// Put this in HandleInertiaRequests.php

    public function getInertiaComponent($actionName): ?string
    {
        // Skip closures
        if ($actionName === 'Closure') {
            return null;
        }

        // Parse controller and method
        if (! str_contains($actionName, '@')) {
            return null;
        }

        [$controller, $method] = explode('@', $actionName);

        // Skip if controller doesn't exist
        if (! class_exists($controller)) {
            return null;
        }
        try {
            $reflectionMethod = new \ReflectionMethod($controller, $method);

            $fileName = $reflectionMethod->getFileName();
            $startLine = $reflectionMethod->getStartLine();
            $endLine = $reflectionMethod->getEndLine();

            if ($fileName && $startLine && $endLine) {
                $source = file_get_contents($fileName);
                $lines = array_slice(explode("\n", $source), $startLine - 1, $endLine - $startLine + 1);
                $methodCode = implode("\n", $lines);

                // Look for Inertia::render or inertia in the code
                $isInertia = preg_match('/(?:Inertia::render|inertia)\s*\(\s*[\'"]([^\'"]+)[\'"]/', $methodCode, $matches);

                if ($isInertia && isset($matches[1])) {
                    return $matches[1];
                }
            }

            return null;
        } catch (\Exception $e) {
            return null;
        }
    }

    public function getWebRoutes(): array
    {
        $routes = Route::getRoutes();
        $filteredRoutes = [];

        /** @var \Illuminate\Routing\Route $route */
        foreach ($routes as $route) {
            if (in_array('GET', $route->methods())) {
                $actionName = $route->getActionName();
                $routeControllerPath = $route->getAction('controller') ?? '';

                if (str_contains($routeControllerPath, 'App\Http\Controllers')) {
                    $inertiaComponent = $this->getInertiaComponent($actionName);
                    if (! $inertiaComponent) {
                        continue;
                    }
                    $uri = $route->uri();
                    $regex = '^'.($uri === '/' ? $uri : ('/'.$uri.'\\/?')).'$';
                    $params = $route->parameterNames();
                    foreach ($params as $param) {
                        $regex = str_replace('{'.$param.'}', '.+', $regex);
                    }

                    $filteredRoutes[] = [
                        'uri' => $uri,
                        'regex' => $regex,
                        'action' => $actionName,
                        'parameters' => $params,
                        'component' => $inertiaComponent,
                    ];
                }
            }
        }

        return array_combine(array_column($filteredRoutes, 'regex'), array_column($filteredRoutes, 'component'));
    }
    public function share(Request $request): array
    {
        return array_merge(parent::share($request), [
                ....
                // in frontend, page.props.inertiaLoading === true could be used to show loading state
                'inertiaLoading' => Inertia::always(false),
                // cache routes, because collecting component names with Reflection takes ~5ms  
                'routes' => fn () => cache()->remember('inertia-routes', now()->addHours(24), fn () => $this->getWebRoutes()),
        ]);
    }

Javascript part

// Put this in app.js
if (typeof window !== 'undefined') {
    (() => {
        let routes;
        const progressDelay = 80;
        let timeout;
        let lastPageUpdate = 0;
        let lastPageComponent = 0;
        let lastPageProps = {};
        let loading = false;

        router.on('finish', (event) => {
            loading = false;
            clearTimeout(timeout);
        });
        router.on('navigate', (event) => {
            if (!loading && event.detail.page?.props?.inertiaLoading) {
                // If the request was interrupted while empty component was rendered, and user navigates back to that state, reload data.
                router.visit(event.detail.page.url, {
                    preserveScroll: true,
                    preserveState: false,
                });
            }
        });
        page.subscribe((value) => {
            // Sometimes rendering of empty components start before request is finished, but ends after it, replacing content with empty props. Not sure how this happens, but code below 'fixes' it by replacing component with real data.
            if (
                (new Date()).getTime() - lastPageUpdate < progressDelay
                && lastPageComponent === value?.component
                && Object.values(lastPageProps || {}).length
                && value?.props.inertiaLoading
            ) {
              
                loading = false;
                router.replace({
                    component: lastPageComponent,
                    props: lastPageProps,
                    preserveScroll: true,
                    preserveState: false,
                });
            }
            lastPageUpdate = (new Date()).getTime();
            lastPageComponent = value?.component;
            lastPageProps = value?.props;
        })

        router.on('before', (event) => {
            routes = routes || get(page).props.routes;

            const url = new URL(window.location.href);
            const path = event.detail.visit.url.pathname;
            if (
                routes
                && !event.detail.visit.prefetch
                && !event.detail.visit.async
            ) {
                timeout = setTimeout(async () => {
                    if (
                        event.detail.visit.url.href !== decodeURI(window.location.href)
                        && event.detail.visit.url.href !== decodeURI(window.location.href).replace('?', '/?')
                        && event.detail.visit.method === 'get'
                        && event.detail.visit.url.origin === url.origin
                    ) {
                        for (const key of Object.keys(routes)) {
                            const regex = new RegExp(key);
                            if (regex.test(path)) {
                                const sameComponent = get(page).component === routes[key];
                                // Starting empty component rendering
                                loading = true;
                                router.push({
                                    component: routes[key],
                                    url: event.detail.visit.url.href,
                                    props: (currentProps) => {
                                        return sameComponent
                                            ? {...currentProps, inertiaLoading: true}
                                            : {inertiaLoading: true}
                                    },
                                    preserveScroll: sameComponent,
                                    preserveState: sameComponent,
                                });

                                return;
                            }
                        }
                    }
                }, progressDelay);
            }
        })
    })()
}

This solution has only 2 limitations.

1. You can't use code splitting
2. In your controllers, you have to pass component name as string literal

// works
return Inertia::render('Book/Index', []);
// also works 
return inertia('Book/Index', [])
// won't be bart of 'routes' prop, you may have to add it manually
return Inertia::render($componentName, []);

[jefhar]

In Inertia 2, there is prefetching and Laravel has a Vite prefetch strategy, so this discussion might be moot, except for the first page load.

[guratr]

Prefetching is nice on desktop, where prefetch on hover makes navigation feel instant, but on mobile 'click' and 'hover' don't do anything(prefetching on mount is appropriate only on specific sites/pages). And combine this with slower mobile connection and navigation becomes really unresponsive, and this not only affects user experience but leads to lover INP(Interaction to Next Paint) values and search engine ranking.
Would really hope to see propper implementation of this in inertia.
Just compare responsiveness with Slow 4G throttling. And this is with Frankenphp on local server(avg. server response time is 40ms ), so no amount of optimizing in other parts can help.
P.S. Sorry for huge gifs.
Rendering component without waiting for response.

Rendering component after receiving response.

On 3G you have to wait 2 seconds to see any change.

[stefanocurnis]

It’d be awesome if Inertia let you choose between client-side and server-side routing.

I'm probably missing something but I’m not sure why the author chose to handle routing on the server — it’d be nice to keep state on the server and refresh it completely on every route change, but let the client handle routing so we get instant SPA transitions. Inertia could still take care of state and data transport.