Breeze and AddLinkHeadersForPreloadedAssets

The breeze scaffolding creates AddLinkHeadersForPreloadedAssets, yet this is not mentioned in Inertia setup.

What is it for?

<?php

namespace Illuminate\Http\Middleware;

use Illuminate\Support\Collection;
use Illuminate\Support\Facades\Vite;

class AddLinkHeadersForPreloadedAssets
{
    /**
     * Handle the incoming request.
     *
     * @param  \Illuminate\Http\Request  $request
     * @param  \Closure  $next
     * @return \Illuminate\Http\Response
     */
    public function handle($request, $next)
    {
        return tap($next($request), function ($response) {
            if (Vite::preloadedAssets() !== []) {
                $response->header('Link', Collection::make(Vite::preloadedAssets())
                    ->map(fn ($attributes, $url) => "<{$url}>; ".implode('; ', $attributes))
                    ->join(', '));
            }
        });
    }
}

gych

2 years ago

Level 29

Its a middleware from Laravel that adds Link headers to HTTP responses. https://laravel.com/api/11.x/Illuminate/Http/Middleware/AddLinkHeadersForPreloadedAssets.html

Its not in the Inertia docs because its not something that comes from Inertia.

It tells the browser to preload the assets to reduce the load time of a page when this asset it used on that page, which improves the performance and user experience.

2 likes

panthro

2 years ago

Level 4

@gych thanks for the reply.

Are you able to give me an example / simpler explanation.

Other than the docs, I could find no information on it or why to use it.

gych

2 years ago

Level 29

@panthro It adds the Link header to the response headers, the browser then reads this and pre loads the assets like for example js, css

If you check the headers in the network tab of the browser dev tools the value for the Link header looks similar to this:

<https://yourdomain.com/build/assets/app-2KJpkKuX.css>; rel="preload"; as="style", <https://yourdomain.com/build/assets/app-zP4m-bAu.js>; rel="modulepreload"

Preload links are not only used with Laravel, read this article it explains for what and why preload links are used https://nitropack.io/blog/post/link-rel-preload-explained

panthro

2 years ago

Level 4

@gych thanks for replying.

So, the middleware just looks at my vite assets, e.g. css/js and then adds a Link header for each resource, making it load faster. Have I understood that correctly?

gych

2 years ago

Level 29

@panthro No problem :)

Yes indeed, it tells the browser to preload those assets so that the loading speed is improved.

JimNayzium

1 year ago

Level 2

@gych Thanks for your clear explanations!! I am a novice coder at best and new to Laravel overall, so I truly appreciate anyone taking the time to explain things so well!! So my question particularly about this \Illuminate\Http\Middleware\AddLinkHeadersForPreloadedAssets is if I am building an API delivery system ONLY, and do not need much of a front end if any at all, then this being in the bootstrap/app.php is unneccessary, right?

I am trying to hunt down a few small conflicts with my setup just curious. THANKS!

Please or to participate in this conversation.