[Feature]: prefretch on appearance on screen (Intersection Observer API)

[ccssmnn]

What is the new or updated feature that you are suggesting?

Add the option prefetch="screen" or prefetch="intersect" to the Link components.

Why should this feature be included?

Currently, 3 types of prefetching links are supported:

• none does not prefetch
• intent does prefetch on hover (only saves time between hover and click)
• render does prefetch when being rendered (prefetches a link that is not even clickable, e.g. hidden or not visible yet)

render prefetches the link even if it is not viewed. intent is quite precise, but only when the page is viewed on a device with a mouse. screen / intersect could take advantage of the Intersection Observer API to prefetch links, that appear on the screen.

The current workaround would be to manually set the property to render with the Intersection Observer.

---

I would be happy to contribute. 😊

[sairajchouhan]

It looks awesome @ccssmnn, is there any repo that you could share where I can have a look over the code?

[ccssmnn]

@sairaj2119 a repo for the workaround?

[sairajchouhan]

yup

[ccssmnn]

You could do it like this:

import { RemixLinkProps } from "@remix-run/react/components";
import { useEffect, useRef, useState } from "react";
import { Link } from "remix";

interface MyLinkProps extends RemixLinkProps {
  prefetchOnIntersect?: boolean; // add our own prop to the game
}

export const MyLink: React.FC<MyLinkProps> = (props) => {
  const { prefetchOnIntersect, ...rest } = props; // split the props to not break anything
  const ref = useRef<any>();
  const [visible, setVisible] = useState(false);
  useEffect(() => {
    if (props.prefetchOnIntersect) {
      const observer = new IntersectionObserver(([entry]) => {
        setVisible(entry.isIntersecting);
      });
      observer.observe(ref.current);
      return () => {
        observer.disconnect();
      };
    }
  }, [props.prefetchOnIntersect]);
  return (
    <Link
      ref={ref}
      {...rest}
      prefetch={
        props.prefetchOnIntersect && visible ? "render" : props.prefetch
      }
    />
  );
};

And use it anywhere like you would use the normal Link component.

<MyLink to="/" prefetchOnIntersect>Hello</MyLink>

[sairajchouhan]

That helps thankyou @ccssmnn

[sergiodxa]

The prefetch intent should support this, right now intent is just hover but I know the idea is to make it smarter, eg start the prefetch when the cursor is near the link not just hovering.

[ccssmnn]

Relying on the cursor will fail on mobile. But I see how intersect could prefetch too much.

I saw prefetch only fetching some JS. Only clicking the link actually makes the data query. When showing a few links which are all links to blog posts (same $slug-route) only this one JS is fetched. Shouldn't loader data be fetched too?

[sergiodxa]

Relying on the cursor will fail on mobile

Yes, but that will be progressive enhancement for desktop users, mobile users can use another techniques to do the prefetch with accuracy

Shouldn't loader data be fetched too?

It prefetch data, code and links (from links functions), except in Safari where it only prefetch code and links I think

[jrestall]

I like prefetch="viewport" as the option name, it's consistent with SveleteKit for example.

SvelteKit's implementation details as an example.

Issue: sveltejs/kit#3633
Code: https://github.com/sveltejs/kit/blob/main/packages/kit/src/runtime/client/client.js#L1184
Docs: https://kit.svelte.dev/docs/link-options#data-sveltekit-preload-code

"viewport" means that links will be preloaded once they enter the viewport

NextJS also supports viewport prefetching using IntersectionObserver.
https://github.com/vercel/next.js/blob/99166f8231d48f0dbe0a8849ab98a9c775c44b16/packages/next/src/client/link.tsx#L507

VitePress
https://github.com/vuejs/vitepress/blob/2985f46e138dee953d7ec265ee1013b60903f233/src/client/app/composables/preFetch.ts#L34

[brophdawg11]

This was implemented in 1.18.0 via #6433