Prerendering with concurrency

[kirillgroshkov]

Our build right now has a bottleneck of prerendering:

ssr: false, list of ~1000 pages given to prerender, which takes ~1 minute to execute serially.

I checked and found no configuration to enable concurrency, while other frameworks (SvelteKit, TanStack, Vike) do have concurrency configurable.

I do understand the concern of not DoS-ing/overloading the CMS, and do understand that serial execution is a safe general default setting. But I would like to see the possibility to define e.g prerenderConcurrency: 4, which would run prerendendering concurrently (e.g with p-map).

[kirillgroshkov]

UPD: I hacked together a PoC patch, which works for my project.

Prerender step timings on local M2 Max laptop:

concurrency level vs time:

1  => 57 sec
2  => 34 sec
4  => 30 sec
8  => 30 sec
16 => 29 sec
32 => 29 sec

Timings in CI (self-hosted GH Actions with 4 cpu cores):

concurrency level vs time:

1  => 3m
2  => 1m42s
4  => 2m

One more run in CI, since the timings were quite different:

concurrency level vs time:

1  => 3m51s
2  => 1m43s
4  => 1m53s

Looks like both locally and in CI the biggest gain is when moving concurrency from 1 to 2 (and diminishing, or sometimes even negative returns after that), yielding some ~30% consistent speedup.

[kirillgroshkov]

Patch (for pnpm) below:

diff --git a/dist/vite.js b/dist/vite.js
index e5d6dd1c9e774d0276d573e1f02455a2f92a57ae..7620a78ed555887238bad55dd5e0e4d719ca9b7b 100644
--- a/dist/vite.js
+++ b/dist/vite.js
@@ -4126,10 +4126,15 @@ async function handlePrerender(viteConfig, reactRouterConfig, serverBuildDirecto
     }
   }
   let buildRoutes = createPrerenderRoutes(build.routes);
-  for (let path6 of build.prerender) {
+
+  const { pMap } = require('@naturalcycles/js-lib/promise');
+  const concurrency = Number(process.env.PRERENDER_CONCURRENCY) || 1;
+  console.log({ PRERENDER_CONCURRENCY: concurrency })
+  // for (let path6 of build.prerender) {
+  await pMap(build.prerender, async path6 => {
     let matches = (0, import_react_router2.matchRoutes)(buildRoutes, `/${path6}/`.replace(/^\/\/+/, "/"));
     if (!matches) {
-      continue;
+      return
     }
     let leafRoute = matches ? matches[matches.length - 1].route : null;
     let manifestRoute = leafRoute ? build.routes[leafRoute.id]?.module : null;
@@ -4186,7 +4191,7 @@ async function handlePrerender(viteConfig, reactRouterConfig, serverBuildDirecto
         } : void 0
       );
     }
-  }
+  }, { concurrency });
 }
 function getStaticPrerenderPaths(routes) {
   let paths = ["/"];

[kirillgroshkov]

Would a PR be welcome, that adds a configuration property (not the env variable like in the PoC patch) named like prerenderConcurrency that adds this functionality?

If yes, how should pMap be implemented - as a new dependency, vendored (copy-pasted)? (vendored is probably better, it's a small snippet and doesn't need to change over time)

[brophdawg11]

👍 yeah this seems like an easy win to speed up prerender builds. We'd definitely accept a PR! I'd vote to just vendor/inline the pMap implementation to avoid any new deps.

[kirillgroshkov]

Allright, I'll work on a PR!

Will inline the pMap implementation 👍

Is prerenderConcurrency a good name for this option?

[kirillgroshkov]

Hi @brophdawg11 and @jacob-ebey , I've put together a PR for this, please kindly take a look: #14380

[jacob-ebey]

👍

[brophdawg11]

This has been implemented as an alpha feature in #14380 and is available for alpha testing in 0.0.0-experimental-afe1c2609

[brophdawg11]

Tracking Issue: #14383