links

The links function defines which <link> elements to add to the page when the user visits a route.

  1. import type { LinksFunction } from "@remix-run/node"; // or cloudflare/deno
  3. export const links: LinksFunction = () => {
  4.   return [
  5.     {
  6.       rel: "icon",
  7.       href: "/favicon.png",
  8.       type: "image/png",
  9.     },
  10.     {
  11.       rel: "stylesheet",
  12.       href: "https://example.com/some/styles.css",
  13.     },
  14.     { page: "/users/123" },
  15.     {
  16.       rel: "preload",
  17.       href: "/images/banner.jpg",
  18.       as: "image",
  19.     },
  20.   ];
  21. };

There are two types of link descriptors you can return:

HtmlLinkDescriptor

This is an object representation of a normal <link {...props} /> element. View the MDN docs for the link API.

The links export from a route should return an array of HtmlLinkDescriptor objects.

Examples:

  1. import type { LinksFunction } from "@remix-run/node"; // or cloudflare/deno
  3. import stylesHref from "../styles/something.css";
  5. export const links: LinksFunction = () => {
  6.   return [
  7.     // add a favicon
  8.     {
  9.       rel: "icon",
  10.       href: "/favicon.png",
  11.       type: "image/png",
  12.     },
  14.     // add an external stylesheet
  15.     {
  16.       rel: "stylesheet",
  17.       href: "https://example.com/some/styles.css",
  18.       crossOrigin: "true",
  19.     },
  21.     // add a local stylesheet, remix will fingerprint the file name for
  22.     // production caching
  23.     { rel: "stylesheet", href: stylesHref },
  25.     // prefetch an image into the browser cache that the user is likely to see
  26.     // as they interact with this page, perhaps they click a button to reveal in
  27.     // a summary/details element
  28.     {
  29.       rel: "prefetch",
  30.       as: "image",
  31.       href: "/img/bunny.jpg",
  32.     },
  34.     // only prefetch it if they're on a bigger screen
  35.     {
  36.       rel: "prefetch",
  37.       as: "image",
  38.       href: "/img/bunny.jpg",
  39.       media: "(min-width: 1000px)",
  40.     },
  41.   ];
  42. };

PageLinkDescriptor

These descriptors allow you to prefetch the resources for a page the user is likely to navigate to. While this API is useful, you might get more mileage out of <Link prefetch="render"> instead. But if you’d like, you can get the same behavior with this API.

  1. export const links: LinksFunction = () => {
  2.   return [{ page: "/posts/public" }];
  3. };

This loads up the JavaScript modules, loader data, and the stylesheets (defined in the links exports of the next routes) into the browser cache before the user even navigates there.

Be careful with this feature. You don’t want to download 10MB of JavaScript and data for pages the user probably won’t ever visit.