[feature]: Expose Remix Context to loaders?

[kentcdodds]

I was converting a bunch of my old "other routes" to resource routes: kentcdodds/kentcdodds.com@514d834

It was awesome, except for my sitemap.xml route which needs the remixContext to work: https://github.com/kentcdodds/kentcdodds.com/blob/514d834d18ca8111a6c128ef101eddde45f43b9f/app/utils/sitemap.server.ts#L22

The way my sitemap works is it goes through all the route modules and includes them in the sitemap. There's a default for each route, but there's also the ability for routes to add a custom getSitemapEntries function on handle: https://github.com/kentcdodds/kentcdodds.com/blob/514d834d18ca8111a6c128ef101eddde45f43b9f/app/utils/sitemap.server.ts#L29

It works really well: https://kentcdodds.com/sitemap.xml

Eventually this could be an open source module that people could easily install and include on their site:

// app/routes/sitemap[.]xml.tsx
export {loader} from 'remix-sitemap'

I'm not sure whether there's any other way to get access to all the route modules, but in any case, my loader needs access to the route modules as well as the manifest.

[andrelandgraf]

I am currently using the npx remix routes --json command to get the routes during build time and to add an sitemap.xml file to the public/ folder (gist). The routes JSON is a great starting point but there is still a lot of work that has to be done to parse it into a sitemap.

It would be great if we could access the routes information during runtime but it would be awesome if Remix could take care of the sitemap generation as well! In the end of the day, Remix knows best what routes have default exports and so on!

export declare type SitemapEntry = {
    loc: string;
    lastmod: string;
   changefreq: string;
   priority: string;
};

import { generateSitemapXMLString } from 'remix-sitemap';

// Remix only knows about all static routes (without route params), so if any dynamic routes should be calculated, the application needs to take care of that
const someDynamicEntries: SitemapEntry[] = ...
// Remix could generate a sitemap for all static routes but also accept an array of dynamic routes that has been calculated during runtime by the Remix application
const sitemap = generateSitemapXMLString(someDynamicEntries)

[kentcdodds]

I feel really great about the sitemap functionality my app has actually. It leaves the sitemap entries up to the routes themselves which I think is the right place for it (like my app/routes/blog.$slug.tsx route). I just need access to the route modules themselves and the manifest.

[andrelandgraf]

Moving the sitemap functionality to the routes is great, I like that, too! But it would be even cooler if Remix could handle the magic of assembling that functionality into a sitemap.

I am not saying Remix shouldn't expose the modules or manifest. I just feel like exposing a function such as generateSitemapXMLString would be really convenient. It takes a lot of boilerplate code right now to generate a sitemap. Sitemaps are very fundamental, so it would be great if it was baked into Remix! I do acknowledge though that any good solution would take a lot of planning and time.

[sdavids]

Should there be a new issue for this sitemap functionality?

[0x221A]

After deep dive into @kentcdodds's website project and remix project. I just found the other way that easier is just to pass routeModules into context by using the getLoadContext() function. This is a little bit hacky btw 😂. Since @kentcdodds use only routeModules to access the handle() function so just create another routeModules and pass it to context.

import { createEntryRouteModules } from "@remix-run/server-runtime/entry";

const handleRequest = createPagesFunctionHandler({
  build,
  getLoadContext() {
    return {
      routeModules: createEntryRouteModules(build.routes),
    };
  },
});

After this, I can easily create a sitemap using just the loader() function 😄

[kentcdodds]

Oh nice, I didn't realize that was possible. Unfortunately that won't work with the remix server. Would still be nice to expose that to loaders somehow.

[0x221A]

Would still be nice to expose that to loaders somehow.

Instead of exposing Remix context to loader and action what about exposing this useRemixEntryContext() API to the user. Is it possible or does it has any concern?

[kentcdodds]

That won't work for me because I want to send an XML document, not a React component :)

[fvaldes33]

I like @andrelandgraf approach but for CMS managed content that might change more frequently than builds it wouldn't work. What are the pros/cons to having the sitemap.xml just be a route that is generated dynamically on load? Would that be bad practice?

I do like @kentcdodds idea of each route managing their own sitemap declarations. Could we have a new named export instead of baking it into the handle function.

export const sitemap: SitemapFunction = ({ request }) => {
  // here you can query the database to get the last mod date of this entry

  return {
    loc: request.url,
    lastmod: "2022-06-29",
    priority: 1,
    changefreq: 'weekly'
  }
}

Then at the remix config level, we can turn the sitemap on/off and maybe define the route name for the sitemap.

[bspotswood]

I think there are a number of possible use cases for having the context and/or routing modules list available to the loader. I'm wanting to use the routing info to populate a listing of MDX documents based on what is already known about them by Remix. I found that the routes are baked into the build with the front matter attributes already there. Having this available to a loader makes server side posts listing a breeze.

[lpsinger]

It kind of blows my mind, but you can actually import the server build (which contains the manifest) inside a route module, like this:

import * as build from '@remix-run/dev/server-build'
import { useLoaderData } from '@remix-run/react'

export function loader() {
  return Object.keys(build.routes)
}

export default function () {
  const routes = useLoaderData<typeof loader>()
  return (
    <>
      <h1>List of routes</h1>
      <ul>
        {routes.map((route) => (
          <li key={route}>{route}</li>
        ))}
      </ul>
    </>
  )
}

What could go wrong?

[lpsinger]

I've used this approach for generating site maps in balavishnuvj/remix-seo#14. I've also created a fork at https://github.com/nasa-gcn/remix-seo that includes this concept.

[kentcdodds]

That's fantastic! I think I'd like to add that to the Epic Stack. Interested in contributing it?

[lpsinger]

Oh, you mean adding the sitemap and robots.txt stuff? Sure! We'll dogfood it briefly (nasa-gcn/gcn.nasa.gov#1355) but when we're sure it's working as we expect I'll make a PR for the Epic Stack.

[kentcdodds]

Sick!