Prefetch on hover

[dillonkearns]

In elm-pages 1.0, there was some code to automatically prefetch the data for a page when you hover over a link.

That ended up needing the client bundle to load up the list of every static route, and then checking if a route is a known static route before prefetching it:

#60
#37

This is clunky and not great for performance. It means that we need to:

• Include all static page routes in the client bundle (imagine we have thousands of pages, this could be problematic)
• Go through this list of routes in the client-side JS and check if it's a known page before prefetching

In elm-pages 2.0, I'm going for a leaner approach. Since there is now a Route type, we can make some nice helpers for a link helper function that takes a route and adds a special HTML attribute to tell elm-pages that it's a prefetchable link.

Here's a working example in the current beta:

elm-pages/examples/docs/src/Page/Blog.elm

Lines 196 to 217 in 33a10ed

	link : Route.Route -> List (Attribute msg) -> List (Html msg) -> Html msg
	link route attrs children =
	Route.toLink
	(\anchorAttrs ->
	a
	(List.map Attr.fromUnstyled anchorAttrs ++ attrs)
	children
	)
	route
	blogCard : ( Route, Article.ArticleMetadata ) -> Html msg
	blogCard ( route, info ) =
	link route
	[ css
	[ Tw.flex
	, Tw.flex_col
	, Tw.rounded_lg
	, Tw.shadow_lg
	, Tw.overflow_hidden
	]
	]

It successfully prefetches on hover.

Looking for feedback

I took inspiration from the way SvelteKit is doing this with using a specific HTML attribute for pages to prefetch.

https://github.com/sveltejs/kit/blob/dad93fc39721b711f06a316b0842d04f024ba69e/packages/kit/src/runtime/client/router.js#L75-L94

I'd be interested to hear any feedback on this new approach in general.

I'm also trying to find a nice abstraction for this. Since people will be using different drop-in replacement HTML libraries, it's hard to have one specific library.

But we can provide a helper in the generated Route.elm module that provides vanilla elm/html Attributes since almost all Elm view libraries will have a way to pull in vanilla attributes or tags.

In the current beta branch, I'm defining these helpers in Route.elm:

toLink : (List (Attribute msg) -> tag) -> Route -> tag
toLink toAnchorTag route =
    toAnchorTag
        [ Attr.href ("/" ++ (routeToPath (Just route) |> String.join "/"))
        , Attr.attribute "elm-pages:prefetch" ""
        ]


link : Route -> List (Attribute msg) -> List (Html msg) -> Html msg
link route attributes children =
    toLink
        (\anchorAttrs ->
            Html.a
                (anchorAttrs ++ attributes)
                children
        )
        route

I'm also considering adding a helper function that allows you to programmatically prefetch.

Route.prefetch : Route -> Cmd msg

That would allow you to do custom prefetching if you wanted to do some low-level optimizations to prefetch the data for a page based on loading a page, scroll position, etc.