Add prerender({ routes }) property

[okalil]

Currently the prerender function in react router config only provides a getStaticPaths method to obtain the urls without dynamic segment.
It would be interesting if it provided the complete list of routes including additional data (such as the handle). This way it would be more practical to implement additional static generation patterns through route information. For example, I could create a route with

export const handle = { prerender: true }

or

export const handle = { staticParams: () => getStaticParamsFromDb() }

and access it inside the prerender function.

[heiwen]

I was recently developing an og:image rendering route for a static blog. I use the route handle to extract the required content. Having the handle available in getStaticPaths would allow me to pre-render the route.

Until then, I have to fallback to SSR. Interestingly enough, that turned out to be a way more complex endeavor than I anticipated. Primarily because image libraries are implemented in native code, and my target architecture doesn't match my Mac development machine. It became even more complicated due to a serverless deployment target.

Took me a few days to figure that out, which could have been much simpler with pre-rendering 🙂

[okalil]

I'm not sure about your case details, but I think you could still use prerender option, just fetching the params inside, something like:

export default {
  prerender: async ({ getStaticPaths }) => {
    const staticPaths = await getStaticPaths();
    const blogPaths = await getBlogPaths(); // fetches blog ids from db and map to blog route paths
    return ["/", ...staticPaths, ...blogPaths];
  },
} satisfies Config;

My idea is mostly to have a generic way to do that at the route level for convenience, so that we don't need to "overload" the prerender function body for every dynamic route we may have in the app.

[heiwen]

I could, but in my case there is no DB, just .mdx. Meaning, I have to recode the whole route name to file / module path resolution logic. All that has already happened in getStaticPaths() and I only need the mapped route module / handle for each 😊

[sergiodxa]

The handle is a thing for you to use, not for the framework, you can put anything there, even a plain string if you want.

If what you want is a way to mark a route to be pre-rendered from inside the route module, then it should be a new export like export const prerender = true.

But also, take into account that what your prerender are pages/URLs, not routes, a URL like /users/123 can match:

• app/root
• app/routes/_layout
• app/routes/_layout.users
• app/routes/_layout.users.$userId
  And probably even more routes.

So a route may say "I'm 100% prerenderable" but then a parent or nested route may not be.

[okalil]

The ideia is more like accessing the handle inside the prerender function, the framework doesn't need to care about the details inside the handle.

[QzCurious]

I'm trying to do a static site and with sitemap. I want similar functionality. After some exploration I found something interesting: virtual:react-router/server-build. It DOES list all routes with its Route Module. So I can extract out handle or any custom export. But virtual:react-router/server-build seem not meant to be used in a loader (I want use it for sitemap).

What I'm trying to say is, instead of injecting information to prerender, having me a way to list all routes with its Route Module would solve all the problems.

---

I'm still try to understand how React Router parse out the information from routes.ts.