wait for pending modules

Author: lubieowoce

packages/next/src/server/app-render/app-render.tsx

@@ -197,6 +197,7 @@ import {
   trackPendingChunkLoad,
   trackPendingImport,
   trackPendingModules,
+  trackPendingModulesInRender,
 } from './module-loading/track-module-loading.external'
 import { isReactLargeShellError } from './react-large-shell-error'
 import type { GlobalErrorComponent } from '../../client/components/builtin/global-error'
@@ -2199,6 +2200,12 @@ async function renderToStream(
       // This render might end up being used as a prospective render (if there's cache misses),
       // so we need to set it up for filling caches.
       const cacheSignal = new CacheSignal()
+
+      // If we encounter async modules that delay rendering, we'll also need to restart.
+      // TODO(restart-on-cache-miss): technically, we only need to wait for pending *server* modules here,
+      // but `trackPendingModules` doesn't distinguish between client and server.
+      trackPendingModulesInRender(cacheSignal)
+
       const prerenderResumeDataCache = createPrerenderResumeDataCache()
 
       requestStore.prerenderResumeDataCache = prerenderResumeDataCache

packages/next/src/server/app-render/module-loading/track-module-loading.external.ts

@@ -6,6 +6,12 @@ import {
   trackPendingChunkLoad,
   trackPendingImport,
   trackPendingModules,
+  trackPendingModulesInRender,
 } from './track-module-loading.instance' with { 'turbopack-transition': 'next-shared' }
 
-export { trackPendingChunkLoad, trackPendingImport, trackPendingModules }
+export {
+  trackPendingChunkLoad,
+  trackPendingImport,
+  trackPendingModules,
+  trackPendingModulesInRender,
+}

packages/next/src/server/app-render/module-loading/track-module-loading.instance.ts

@@ -52,3 +52,21 @@ export function trackPendingModules(cacheSignal: CacheSignal): void {
   // we can unsubscribe it.
   cacheSignal.cacheReady().then(unsubscribe)
 }
+
+/**
+ * Like `trackPendingModules`, but for use in a render, not a prerender.
+ * See `CacheSignal#cacheReadyInRender` for an explanation.
+ */
+export function trackPendingModulesInRender(cacheSignal: CacheSignal): void {
+  const moduleLoadingSignal = getModuleLoadingSignal()
+
+  // We can't just use `cacheSignal.trackRead(moduleLoadingSignal.cacheReady())`,
+  // because we might start and finish multiple batches of module loads while waiting for caches,
+  // and `moduleLoadingSignal.cacheReady()` would resolve after the first batch.
+  // Instead, we'll keep notifying `cacheSignal` of each import/chunk-load.
+  const unsubscribe = moduleLoadingSignal.subscribeToReads(cacheSignal)
+
+  // Later, when `cacheSignal` is no longer waiting for any caches (or imports that we've notified it of),
+  // we can unsubscribe it.
+  cacheSignal.cacheReadyInRender().then(unsubscribe)
+}