[RFD] Define preload links based on loader data

[nicholaschiang]

Similar to how the meta function is passed your loader's data, it would be nice to be able to do something like this with links:

export const links: LinksFunction<typeof loader> = ({ data }) => [
  {
    rel: 'preload',
    href: data.profileImageUrl,
    as: 'image',
  }
]

export async function loader({ params }: LoaderArgs) {
  return prisma.user.findUnique({ where: { id: params.userId } })
}

This has some benefits over simply inlining the <link rel='preload'> alongside the image (like Next.js does), mainly that Remix now knows about that preload and can preload it when I request to preload the user's page:

// When a user hovers over the "Profile" link, their `profileImageUrl` is preloaded alongside
// the profile page data, CSS, JS, etc (because it was exported in that page's `links` function).
export default function HomePage() {
  return (
    <Link prefetch='intent'>Profile</Link>
  )
}

Note that this proposal comes without me actually looking into Remix's source code at all (I don't know how hard this would be or if it is even possible). But I think this would be really cool to have for free from Remix.

[nicholaschiang]

Potentially related to #2905.

[sergiodxa]

With v2 MetaFunction you can return link tags, and because MetaFunction receives the loader data you can render link tags based on that

export async function loader({ request }: DataFunctionArgs) {
  return json({ avatar: await getUserAvatar(request) })
}

export let meta: V2_MetaFunction<typeof loader> = ({ data }) => {
  if (!data) return [];
  return [
    { tagName: "link", rel: "preload", href: data.avatar, as: "image" }
  ]
}

Note that if you also use <Link preload> those links will not be preloaded before the user navigate, while a <link rel="preload"> rendered by LinksFunction will block navigation until the file is preloaded.

In case you want to suggest passing data to LinksFunction, that could work but it will have the same effect on <Link preload> as V2_MetaFunction, the way Remix initiates a preload when rendering a <Link preload> is that it uses a <link> tag too, because of this Remix doesn't have direct access to the data to call LinksFunction, so if it depends on the data Remix will not be able to call it until the navigation happens.

[nicholaschiang]

ah, yes, the whole "i need data before i can call this function" could add waterfalls that may slow things down. makes sense.