remote-components 0.4.12 → 0.4.14

package/dist/host/nextjs/app/client-only.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/host/nextjs/app-client-only.tsx","../../../../src/host/nextjs/image-shared.ts","../../../../src/host/nextjs/shared-import.ts","../../../../src/host/nextjs/app-compat.tsx"],"sourcesContent":["'use client';\n\nimport type React from 'react';\nimport { useMemo } from 'react';\nimport { createImageLoaderSharedEntries } from '#internal/host/nextjs/image-shared';\nimport { tryImportShared } from '#internal/host/nextjs/shared-import';\nimport { RemoteComponentsContext } from '#internal/host/react/context';\nimport type { ConsumeClientOnlyConfig } from '#internal/host/shared/config';\nimport type { ResolveClientUrl } from '#internal/runtime/url/resolve-client-url';\nimport {\n  type ConsumeRemoteComponentProps,\n  ConsumeRemoteComponent as ConsumeRemoteComponentReact,\n} from '#remote-components/host/react';\nimport { routerImpl } from './app-compat';\n\nconst sharedModules = async (\n  userShared?: ConsumeRemoteComponentProps['shared'],\n  resolveClientUrl?: ResolveClientUrl,\n) => {\n  const [resolvedShared, resolvedUserShared] = await Promise.all([\n    tryImportShared(),\n    userShared ?? Promise.resolve({}),\n  ]);\n  return {\n    ...resolvedShared,\n    'next/router': routerImpl,\n    ...createImageLoaderSharedEntries({ unbound: resolveClientUrl }),\n    ...resolvedUserShared,\n  };\n};\n\n/**\n * Provider for Next.js App Router hosts. Provides real Next.js implementations\n * of `next/image`, `next/navigation`, `next/link`, etc. to all nested\n * `<ConsumeRemoteComponent>` instances.\n *\n * Works in both Server and Client Components — set it up once in your layout\n * and use `<ConsumeRemoteComponent>` from `remote-components/react` everywhere:\n *\n * ```tsx\n * import { RemoteComponentsClientProvider } from 'remote-components/host/nextjs/app/client-only';\n *\n * <RemoteComponentsClientProvider resolveClientUrl={proxyClientRequestsThroughHost}>\n *   {children}\n * </RemoteComponentsClientProvider>\n * ```\n */\nexport function RemoteComponentsClientProvider({\n  shared,\n  resolveClientUrl,\n  children,\n  ...props\n}: ConsumeClientOnlyConfig & { children: React.ReactNode }) {\n  const mergedShared = useMemo(\n    () => sharedModules(shared, resolveClientUrl),\n    [shared, resolveClientUrl],\n  );\n  return (\n    <RemoteComponentsContext\n      value={{ shared: mergedShared, resolveClientUrl, ...props }}\n    >\n      {children}\n    </RemoteComponentsContext>\n  );\n}\n\n/**\n * `ConsumeRemoteComponent` for Next.js App Router hosts. Provides real Next.js\n * implementations of `next/image`, `next/navigation`, `next/link`, etc.\n *\n * The provider approach is recommended because it works in both Server and Client\n * Components — set up `RemoteComponentsClientProvider` from this module once in\n * your layout, and use `<ConsumeRemoteComponent>` from `remote-components/react`\n * everywhere. Import this component only when adding a provider is not practical.\n */\nexport function ConsumeRemoteComponent(props: ConsumeRemoteComponentProps) {\n  if (typeof props.src !== 'string' && !(props.src instanceof URL)) {\n    return props.children ?? null;\n  }\n\n  return (\n    <ConsumeRemoteComponentReact\n      {...props}\n      shared={sharedModules(props.shared, props.resolveClientUrl)}\n    />\n  );\n}\n","import { createElement, forwardRef } from 'react';\nimport { createRemoteImageLoader } from '#internal/host/shared/remote-image-loader';\nimport { getScope } from '#internal/runtime/turbopack/remote-scope';\nimport { bindResolveClientUrl } from '#internal/runtime/url/default-resolve-client-url';\nimport type {\n  InternalResolveClientUrl,\n  ResolveClientUrl,\n} from '#internal/runtime/url/resolve-client-url';\n\ntype SharedImageModule = (bundle: string) => Promise<unknown>;\n\nfunction resolveForBundle(\n  unbound: ResolveClientUrl | undefined,\n  bundle: string,\n): InternalResolveClientUrl | undefined {\n  if (!unbound) return undefined;\n  const remoteSrc = getScope(bundle)?.url.href ?? '';\n  return bindResolveClientUrl(unbound, remoteSrc);\n}\n\n/**\n * Creates shared module entries for image-related modules that route\n * optimization requests through the remote's `/_next/image` endpoint.\n *\n * Pass `bound` when the resolver already has `remoteSrc` applied (App Router).\n * Pass `unbound` when only the raw 2-arg `ResolveClientUrl` is available\n * (Pages Router, client-only provider).\n */\nexport function createImageLoaderSharedEntries({\n  bound,\n  unbound,\n}: {\n  bound?: InternalResolveClientUrl;\n  unbound?: ResolveClientUrl;\n} = {}): Record<string, SharedImageModule> {\n  const loaderEntry: SharedImageModule = (bundle: string) => {\n    const resolveClientUrl = bound ?? resolveForBundle(unbound, bundle);\n    return Promise.resolve({\n      default: createRemoteImageLoader(bundle, resolveClientUrl),\n      __esModule: true,\n    });\n  };\n\n  // Cross-version compat: remotes <=0.2.x request `next/image` as a shared module.\n  // Wraps the host's Image component with the remote image loader injected\n  // via the `loader` prop. Can be removed once 0.2.x support is dropped.\n  const imageEntry: SharedImageModule = async (bundle: string) => {\n    const resolveClientUrl = bound ?? resolveForBundle(unbound, bundle);\n    const rawLoader = createRemoteImageLoader(bundle, resolveClientUrl);\n    // Wrap to match Next.js `ImageLoader` signature (no `config` param).\n    // The raw loader expects `{ config, src, width, quality }` but the public\n    // `loader` prop is called with `{ src, width, quality }` only.\n    const remoteLoader = Object.assign(\n      (p: { src: string; width: number; quality?: number }) =>\n        rawLoader({ ...p, config: { path: '/_next/image' } }),\n      { __next_img_default: true as const },\n    );\n    const mod = await import('next/image');\n    const OriginalImage = mod.default;\n    type ImageProps = Parameters<typeof OriginalImage>[0];\n    const RemoteImage = forwardRef<HTMLImageElement, ImageProps>((props, ref) =>\n      createElement(OriginalImage, {\n        ...props,\n        loader: props.loader ?? remoteLoader,\n        ref,\n      }),\n    );\n    RemoteImage.displayName = 'RemoteImage';\n    return { ...mod, default: RemoteImage, __esModule: true };\n  };\n\n  return {\n    'next/dist/shared/lib/image-loader': loaderEntry,\n    'next/dist/esm/shared/lib/image-loader': loaderEntry,\n    // Can be removed once 0.2.x support is dropped.\n    'next/image': imageEntry,\n    // Can be removed once 0.2.x support is dropped.\n    'next/dist/client/image-component': imageEntry,\n    // Can be removed once 0.2.x support is dropped.\n    'next/dist/api/image': imageEntry,\n  };\n}\n","export async function tryImportShared() {\n  try {\n    const { shared } = await import('#remote-components/host/defaults/app');\n    return shared;\n  } catch {\n    return {};\n  }\n}\n","import type { NavigateOptions } from 'next/dist/shared/lib/app-router-context.shared-runtime';\nimport { usePathname, useSearchParams } from 'next/navigation';\nimport { logWarn } from '#internal/utils/logger';\n\nexport const routerImpl = async () => {\n  const { useRouter } = await import('next/navigation');\n  return Promise.resolve({\n    useRouter: () => {\n      const router = useRouter();\n      const pathname = usePathname();\n      const searchParams = useSearchParams();\n      const query = Object.fromEntries(searchParams.entries());\n      return {\n        pathname,\n        query,\n        asPath: searchParams.toString()\n          ? `${pathname}?${searchParams.toString()}`\n          : pathname,\n        push: (href: string, _: string, options?: NavigateOptions) => {\n          router.push(href, options);\n          return Promise.resolve(true);\n        },\n        replace: (href: string, _: string, options?: NavigateOptions) => {\n          router.replace(href, options);\n          return Promise.resolve(true);\n        },\n        refresh: () => Promise.resolve(router.refresh()),\n        prefetch: async () => {\n          logWarn(\n            'NextAppRouterCompat',\n            'You are using router.prefetch() in a remote component loaded in the Next.js App Router. prefetch() is a no-op in the App Router.',\n          );\n          return Promise.resolve();\n        },\n        back: () => {\n          // there's no back() in the App Router\n          if (typeof window !== 'undefined') {\n            window.history.back();\n          }\n        },\n        reload: () => {\n          router.refresh();\n        },\n        beforePopState: () => {\n          // there's no beforePopState() in the App Router\n        },\n        events: {\n          on: () => {\n            // there's no router.events in the App Router\n            logWarn(\n              'NextAppRouterCompat',\n              'You are using router.events.on() in a remote component loaded in the Next.js App Router. events.on() is a no-op in the App Router.',\n            );\n          },\n          off: () => {\n            // there's no router.events in the App Router\n            logWarn(\n              'NextAppRouterCompat',\n              'You are using router.events.off() in a remote component loaded in the Next.js App Router. events.off() is a no-op in the App Router.',\n            );\n          },\n          emit: () => {\n            // there's no router.events in the App Router\n            logWarn(\n              'NextAppRouterCompat',\n              'You are using router.events.emit() in a remote component loaded in the Next.js App Router. events.emit() is a no-op in the App Router.',\n            );\n          },\n        },\n      };\n    },\n  });\n};\n"],"mappings":"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","names":["ConsumeRemoteComponent"]}
+{"version":3,"sources":["../../../../src/host/nextjs/app-client-only.tsx","../../../../src/host/nextjs/image-shared.ts","../../../../src/host/nextjs/shared-import.ts","../../../../src/host/nextjs/app-compat.tsx"],"sourcesContent":["'use client';\n\nimport type React from 'react';\nimport { useMemo } from 'react';\nimport { createImageLoaderSharedEntries } from '#internal/host/nextjs/image-shared';\nimport { tryImportShared } from '#internal/host/nextjs/shared-import';\nimport { RemoteComponentsContext } from '#internal/host/react/context';\nimport type { ConsumeClientOnlyConfig } from '#internal/host/shared/config';\nimport type { ResolveClientUrl } from '#internal/runtime/url/resolve-client-url';\nimport {\n  type ConsumeRemoteComponentProps,\n  ConsumeRemoteComponent as ConsumeRemoteComponentReact,\n} from '#remote-components/host/react';\nimport { routerImpl } from './app-compat';\n\nconst sharedModules = async (\n  userShared?: ConsumeRemoteComponentProps['shared'],\n  resolveClientUrl?: ResolveClientUrl,\n) => {\n  const [resolvedShared, resolvedUserShared] = await Promise.all([\n    tryImportShared(),\n    userShared ?? Promise.resolve({}),\n  ]);\n  return {\n    ...resolvedShared,\n    'next/router': routerImpl,\n    ...createImageLoaderSharedEntries({ unbound: resolveClientUrl }),\n    ...resolvedUserShared,\n  };\n};\n\n/**\n * Provider for Next.js App Router hosts. Provides real Next.js implementations\n * of `next/image`, `next/navigation`, `next/link`, etc. to all nested\n * `<ConsumeRemoteComponent>` instances.\n *\n * Works in both Server and Client Components — set it up once in your layout\n * and use `<ConsumeRemoteComponent>` from `remote-components/react` everywhere:\n *\n * ```tsx\n * import { RemoteComponentsClientProvider } from 'remote-components/host/nextjs/app/client-only';\n *\n * <RemoteComponentsClientProvider resolveClientUrl={proxyClientRequestsThroughHost}>\n *   {children}\n * </RemoteComponentsClientProvider>\n * ```\n */\nexport function RemoteComponentsClientProvider({\n  shared,\n  resolveClientUrl,\n  children,\n  ...props\n}: ConsumeClientOnlyConfig & { children: React.ReactNode }) {\n  const mergedShared = useMemo(\n    () => sharedModules(shared, resolveClientUrl),\n    [shared, resolveClientUrl],\n  );\n  return (\n    <RemoteComponentsContext\n      value={{ shared: mergedShared, resolveClientUrl, ...props }}\n    >\n      {children}\n    </RemoteComponentsContext>\n  );\n}\n\n/**\n * `ConsumeRemoteComponent` for Next.js App Router hosts. Provides real Next.js\n * implementations of `next/image`, `next/navigation`, `next/link`, etc.\n *\n * The provider approach is recommended because it works in both Server and Client\n * Components — set up `RemoteComponentsClientProvider` from this module once in\n * your layout, and use `<ConsumeRemoteComponent>` from `remote-components/react`\n * everywhere. Import this component only when adding a provider is not practical.\n */\nexport function ConsumeRemoteComponent(props: ConsumeRemoteComponentProps) {\n  if (typeof props.src !== 'string' && !(props.src instanceof URL)) {\n    return props.children ?? null;\n  }\n\n  return (\n    <ConsumeRemoteComponentReact\n      {...props}\n      shared={sharedModules(props.shared, props.resolveClientUrl)}\n    />\n  );\n}\n","import { createElement, forwardRef } from 'react';\nimport type { NextImageDeploymentId } from '#internal/host/shared/next-image-deployment-id';\nimport { createRemoteImageLoader } from '#internal/host/shared/remote-image-loader';\nimport { getScope } from '#internal/runtime/turbopack/remote-scope';\nimport { bindResolveClientUrl } from '#internal/runtime/url/default-resolve-client-url';\nimport type {\n  InternalResolveClientUrl,\n  ResolveClientUrl,\n} from '#internal/runtime/url/resolve-client-url';\n\ntype SharedImageModule = (bundle: string) => Promise<unknown>;\n\nfunction resolveForBundle(\n  unbound: ResolveClientUrl | undefined,\n  bundle: string,\n): InternalResolveClientUrl | undefined {\n  if (!unbound) return undefined;\n  const remoteSrc = getScope(bundle)?.url.href ?? '';\n  return bindResolveClientUrl(unbound, remoteSrc);\n}\n\n/**\n * Creates shared module entries for image-related modules that route\n * optimization requests through the remote's `/_next/image` endpoint.\n *\n * Pass `bound` when the resolver already has `remoteSrc` applied (App Router).\n * Pass `unbound` when only the raw 2-arg `ResolveClientUrl` is available\n * (Pages Router, client-only provider).\n */\nexport function createImageLoaderSharedEntries({\n  bound,\n  ssrImageDeploymentIds,\n  unbound,\n}: {\n  bound?: InternalResolveClientUrl;\n  ssrImageDeploymentIds?: readonly NextImageDeploymentId[];\n  unbound?: ResolveClientUrl;\n} = {}): Record<string, SharedImageModule> {\n  const loaderEntry: SharedImageModule = (bundle: string) => {\n    const resolveClientUrl = bound ?? resolveForBundle(unbound, bundle);\n    return Promise.resolve({\n      default: createRemoteImageLoader(\n        bundle,\n        resolveClientUrl,\n        ssrImageDeploymentIds,\n      ),\n      __esModule: true,\n    });\n  };\n\n  // Cross-version compat: remotes <=0.2.x request `next/image` as a shared module.\n  // Wraps the host's Image component with the remote image loader injected\n  // via the `loader` prop. Can be removed once 0.2.x support is dropped.\n  const imageEntry: SharedImageModule = async (bundle: string) => {\n    const resolveClientUrl = bound ?? resolveForBundle(unbound, bundle);\n    const rawLoader = createRemoteImageLoader(\n      bundle,\n      resolveClientUrl,\n      ssrImageDeploymentIds,\n    );\n    // Wrap to match Next.js `ImageLoader` signature (no `config` param).\n    // The raw loader expects `{ config, src, width, quality }` but the public\n    // `loader` prop is called with `{ src, width, quality }` only.\n    const remoteLoader = Object.assign(\n      (p: { src: string; width: number; quality?: number }) =>\n        rawLoader({ ...p, config: { path: '/_next/image' } }),\n      { __next_img_default: true as const },\n    );\n    const mod = await import('next/image');\n    const OriginalImage = mod.default;\n    type ImageProps = Parameters<typeof OriginalImage>[0];\n    const RemoteImage = forwardRef<HTMLImageElement, ImageProps>((props, ref) =>\n      createElement(OriginalImage, {\n        ...props,\n        loader: props.loader ?? remoteLoader,\n        ref,\n      }),\n    );\n    RemoteImage.displayName = 'RemoteImage';\n    return { ...mod, default: RemoteImage, __esModule: true };\n  };\n\n  return {\n    'next/dist/shared/lib/image-loader': loaderEntry,\n    'next/dist/esm/shared/lib/image-loader': loaderEntry,\n    // Can be removed once 0.2.x support is dropped.\n    'next/image': imageEntry,\n    // Can be removed once 0.2.x support is dropped.\n    'next/dist/client/image-component': imageEntry,\n    // Can be removed once 0.2.x support is dropped.\n    'next/dist/api/image': imageEntry,\n  };\n}\n","export async function tryImportShared() {\n  try {\n    const { shared } = await import('#remote-components/host/defaults/app');\n    return shared;\n  } catch {\n    return {};\n  }\n}\n","import type { NavigateOptions } from 'next/dist/shared/lib/app-router-context.shared-runtime';\nimport { usePathname, useSearchParams } from 'next/navigation';\nimport { logWarn } from '#internal/utils/logger';\n\nexport const routerImpl = async () => {\n  const { useRouter } = await import('next/navigation');\n  return Promise.resolve({\n    useRouter: () => {\n      const router = useRouter();\n      const pathname = usePathname();\n      const searchParams = useSearchParams();\n      const query = Object.fromEntries(searchParams.entries());\n      return {\n        pathname,\n        query,\n        asPath: searchParams.toString()\n          ? `${pathname}?${searchParams.toString()}`\n          : pathname,\n        push: (href: string, _: string, options?: NavigateOptions) => {\n          router.push(href, options);\n          return Promise.resolve(true);\n        },\n        replace: (href: string, _: string, options?: NavigateOptions) => {\n          router.replace(href, options);\n          return Promise.resolve(true);\n        },\n        refresh: () => Promise.resolve(router.refresh()),\n        prefetch: async () => {\n          logWarn(\n            'NextAppRouterCompat',\n            'You are using router.prefetch() in a remote component loaded in the Next.js App Router. prefetch() is a no-op in the App Router.',\n          );\n          return Promise.resolve();\n        },\n        back: () => {\n          // there's no back() in the App Router\n          if (typeof window !== 'undefined') {\n            window.history.back();\n          }\n        },\n        reload: () => {\n          router.refresh();\n        },\n        beforePopState: () => {\n          // there's no beforePopState() in the App Router\n        },\n        events: {\n          on: () => {\n            // there's no router.events in the App Router\n            logWarn(\n              'NextAppRouterCompat',\n              'You are using router.events.on() in a remote component loaded in the Next.js App Router. events.on() is a no-op in the App Router.',\n            );\n          },\n          off: () => {\n            // there's no router.events in the App Router\n            logWarn(\n              'NextAppRouterCompat',\n              'You are using router.events.off() in a remote component loaded in the Next.js App Router. events.off() is a no-op in the App Router.',\n            );\n          },\n          emit: () => {\n            // there's no router.events in the App Router\n            logWarn(\n              'NextAppRouterCompat',\n              'You are using router.events.emit() in a remote component loaded in the Next.js App Router. events.emit() is a no-op in the App Router.',\n            );\n          },\n        },\n      };\n    },\n  });\n};\n"],"mappings":"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","names":["ConsumeRemoteComponent"]}

package/dist/host/nextjs/app.cjs

@@ -46,6 +46,7 @@ async function ConsumeRemoteComponent({
     nextData,
     component,
     remoteShared,
+    ssrImageDeploymentIds,
     serverUrl
   } = await (0, import_fetch_remote_component.fetchRemoteComponent)(src, {
     name: nameProp,
@@ -70,6 +71,7 @@ async function ConsumeRemoteComponent({
       route,
       runtime,
       scripts,
+      ssrImageDeploymentIds,
       type,
       src: typeof src === "string" ? src : src.href,
       serverUrl: serverUrl.href,

package/dist/host/nextjs/app.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/host/nextjs/app.tsx"],"sourcesContent":["import 'remote-components/remote/defaults/wrapper';\nimport { Children, Suspense } from 'react';\nimport { preload as reactDomPreload } from 'react-dom';\nimport { ConsumeRemoteComponentClient } from '#internal/host/nextjs/app-client';\nimport { fetchRemoteComponent } from '#internal/host/server/fetch-remote-component';\nimport type { ScriptDescriptor } from '#internal/host/shared/asset-descriptors';\nimport type { ConsumeServerConfig } from '#internal/host/shared/config';\nimport { RUNTIME_TURBOPACK } from '#internal/runtime/constants';\n\n/**\n * Props for the Next.js App Router remote component host (server component).\n */\nexport interface ConsumeRemoteComponentProps extends ConsumeServerConfig {\n  /** The source URL of the remote component. Required for server rendering. */\n  src: string | URL;\n  /** Loading fallback content to display while the remote component is being fetched. */\n  children?: React.ReactNode;\n}\n\n/**\n * Next.js App Router server component that fetches and renders a remote component.\n * Props are documented on {@link ConsumeRemoteComponentProps} (extends {@link ConsumeServerConfig}).\n *\n * @example\n * ```tsx\n * import { ConsumeRemoteComponent } from 'remote-components/host/nextjs/app';\n *\n * export default function MyPage() {\n *   return <ConsumeRemoteComponent src=\"/nextjs-app-remote/components/header\" />;\n * }\n * ```\n */\nexport async function ConsumeRemoteComponent({\n  src,\n  name: nameProp,\n  isolate,\n  mode,\n  reset,\n  children,\n  onRequest,\n  onResponse,\n}: ConsumeRemoteComponentProps): Promise<React.ReactElement> {\n  const {\n    metadata,\n    scripts,\n    links,\n    hydrationData,\n    nextData,\n    component,\n    remoteShared,\n    serverUrl,\n  } = await fetchRemoteComponent(src, {\n    name: nameProp,\n    rsc: true,\n    appRouter: true,\n    onRequest,\n    onResponse,\n  });\n\n  const { name, bundle, route, runtime, type } = metadata;\n  const remoteComponentClient = (\n    <ConsumeRemoteComponentClient\n      bundle={bundle}\n      data={hydrationData}\n      isolate={isolate}\n      links={links}\n      mode={mode}\n      name={name}\n      nextData={nextData}\n      remoteShared={remoteShared}\n      reset={reset}\n      route={route}\n      runtime={runtime}\n      scripts={scripts}\n      type={type}\n      src={typeof src === 'string' ? src : src.href}\n      serverUrl={serverUrl.href}\n    >\n      {component}\n    </ConsumeRemoteComponentClient>\n  );\n\n  const preloadHints = (\n    <ChunkPreloadHints scripts={scripts} runtime={runtime} />\n  );\n\n  if (Children.count(children) > 0) {\n    return (\n      <Suspense fallback={children}>\n        {preloadHints}\n        {remoteComponentClient}\n      </Suspense>\n    );\n  }\n\n  return (\n    <>\n      {preloadHints}\n      {remoteComponentClient}\n    </>\n  );\n}\n\n/**\n * Emits preload hints for chunk scripts so the browser starts fetching them\n * during HTML parsing, before any client JS executes. Uses the React DOM\n * `preload()` API when available, falling back to `<link rel=\"preload\">`.\n *\n * Preload hints use the direct asset URLs — if the client rewrites URLs\n * (e.g. through a proxy via `resolveClientUrl`), the preloads won't\n * cache-match but fail silently and cause no harm.\n */\nfunction ChunkPreloadHints({\n  scripts,\n  runtime,\n}: {\n  scripts: ScriptDescriptor[];\n  runtime: string | undefined;\n}) {\n  const scriptsWithSrc = scripts.filter((script) => script.src);\n  // Turbopack loads chunks via fetch() rather than <script> tags\n  const as = runtime === RUNTIME_TURBOPACK ? 'fetch' : 'script';\n\n  if (typeof reactDomPreload === 'function') {\n    for (const script of scriptsWithSrc) {\n      reactDomPreload(script.src, { as, crossOrigin: 'anonymous' });\n    }\n    return null;\n  }\n\n  return (\n    <>\n      {scriptsWithSrc.map((script) => (\n        <link\n          key={script.src}\n          rel=\"preload\"\n          href={script.src}\n          as={as}\n          crossOrigin=\"anonymous\"\n        />\n      ))}\n    </>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AA6DI;AA7DJ,qBAAO;AACP,mBAAmC;AACnC,uBAA2C;AAC3C,wBAA6C;AAC7C,oCAAqC;AAGrC,uBAAkC;AAyBlC,eAAsB,uBAAuB;AAAA,EAC3C;AAAA,EACA,MAAM;AAAA,EACN;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAA6D;AAC3D,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,UAAM,oDAAqB,KAAK;AAAA,IAClC,MAAM;AAAA,IACN,KAAK;AAAA,IACL,WAAW;AAAA,IACX;AAAA,IACA;AAAA,EACF,CAAC;AAED,QAAM,EAAE,MAAM,QAAQ,OAAO,SAAS,KAAK,IAAI;AAC/C,QAAM,wBACJ;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,MAAM;AAAA,MACN;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,KAAK,OAAO,QAAQ,WAAW,MAAM,IAAI;AAAA,MACzC,WAAW,UAAU;AAAA,MAEpB;AAAA;AAAA,EACH;AAGF,QAAM,eACJ,4CAAC,qBAAkB,SAAkB,SAAkB;AAGzD,MAAI,sBAAS,MAAM,QAAQ,IAAI,GAAG;AAChC,WACE,6CAAC,yBAAS,UAAU,UACjB;AAAA;AAAA,MACA;AAAA,OACH;AAAA,EAEJ;AAEA,SACE,4EACG;AAAA;AAAA,IACA;AAAA,KACH;AAEJ;AAWA,SAAS,kBAAkB;AAAA,EACzB;AAAA,EACA;AACF,GAGG;AACD,QAAM,iBAAiB,QAAQ,OAAO,CAAC,WAAW,OAAO,GAAG;AAE5D,QAAM,KAAK,YAAY,qCAAoB,UAAU;AAErD,MAAI,OAAO,iBAAAA,YAAoB,YAAY;AACzC,eAAW,UAAU,gBAAgB;AACnC,2BAAAA,SAAgB,OAAO,KAAK,EAAE,IAAI,aAAa,YAAY,CAAC;AAAA,IAC9D;AACA,WAAO;AAAA,EACT;AAEA,SACE,2EACG,yBAAe,IAAI,CAAC,WACnB;AAAA,IAAC;AAAA;AAAA,MAEC,KAAI;AAAA,MACJ,MAAM,OAAO;AAAA,MACb;AAAA,MACA,aAAY;AAAA;AAAA,IAJP,OAAO;AAAA,EAKd,CACD,GACH;AAEJ;","names":["reactDomPreload"]}
+{"version":3,"sources":["../../../src/host/nextjs/app.tsx"],"sourcesContent":["import 'remote-components/remote/defaults/wrapper';\nimport { Children, Suspense } from 'react';\nimport { preload as reactDomPreload } from 'react-dom';\nimport { ConsumeRemoteComponentClient } from '#internal/host/nextjs/app-client';\nimport { fetchRemoteComponent } from '#internal/host/server/fetch-remote-component';\nimport type { ScriptDescriptor } from '#internal/host/shared/asset-descriptors';\nimport type { ConsumeServerConfig } from '#internal/host/shared/config';\nimport { RUNTIME_TURBOPACK } from '#internal/runtime/constants';\n\n/**\n * Props for the Next.js App Router remote component host (server component).\n */\nexport interface ConsumeRemoteComponentProps extends ConsumeServerConfig {\n  /** The source URL of the remote component. Required for server rendering. */\n  src: string | URL;\n  /** Loading fallback content to display while the remote component is being fetched. */\n  children?: React.ReactNode;\n}\n\n/**\n * Next.js App Router server component that fetches and renders a remote component.\n * Props are documented on {@link ConsumeRemoteComponentProps} (extends {@link ConsumeServerConfig}).\n *\n * @example\n * ```tsx\n * import { ConsumeRemoteComponent } from 'remote-components/host/nextjs/app';\n *\n * export default function MyPage() {\n *   return <ConsumeRemoteComponent src=\"/nextjs-app-remote/components/header\" />;\n * }\n * ```\n */\nexport async function ConsumeRemoteComponent({\n  src,\n  name: nameProp,\n  isolate,\n  mode,\n  reset,\n  children,\n  onRequest,\n  onResponse,\n}: ConsumeRemoteComponentProps): Promise<React.ReactElement> {\n  const {\n    metadata,\n    scripts,\n    links,\n    hydrationData,\n    nextData,\n    component,\n    remoteShared,\n    ssrImageDeploymentIds,\n    serverUrl,\n  } = await fetchRemoteComponent(src, {\n    name: nameProp,\n    rsc: true,\n    appRouter: true,\n    onRequest,\n    onResponse,\n  });\n\n  const { name, bundle, route, runtime, type } = metadata;\n  const remoteComponentClient = (\n    <ConsumeRemoteComponentClient\n      bundle={bundle}\n      data={hydrationData}\n      isolate={isolate}\n      links={links}\n      mode={mode}\n      name={name}\n      nextData={nextData}\n      remoteShared={remoteShared}\n      reset={reset}\n      route={route}\n      runtime={runtime}\n      scripts={scripts}\n      ssrImageDeploymentIds={ssrImageDeploymentIds}\n      type={type}\n      src={typeof src === 'string' ? src : src.href}\n      serverUrl={serverUrl.href}\n    >\n      {component}\n    </ConsumeRemoteComponentClient>\n  );\n\n  const preloadHints = (\n    <ChunkPreloadHints scripts={scripts} runtime={runtime} />\n  );\n\n  if (Children.count(children) > 0) {\n    return (\n      <Suspense fallback={children}>\n        {preloadHints}\n        {remoteComponentClient}\n      </Suspense>\n    );\n  }\n\n  return (\n    <>\n      {preloadHints}\n      {remoteComponentClient}\n    </>\n  );\n}\n\n/**\n * Emits preload hints for chunk scripts so the browser starts fetching them\n * during HTML parsing, before any client JS executes. Uses the React DOM\n * `preload()` API when available, falling back to `<link rel=\"preload\">`.\n *\n * Preload hints use the direct asset URLs — if the client rewrites URLs\n * (e.g. through a proxy via `resolveClientUrl`), the preloads won't\n * cache-match but fail silently and cause no harm.\n */\nfunction ChunkPreloadHints({\n  scripts,\n  runtime,\n}: {\n  scripts: ScriptDescriptor[];\n  runtime: string | undefined;\n}) {\n  const scriptsWithSrc = scripts.filter((script) => script.src);\n  // Turbopack loads chunks via fetch() rather than <script> tags\n  const as = runtime === RUNTIME_TURBOPACK ? 'fetch' : 'script';\n\n  if (typeof reactDomPreload === 'function') {\n    for (const script of scriptsWithSrc) {\n      reactDomPreload(script.src, { as, crossOrigin: 'anonymous' });\n    }\n    return null;\n  }\n\n  return (\n    <>\n      {scriptsWithSrc.map((script) => (\n        <link\n          key={script.src}\n          rel=\"preload\"\n          href={script.src}\n          as={as}\n          crossOrigin=\"anonymous\"\n        />\n      ))}\n    </>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AA8DI;AA9DJ,qBAAO;AACP,mBAAmC;AACnC,uBAA2C;AAC3C,wBAA6C;AAC7C,oCAAqC;AAGrC,uBAAkC;AAyBlC,eAAsB,uBAAuB;AAAA,EAC3C;AAAA,EACA,MAAM;AAAA,EACN;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAA6D;AAC3D,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,UAAM,oDAAqB,KAAK;AAAA,IAClC,MAAM;AAAA,IACN,KAAK;AAAA,IACL,WAAW;AAAA,IACX;AAAA,IACA;AAAA,EACF,CAAC;AAED,QAAM,EAAE,MAAM,QAAQ,OAAO,SAAS,KAAK,IAAI;AAC/C,QAAM,wBACJ;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,MAAM;AAAA,MACN;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,KAAK,OAAO,QAAQ,WAAW,MAAM,IAAI;AAAA,MACzC,WAAW,UAAU;AAAA,MAEpB;AAAA;AAAA,EACH;AAGF,QAAM,eACJ,4CAAC,qBAAkB,SAAkB,SAAkB;AAGzD,MAAI,sBAAS,MAAM,QAAQ,IAAI,GAAG;AAChC,WACE,6CAAC,yBAAS,UAAU,UACjB;AAAA;AAAA,MACA;AAAA,OACH;AAAA,EAEJ;AAEA,SACE,4EACG;AAAA;AAAA,IACA;AAAA,KACH;AAEJ;AAWA,SAAS,kBAAkB;AAAA,EACzB;AAAA,EACA;AACF,GAGG;AACD,QAAM,iBAAiB,QAAQ,OAAO,CAAC,WAAW,OAAO,GAAG;AAE5D,QAAM,KAAK,YAAY,qCAAoB,UAAU;AAErD,MAAI,OAAO,iBAAAA,YAAoB,YAAY;AACzC,eAAW,UAAU,gBAAgB;AACnC,2BAAAA,SAAgB,OAAO,KAAK,EAAE,IAAI,aAAa,YAAY,CAAC;AAAA,IAC9D;AACA,WAAO;AAAA,EACT;AAEA,SACE,2EACG,yBAAe,IAAI,CAAC,WACnB;AAAA,IAAC;AAAA;AAAA,MAEC,KAAI;AAAA,MACJ,MAAM,OAAO;AAAA,MACb;AAAA,MACA,aAAY;AAAA;AAAA,IAJP,OAAO;AAAA,EAKd,CACD,GACH;AAEJ;","names":["reactDomPreload"]}

package/dist/host/nextjs/app.js

@@ -23,6 +23,7 @@ async function ConsumeRemoteComponent({
     nextData,
     component,
     remoteShared,
+    ssrImageDeploymentIds,
     serverUrl
   } = await fetchRemoteComponent(src, {
     name: nameProp,
@@ -47,6 +48,7 @@ async function ConsumeRemoteComponent({
       route,
       runtime,
       scripts,
+      ssrImageDeploymentIds,
       type,
       src: typeof src === "string" ? src : src.href,
       serverUrl: serverUrl.href,

package/dist/host/nextjs/app.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/host/nextjs/app.tsx"],"sourcesContent":["import 'remote-components/remote/defaults/wrapper';\nimport { Children, Suspense } from 'react';\nimport { preload as reactDomPreload } from 'react-dom';\nimport { ConsumeRemoteComponentClient } from '#internal/host/nextjs/app-client';\nimport { fetchRemoteComponent } from '#internal/host/server/fetch-remote-component';\nimport type { ScriptDescriptor } from '#internal/host/shared/asset-descriptors';\nimport type { ConsumeServerConfig } from '#internal/host/shared/config';\nimport { RUNTIME_TURBOPACK } from '#internal/runtime/constants';\n\n/**\n * Props for the Next.js App Router remote component host (server component).\n */\nexport interface ConsumeRemoteComponentProps extends ConsumeServerConfig {\n  /** The source URL of the remote component. Required for server rendering. */\n  src: string | URL;\n  /** Loading fallback content to display while the remote component is being fetched. */\n  children?: React.ReactNode;\n}\n\n/**\n * Next.js App Router server component that fetches and renders a remote component.\n * Props are documented on {@link ConsumeRemoteComponentProps} (extends {@link ConsumeServerConfig}).\n *\n * @example\n * ```tsx\n * import { ConsumeRemoteComponent } from 'remote-components/host/nextjs/app';\n *\n * export default function MyPage() {\n *   return <ConsumeRemoteComponent src=\"/nextjs-app-remote/components/header\" />;\n * }\n * ```\n */\nexport async function ConsumeRemoteComponent({\n  src,\n  name: nameProp,\n  isolate,\n  mode,\n  reset,\n  children,\n  onRequest,\n  onResponse,\n}: ConsumeRemoteComponentProps): Promise<React.ReactElement> {\n  const {\n    metadata,\n    scripts,\n    links,\n    hydrationData,\n    nextData,\n    component,\n    remoteShared,\n    serverUrl,\n  } = await fetchRemoteComponent(src, {\n    name: nameProp,\n    rsc: true,\n    appRouter: true,\n    onRequest,\n    onResponse,\n  });\n\n  const { name, bundle, route, runtime, type } = metadata;\n  const remoteComponentClient = (\n    <ConsumeRemoteComponentClient\n      bundle={bundle}\n      data={hydrationData}\n      isolate={isolate}\n      links={links}\n      mode={mode}\n      name={name}\n      nextData={nextData}\n      remoteShared={remoteShared}\n      reset={reset}\n      route={route}\n      runtime={runtime}\n      scripts={scripts}\n      type={type}\n      src={typeof src === 'string' ? src : src.href}\n      serverUrl={serverUrl.href}\n    >\n      {component}\n    </ConsumeRemoteComponentClient>\n  );\n\n  const preloadHints = (\n    <ChunkPreloadHints scripts={scripts} runtime={runtime} />\n  );\n\n  if (Children.count(children) > 0) {\n    return (\n      <Suspense fallback={children}>\n        {preloadHints}\n        {remoteComponentClient}\n      </Suspense>\n    );\n  }\n\n  return (\n    <>\n      {preloadHints}\n      {remoteComponentClient}\n    </>\n  );\n}\n\n/**\n * Emits preload hints for chunk scripts so the browser starts fetching them\n * during HTML parsing, before any client JS executes. Uses the React DOM\n * `preload()` API when available, falling back to `<link rel=\"preload\">`.\n *\n * Preload hints use the direct asset URLs — if the client rewrites URLs\n * (e.g. through a proxy via `resolveClientUrl`), the preloads won't\n * cache-match but fail silently and cause no harm.\n */\nfunction ChunkPreloadHints({\n  scripts,\n  runtime,\n}: {\n  scripts: ScriptDescriptor[];\n  runtime: string | undefined;\n}) {\n  const scriptsWithSrc = scripts.filter((script) => script.src);\n  // Turbopack loads chunks via fetch() rather than <script> tags\n  const as = runtime === RUNTIME_TURBOPACK ? 'fetch' : 'script';\n\n  if (typeof reactDomPreload === 'function') {\n    for (const script of scriptsWithSrc) {\n      reactDomPreload(script.src, { as, crossOrigin: 'anonymous' });\n    }\n    return null;\n  }\n\n  return (\n    <>\n      {scriptsWithSrc.map((script) => (\n        <link\n          key={script.src}\n          rel=\"preload\"\n          href={script.src}\n          as={as}\n          crossOrigin=\"anonymous\"\n        />\n      ))}\n    </>\n  );\n}\n"],"mappings":"AA6DI,SAmCA,UAnCA,KA2BE,YA3BF;AA7DJ,OAAO;AACP,SAAS,UAAU,gBAAgB;AACnC,SAAS,WAAW,uBAAuB;AAC3C,SAAS,oCAAoC;AAC7C,SAAS,4BAA4B;AAGrC,SAAS,yBAAyB;AAyBlC,eAAsB,uBAAuB;AAAA,EAC3C;AAAA,EACA,MAAM;AAAA,EACN;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAA6D;AAC3D,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,MAAM,qBAAqB,KAAK;AAAA,IAClC,MAAM;AAAA,IACN,KAAK;AAAA,IACL,WAAW;AAAA,IACX;AAAA,IACA;AAAA,EACF,CAAC;AAED,QAAM,EAAE,MAAM,QAAQ,OAAO,SAAS,KAAK,IAAI;AAC/C,QAAM,wBACJ;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,MAAM;AAAA,MACN;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,KAAK,OAAO,QAAQ,WAAW,MAAM,IAAI;AAAA,MACzC,WAAW,UAAU;AAAA,MAEpB;AAAA;AAAA,EACH;AAGF,QAAM,eACJ,oBAAC,qBAAkB,SAAkB,SAAkB;AAGzD,MAAI,SAAS,MAAM,QAAQ,IAAI,GAAG;AAChC,WACE,qBAAC,YAAS,UAAU,UACjB;AAAA;AAAA,MACA;AAAA,OACH;AAAA,EAEJ;AAEA,SACE,iCACG;AAAA;AAAA,IACA;AAAA,KACH;AAEJ;AAWA,SAAS,kBAAkB;AAAA,EACzB;AAAA,EACA;AACF,GAGG;AACD,QAAM,iBAAiB,QAAQ,OAAO,CAAC,WAAW,OAAO,GAAG;AAE5D,QAAM,KAAK,YAAY,oBAAoB,UAAU;AAErD,MAAI,OAAO,oBAAoB,YAAY;AACzC,eAAW,UAAU,gBAAgB;AACnC,sBAAgB,OAAO,KAAK,EAAE,IAAI,aAAa,YAAY,CAAC;AAAA,IAC9D;AACA,WAAO;AAAA,EACT;AAEA,SACE,gCACG,yBAAe,IAAI,CAAC,WACnB;AAAA,IAAC;AAAA;AAAA,MAEC,KAAI;AAAA,MACJ,MAAM,OAAO;AAAA,MACb;AAAA,MACA,aAAY;AAAA;AAAA,IAJP,OAAO;AAAA,EAKd,CACD,GACH;AAEJ;","names":[]}
+{"version":3,"sources":["../../../src/host/nextjs/app.tsx"],"sourcesContent":["import 'remote-components/remote/defaults/wrapper';\nimport { Children, Suspense } from 'react';\nimport { preload as reactDomPreload } from 'react-dom';\nimport { ConsumeRemoteComponentClient } from '#internal/host/nextjs/app-client';\nimport { fetchRemoteComponent } from '#internal/host/server/fetch-remote-component';\nimport type { ScriptDescriptor } from '#internal/host/shared/asset-descriptors';\nimport type { ConsumeServerConfig } from '#internal/host/shared/config';\nimport { RUNTIME_TURBOPACK } from '#internal/runtime/constants';\n\n/**\n * Props for the Next.js App Router remote component host (server component).\n */\nexport interface ConsumeRemoteComponentProps extends ConsumeServerConfig {\n  /** The source URL of the remote component. Required for server rendering. */\n  src: string | URL;\n  /** Loading fallback content to display while the remote component is being fetched. */\n  children?: React.ReactNode;\n}\n\n/**\n * Next.js App Router server component that fetches and renders a remote component.\n * Props are documented on {@link ConsumeRemoteComponentProps} (extends {@link ConsumeServerConfig}).\n *\n * @example\n * ```tsx\n * import { ConsumeRemoteComponent } from 'remote-components/host/nextjs/app';\n *\n * export default function MyPage() {\n *   return <ConsumeRemoteComponent src=\"/nextjs-app-remote/components/header\" />;\n * }\n * ```\n */\nexport async function ConsumeRemoteComponent({\n  src,\n  name: nameProp,\n  isolate,\n  mode,\n  reset,\n  children,\n  onRequest,\n  onResponse,\n}: ConsumeRemoteComponentProps): Promise<React.ReactElement> {\n  const {\n    metadata,\n    scripts,\n    links,\n    hydrationData,\n    nextData,\n    component,\n    remoteShared,\n    ssrImageDeploymentIds,\n    serverUrl,\n  } = await fetchRemoteComponent(src, {\n    name: nameProp,\n    rsc: true,\n    appRouter: true,\n    onRequest,\n    onResponse,\n  });\n\n  const { name, bundle, route, runtime, type } = metadata;\n  const remoteComponentClient = (\n    <ConsumeRemoteComponentClient\n      bundle={bundle}\n      data={hydrationData}\n      isolate={isolate}\n      links={links}\n      mode={mode}\n      name={name}\n      nextData={nextData}\n      remoteShared={remoteShared}\n      reset={reset}\n      route={route}\n      runtime={runtime}\n      scripts={scripts}\n      ssrImageDeploymentIds={ssrImageDeploymentIds}\n      type={type}\n      src={typeof src === 'string' ? src : src.href}\n      serverUrl={serverUrl.href}\n    >\n      {component}\n    </ConsumeRemoteComponentClient>\n  );\n\n  const preloadHints = (\n    <ChunkPreloadHints scripts={scripts} runtime={runtime} />\n  );\n\n  if (Children.count(children) > 0) {\n    return (\n      <Suspense fallback={children}>\n        {preloadHints}\n        {remoteComponentClient}\n      </Suspense>\n    );\n  }\n\n  return (\n    <>\n      {preloadHints}\n      {remoteComponentClient}\n    </>\n  );\n}\n\n/**\n * Emits preload hints for chunk scripts so the browser starts fetching them\n * during HTML parsing, before any client JS executes. Uses the React DOM\n * `preload()` API when available, falling back to `<link rel=\"preload\">`.\n *\n * Preload hints use the direct asset URLs — if the client rewrites URLs\n * (e.g. through a proxy via `resolveClientUrl`), the preloads won't\n * cache-match but fail silently and cause no harm.\n */\nfunction ChunkPreloadHints({\n  scripts,\n  runtime,\n}: {\n  scripts: ScriptDescriptor[];\n  runtime: string | undefined;\n}) {\n  const scriptsWithSrc = scripts.filter((script) => script.src);\n  // Turbopack loads chunks via fetch() rather than <script> tags\n  const as = runtime === RUNTIME_TURBOPACK ? 'fetch' : 'script';\n\n  if (typeof reactDomPreload === 'function') {\n    for (const script of scriptsWithSrc) {\n      reactDomPreload(script.src, { as, crossOrigin: 'anonymous' });\n    }\n    return null;\n  }\n\n  return (\n    <>\n      {scriptsWithSrc.map((script) => (\n        <link\n          key={script.src}\n          rel=\"preload\"\n          href={script.src}\n          as={as}\n          crossOrigin=\"anonymous\"\n        />\n      ))}\n    </>\n  );\n}\n"],"mappings":"AA8DI,SAoCA,UApCA,KA4BE,YA5BF;AA9DJ,OAAO;AACP,SAAS,UAAU,gBAAgB;AACnC,SAAS,WAAW,uBAAuB;AAC3C,SAAS,oCAAoC;AAC7C,SAAS,4BAA4B;AAGrC,SAAS,yBAAyB;AAyBlC,eAAsB,uBAAuB;AAAA,EAC3C;AAAA,EACA,MAAM;AAAA,EACN;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAA6D;AAC3D,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,MAAM,qBAAqB,KAAK;AAAA,IAClC,MAAM;AAAA,IACN,KAAK;AAAA,IACL,WAAW;AAAA,IACX;AAAA,IACA;AAAA,EACF,CAAC;AAED,QAAM,EAAE,MAAM,QAAQ,OAAO,SAAS,KAAK,IAAI;AAC/C,QAAM,wBACJ;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,MAAM;AAAA,MACN;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,KAAK,OAAO,QAAQ,WAAW,MAAM,IAAI;AAAA,MACzC,WAAW,UAAU;AAAA,MAEpB;AAAA;AAAA,EACH;AAGF,QAAM,eACJ,oBAAC,qBAAkB,SAAkB,SAAkB;AAGzD,MAAI,SAAS,MAAM,QAAQ,IAAI,GAAG;AAChC,WACE,qBAAC,YAAS,UAAU,UACjB;AAAA;AAAA,MACA;AAAA,OACH;AAAA,EAEJ;AAEA,SACE,iCACG;AAAA;AAAA,IACA;AAAA,KACH;AAEJ;AAWA,SAAS,kBAAkB;AAAA,EACzB;AAAA,EACA;AACF,GAGG;AACD,QAAM,iBAAiB,QAAQ,OAAO,CAAC,WAAW,OAAO,GAAG;AAE5D,QAAM,KAAK,YAAY,oBAAoB,UAAU;AAErD,MAAI,OAAO,oBAAoB,YAAY;AACzC,eAAW,UAAU,gBAAgB;AACnC,sBAAgB,OAAO,KAAK,EAAE,IAAI,aAAa,YAAY,CAAC;AAAA,IAC9D;AACA,WAAO;AAAA,EACT;AAEA,SACE,gCACG,yBAAe,IAAI,CAAC,WACnB;AAAA,IAAC;AAAA;AAAA,MAEC,KAAI;AAAA,MACJ,MAAM,OAAO;AAAA,MACb;AAAA,MACA,aAAY;AAAA;AAAA,IAJP,OAAO;AAAA,EAKd,CACD,GACH;AAEJ;","names":[]}

package/dist/host/nextjs/pages.cjs

@@ -58,8 +58,9 @@ const navigationImpl = {
   }
 };
 const sharedCache = /* @__PURE__ */ new Map();
-const shared = (bundle, resolveClientUrl) => {
-  if (!resolveClientUrl) {
+const shared = (bundle, resolveClientUrl, ssrImageDeploymentIds) => {
+  const canUseCache = !resolveClientUrl && !ssrImageDeploymentIds?.length;
+  if (canUseCache) {
     if (sharedCache.has(bundle)) {
       return sharedCache.get(bundle);
     }
@@ -77,9 +78,12 @@ const shared = (bundle, resolveClientUrl) => {
     "next/script": () => Promise.resolve(Script.default),
     "next/router": () => Promise.resolve(Router),
     ...import_pages.shared,
-    ...(0, import_image_shared.createImageLoaderSharedEntries)({ unbound: resolveClientUrl })
+    ...(0, import_image_shared.createImageLoaderSharedEntries)({
+      unbound: resolveClientUrl,
+      ssrImageDeploymentIds
+    })
   };
-  if (!resolveClientUrl) {
+  if (canUseCache) {
     sharedCache.set(bundle, result);
   }
   return result;
@@ -137,7 +141,8 @@ function ConsumeRemoteComponent(props) {
   );
   const sharedResult = shared(
     props.bundle ?? import_constants.DEFAULT_BUNDLE_NAME,
-    props.resolveClientUrl
+    props.resolveClientUrl,
+    props.ssrImageDeploymentIds
   );
   (0, import_react.useEffect)(() => {
     const clientSelf = globalThis;
@@ -196,7 +201,8 @@ async function getConsumeRemoteComponentProps(src, options) {
     links,
     component,
     nextData,
-    remoteShared
+    remoteShared,
+    ssrImageDeploymentIds
   } = await (0, import_fetch_remote_component.fetchRemoteComponent)(src, {
     rsc: true,
     ...options
@@ -205,7 +211,8 @@ async function getConsumeRemoteComponentProps(src, options) {
     src,
     bundle,
     name,
-    route
+    route,
+    ssrImageDeploymentIds
   };
   const key = getKey(bundle, route, name);
   if (nextData?.buildId !== "development") {

package/dist/host/nextjs/pages.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/host/nextjs/pages.tsx"],"sourcesContent":["import 'remote-components/remote/defaults/wrapper';\nimport * as Form from 'next/form';\nimport * as Link from 'next/link';\nimport * as Router from 'next/router';\nimport * as Script from 'next/script';\nimport { useEffect } from 'react';\nimport { ConsumeRemoteComponent as ConsumeRemoteComponentReact } from 'remote-components/host/react';\nimport { createImageLoaderSharedEntries } from '#internal/host/nextjs/image-shared';\nimport { fetchRemoteComponent } from '#internal/host/server/fetch-remote-component';\nimport type { ConsumeRemoteComponentConfig } from '#internal/host/shared/config';\nimport type {\n  OnRequestHook,\n  OnResponseHook,\n} from '#internal/host/shared/fetch-interceptors';\nimport {\n  isSharedModuleManifest,\n  type RemoteSharedModules,\n} from '#internal/host/shared/shared-broker';\nimport {\n  DEFAULT_BUNDLE_NAME,\n  DEFAULT_COMPONENT_NAME,\n} from '#internal/runtime/constants';\nimport {\n  DATA_REMOTE_COMPONENTS_SHARED,\n  DATA_REMOTE_COMPONENTS_SHARED_MANIFEST,\n  ID_SUFFIX_SHARED,\n  ID_SUFFIX_SHARED_MANIFEST,\n} from '#internal/runtime/html/html-spec';\nimport type { ResolveClientUrl } from '#internal/runtime/url/resolve-client-url';\nimport { RemoteComponentsError } from '#internal/utils/error';\nimport { shared as _shared } from '#remote-components/host/defaults/pages';\n\nconst navigationImpl = {\n  useRouter: () => Router.useRouter(),\n  useSearchParams: () => {\n    const router = Router.useRouter();\n    return {\n      get: (key: string) => router.query[key],\n      has: (key: string) => key in router.query,\n    };\n  },\n};\n\nconst sharedCache = new Map<string, Record<string, () => Promise<unknown>>>();\nconst shared = (bundle: string, resolveClientUrl?: ResolveClientUrl) => {\n  // Skip cache when resolveClientUrl is provided — different resolver instances\n  // must not share a cache entry, since the image loader closes over the resolver.\n  if (!resolveClientUrl) {\n    if (sharedCache.has(bundle)) {\n      return sharedCache.get(bundle);\n    }\n  }\n\n  const result = {\n    // polyfill Next.js App Router client API (minimal)\n    // some API methods are not available when using a Next.js Pages Router application as host\n    'next/navigation': () =>\n      Promise.resolve(navigationImpl) as Promise<unknown>,\n    'next/dist/client/components/navigation': () =>\n      Promise.resolve(navigationImpl) as Promise<unknown>,\n    'next/dist/client/app-dir/link': () =>\n      Promise.resolve(Link.default) as Promise<unknown>,\n    'next/link': () => Promise.resolve(Link.default) as Promise<unknown>,\n    'next/dist/client/app-dir/form': () =>\n      Promise.resolve(Form.default) as Promise<unknown>,\n    'next/form': () => Promise.resolve(Form.default) as Promise<unknown>,\n    'next/dist/client/script': () =>\n      Promise.resolve(Script.default) as Promise<unknown>,\n    'next/script': () => Promise.resolve(Script.default) as Promise<unknown>,\n    'next/router': () => Promise.resolve(Router) as Promise<unknown>,\n    ..._shared,\n    ...createImageLoaderSharedEntries({ unbound: resolveClientUrl }),\n  };\n\n  if (!resolveClientUrl) {\n    sharedCache.set(bundle, result);\n  }\n\n  return result;\n};\n\n// internal symbols to access global store\nconst REMOTE_COMPONENT_STORE = Symbol('REMOTE_COMPONENT_STORE');\nconst REMOTE_COMPONENT_KEY = '__REMOTE_COMPONENT_KEY__';\n\n// temporary global store for remote component HTML\n// the store is used to save the HTML of remote components for SSR without sending the content to the client\nconst self = globalThis as typeof globalThis & {\n  [REMOTE_COMPONENT_STORE]?: Map<string, React.ReactNode>;\n};\n\nfunction RemoteSharedScript({\n  name,\n  remoteShared,\n}: {\n  name: string;\n  remoteShared: RemoteSharedModules;\n}) {\n  if (isSharedModuleManifest(remoteShared)) {\n    return (\n      <script\n        {...{ [DATA_REMOTE_COMPONENTS_SHARED_MANIFEST]: '' }}\n        id={`${name}${ID_SUFFIX_SHARED_MANIFEST}`}\n        type=\"application/json\"\n      >\n        {JSON.stringify(remoteShared)}\n      </script>\n    );\n  }\n\n  return (\n    // @legacy(remote-components<=0.4.x): keep writing the historical shared\n    // map until hosts and remotes on 0.4.x are outside support.\n    <script\n      {...{ [DATA_REMOTE_COMPONENTS_SHARED]: '' }}\n      id={`${name}${ID_SUFFIX_SHARED}`}\n      type=\"application/json\"\n    >\n      {JSON.stringify(remoteShared)}\n    </script>\n  );\n}\n\nfunction getKey(bundle: string, route: string, name: string): string {\n  return `${bundle}:${route}:${name}__${crypto.randomUUID()}`;\n}\n\nfunction setComponent(key: string, component: React.ReactNode): void {\n  if (!self[REMOTE_COMPONENT_STORE]) {\n    self[REMOTE_COMPONENT_STORE] = new Map();\n  }\n  self[REMOTE_COMPONENT_STORE].set(key, component);\n}\n\nfunction getComponent(key: string): React.ReactNode | undefined {\n  const component = self[REMOTE_COMPONENT_STORE]?.get(key);\n  // remove the component from the store after retrieving it to prevent memory leaks\n  // storing the HTML in the global store is only needed for SSR and it's temporary only used for a single render\n  self[REMOTE_COMPONENT_STORE]?.delete(key);\n  return component;\n}\n\n/**\n * Props for the Next.js Pages Router remote component host.\n *\n * Extends {@link ConsumeRemoteComponentConfig} with Pages Router–specific `bundle` and\n * `route` props used for SSR hydration.\n */\nexport interface ConsumeRemoteComponentProps\n  extends ConsumeRemoteComponentConfig {\n  /** The source URL of the remote component. Required for server rendering. */\n  src: string | URL;\n  /** The Webpack bundle name for the remote component. */\n  bundle?: string;\n  /** The page route of the remote component. */\n  route?: string;\n  /** Loading fallback content displayed while the remote component is being fetched. */\n  children?: React.ReactNode;\n  [REMOTE_COMPONENT_KEY]?: string;\n}\n\n/**\n * This component handles the rendering of remote microfrontends.\n *\n * @param props - The properties for the remote component.\n * @returns A React component that renders the remote component.\n */\nexport function ConsumeRemoteComponent(props: ConsumeRemoteComponentProps) {\n  const remoteComponent =\n    typeof document !== 'undefined'\n      ? null\n      : // retrieve the HTML from the global store\n        getComponent(props[REMOTE_COMPONENT_KEY] ?? DEFAULT_COMPONENT_NAME);\n\n  const sharedResult = shared(\n    props.bundle ?? DEFAULT_BUNDLE_NAME,\n    props.resolveClientUrl,\n  );\n\n  useEffect(() => {\n    const clientSelf = globalThis as typeof globalThis & {\n      __remote_component_shared__?: Record<string, () => Promise<unknown>>;\n    };\n    // eslint-disable-next-line camelcase\n    clientSelf.__remote_component_shared__ = sharedResult;\n  }, [sharedResult]);\n\n  if (!props[REMOTE_COMPONENT_KEY]) {\n    return (\n      <ConsumeRemoteComponentReact\n        isolate={props.isolate}\n        mode={props.mode}\n        name={props.name}\n        onBeforeLoad={props.onBeforeLoad}\n        onChange={props.onChange}\n        onError={props.onError}\n        onLoad={props.onLoad}\n        onRequest={props.onRequest}\n        onResponse={props.onResponse}\n        resolveClientUrl={props.resolveClientUrl}\n        reset={props.reset}\n        shared={sharedResult}\n        src={props.src}\n      >\n        {props.children}\n      </ConsumeRemoteComponentReact>\n    );\n  }\n\n  return (\n    <ConsumeRemoteComponentReact\n      isolate={props.isolate}\n      mode={props.mode}\n      name={props.name}\n      onBeforeLoad={props.onBeforeLoad}\n      onChange={props.onChange}\n      onError={props.onError}\n      onLoad={props.onLoad}\n      onRequest={props.onRequest}\n      onResponse={props.onResponse}\n      resolveClientUrl={props.resolveClientUrl}\n      reset={props.reset}\n      shared={sharedResult}\n      src={props.src}\n    >\n      {remoteComponent}\n    </ConsumeRemoteComponentReact>\n  );\n}\n\n/**\n * Fetches the remote component properties from the server. You need to pass these properties to the `<ConsumeRemoteComponent>` component to render the fetched remote component.\n *\n * @param src - The source URL of the remote component. When using the Vercel Microfrontends solution, you can use relative paths, e.g. `/nextjs-app-remote/components/header`. Absolute URLs are also supported.\n * @param headers - The HTTP headers used for supporting the Vercel Microfrontends proxy.\n * @returns The properties of the remote component.\n *\n * @example\n *\n * ```tsx\n * import { getRemoteComponentProps } from 'remote-components/next/host/pages';\n * import type { GetServerSideProps } from 'next';\n *\n * export const getServerSideProps: GetServerSideProps<PageProps> = async function getServerSideProps({ req }) {\n *   const myRemoteComponent = await getConsumeRemoteComponentProps(\n *     '/nextjs-app-remote/components/header',\n *     req.headers,\n *   );\n *   return {\n *     props: {\n *       remoteComponents: {\n *         myRemoteComponent,\n *       },\n *     },\n *   };\n * }\n * ```\n */\nexport async function getConsumeRemoteComponentProps(\n  src: string,\n  options?: {\n    /**\n     * Called when a fetch request is made to retrieve the remote component payload.\n     * Can be used to intercept requests, modify headers, or provide a custom response.\n     */\n    onRequest?: OnRequestHook;\n    /**\n     * Called after a fetch completes to retrieve the remote component payload.\n     * Can be used to inspect the response (e.g., check for redirects) or transform it.\n     */\n    onResponse?: OnResponseHook;\n    /**\n     * The name of the exposed remote component. Used to identify the remote component\n     * when multiple remote components are exposed on a page.\n     */\n    name?: string;\n  },\n): Promise<ConsumeRemoteComponentProps> {\n  if (typeof document !== 'undefined') {\n    throw new RemoteComponentsError(\n      '`getConsumeRemoteComponentProps()` can only be used on the server side.',\n    );\n  }\n\n  const {\n    metadata: { bundle, route },\n    name,\n    links,\n    component,\n    nextData,\n    remoteShared,\n  } = await fetchRemoteComponent(src, {\n    rsc: true,\n    ...options,\n  });\n\n  const props: ConsumeRemoteComponentProps = {\n    src,\n    bundle,\n    name,\n    route,\n  };\n\n  const key = getKey(bundle, route, name);\n\n  // do not render the HTML in development mode when remote is using Next.js Pages Router\n  // this behavior is emulating the Next.js Pages Router FOUC as the styles are only applied on the client when running in development mode\n  if (nextData?.buildId !== 'development') {\n    // store the HTML in a global store\n    setComponent(\n      key,\n      <>\n        <RemoteSharedScript name={name} remoteShared={remoteShared} />\n        {links.map((link) => (\n          <link\n            key={`${link.as}_${link.href}`}\n            {...link}\n            precedence={undefined}\n          />\n        ))}\n        {component}\n      </>,\n    );\n  }\n\n  return {\n    ...props,\n    // add remote component key to the props\n    [REMOTE_COMPONENT_KEY]: key,\n  };\n}\n"],"mappings":"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","names":["import_react","_shared","ConsumeRemoteComponentReact"]}
+{"version":3,"sources":["../../../src/host/nextjs/pages.tsx"],"sourcesContent":["import 'remote-components/remote/defaults/wrapper';\nimport * as Form from 'next/form';\nimport * as Link from 'next/link';\nimport * as Router from 'next/router';\nimport * as Script from 'next/script';\nimport { useEffect } from 'react';\nimport { ConsumeRemoteComponent as ConsumeRemoteComponentReact } from 'remote-components/host/react';\nimport { createImageLoaderSharedEntries } from '#internal/host/nextjs/image-shared';\nimport { fetchRemoteComponent } from '#internal/host/server/fetch-remote-component';\nimport type { ConsumeRemoteComponentConfig } from '#internal/host/shared/config';\nimport type {\n  OnRequestHook,\n  OnResponseHook,\n} from '#internal/host/shared/fetch-interceptors';\nimport type { NextImageDeploymentId } from '#internal/host/shared/next-image-deployment-id';\nimport {\n  isSharedModuleManifest,\n  type RemoteSharedModules,\n} from '#internal/host/shared/shared-broker';\nimport {\n  DEFAULT_BUNDLE_NAME,\n  DEFAULT_COMPONENT_NAME,\n} from '#internal/runtime/constants';\nimport {\n  DATA_REMOTE_COMPONENTS_SHARED,\n  DATA_REMOTE_COMPONENTS_SHARED_MANIFEST,\n  ID_SUFFIX_SHARED,\n  ID_SUFFIX_SHARED_MANIFEST,\n} from '#internal/runtime/html/html-spec';\nimport type { ResolveClientUrl } from '#internal/runtime/url/resolve-client-url';\nimport { RemoteComponentsError } from '#internal/utils/error';\nimport { shared as _shared } from '#remote-components/host/defaults/pages';\n\nconst navigationImpl = {\n  useRouter: () => Router.useRouter(),\n  useSearchParams: () => {\n    const router = Router.useRouter();\n    return {\n      get: (key: string) => router.query[key],\n      has: (key: string) => key in router.query,\n    };\n  },\n};\n\nconst sharedCache = new Map<string, Record<string, () => Promise<unknown>>>();\n\nconst shared = (\n  bundle: string,\n  resolveClientUrl?: ResolveClientUrl,\n  ssrImageDeploymentIds?: readonly NextImageDeploymentId[],\n) => {\n  // Skip cache when resolveClientUrl is provided — different resolver instances\n  // must not share a cache entry, since the image loader closes over the resolver.\n  const canUseCache = !resolveClientUrl && !ssrImageDeploymentIds?.length;\n  if (canUseCache) {\n    if (sharedCache.has(bundle)) {\n      return sharedCache.get(bundle);\n    }\n  }\n\n  const result = {\n    // polyfill Next.js App Router client API (minimal)\n    // some API methods are not available when using a Next.js Pages Router application as host\n    'next/navigation': () =>\n      Promise.resolve(navigationImpl) as Promise<unknown>,\n    'next/dist/client/components/navigation': () =>\n      Promise.resolve(navigationImpl) as Promise<unknown>,\n    'next/dist/client/app-dir/link': () =>\n      Promise.resolve(Link.default) as Promise<unknown>,\n    'next/link': () => Promise.resolve(Link.default) as Promise<unknown>,\n    'next/dist/client/app-dir/form': () =>\n      Promise.resolve(Form.default) as Promise<unknown>,\n    'next/form': () => Promise.resolve(Form.default) as Promise<unknown>,\n    'next/dist/client/script': () =>\n      Promise.resolve(Script.default) as Promise<unknown>,\n    'next/script': () => Promise.resolve(Script.default) as Promise<unknown>,\n    'next/router': () => Promise.resolve(Router) as Promise<unknown>,\n    ..._shared,\n    ...createImageLoaderSharedEntries({\n      unbound: resolveClientUrl,\n      ssrImageDeploymentIds,\n    }),\n  };\n\n  if (canUseCache) {\n    sharedCache.set(bundle, result);\n  }\n\n  return result;\n};\n\n// internal symbols to access global store\nconst REMOTE_COMPONENT_STORE = Symbol('REMOTE_COMPONENT_STORE');\nconst REMOTE_COMPONENT_KEY = '__REMOTE_COMPONENT_KEY__';\n\n// temporary global store for remote component HTML\n// the store is used to save the HTML of remote components for SSR without sending the content to the client\nconst self = globalThis as typeof globalThis & {\n  [REMOTE_COMPONENT_STORE]?: Map<string, React.ReactNode>;\n};\n\nfunction RemoteSharedScript({\n  name,\n  remoteShared,\n}: {\n  name: string;\n  remoteShared: RemoteSharedModules;\n}) {\n  if (isSharedModuleManifest(remoteShared)) {\n    return (\n      <script\n        {...{ [DATA_REMOTE_COMPONENTS_SHARED_MANIFEST]: '' }}\n        id={`${name}${ID_SUFFIX_SHARED_MANIFEST}`}\n        type=\"application/json\"\n      >\n        {JSON.stringify(remoteShared)}\n      </script>\n    );\n  }\n\n  return (\n    // @legacy(remote-components<=0.4.x): keep writing the historical shared\n    // map until hosts and remotes on 0.4.x are outside support.\n    <script\n      {...{ [DATA_REMOTE_COMPONENTS_SHARED]: '' }}\n      id={`${name}${ID_SUFFIX_SHARED}`}\n      type=\"application/json\"\n    >\n      {JSON.stringify(remoteShared)}\n    </script>\n  );\n}\n\nfunction getKey(bundle: string, route: string, name: string): string {\n  return `${bundle}:${route}:${name}__${crypto.randomUUID()}`;\n}\n\nfunction setComponent(key: string, component: React.ReactNode): void {\n  if (!self[REMOTE_COMPONENT_STORE]) {\n    self[REMOTE_COMPONENT_STORE] = new Map();\n  }\n  self[REMOTE_COMPONENT_STORE].set(key, component);\n}\n\nfunction getComponent(key: string): React.ReactNode | undefined {\n  const component = self[REMOTE_COMPONENT_STORE]?.get(key);\n  // remove the component from the store after retrieving it to prevent memory leaks\n  // storing the HTML in the global store is only needed for SSR and it's temporary only used for a single render\n  self[REMOTE_COMPONENT_STORE]?.delete(key);\n  return component;\n}\n\n/**\n * Props for the Next.js Pages Router remote component host.\n *\n * Extends {@link ConsumeRemoteComponentConfig} with Pages Router–specific `bundle` and\n * `route` props used for SSR hydration.\n */\nexport interface ConsumeRemoteComponentProps\n  extends ConsumeRemoteComponentConfig {\n  /** The source URL of the remote component. Required for server rendering. */\n  src: string | URL;\n  /** The Webpack bundle name for the remote component. */\n  bundle?: string;\n  /** The page route of the remote component. */\n  route?: string;\n  ssrImageDeploymentIds?: NextImageDeploymentId[];\n  /** Loading fallback content displayed while the remote component is being fetched. */\n  children?: React.ReactNode;\n  [REMOTE_COMPONENT_KEY]?: string;\n}\n\n/**\n * This component handles the rendering of remote microfrontends.\n *\n * @param props - The properties for the remote component.\n * @returns A React component that renders the remote component.\n */\nexport function ConsumeRemoteComponent(props: ConsumeRemoteComponentProps) {\n  const remoteComponent =\n    typeof document !== 'undefined'\n      ? null\n      : // retrieve the HTML from the global store\n        getComponent(props[REMOTE_COMPONENT_KEY] ?? DEFAULT_COMPONENT_NAME);\n\n  const sharedResult = shared(\n    props.bundle ?? DEFAULT_BUNDLE_NAME,\n    props.resolveClientUrl,\n    props.ssrImageDeploymentIds,\n  );\n\n  useEffect(() => {\n    const clientSelf = globalThis as typeof globalThis & {\n      __remote_component_shared__?: Record<string, () => Promise<unknown>>;\n    };\n    // eslint-disable-next-line camelcase\n    clientSelf.__remote_component_shared__ = sharedResult;\n  }, [sharedResult]);\n\n  if (!props[REMOTE_COMPONENT_KEY]) {\n    return (\n      <ConsumeRemoteComponentReact\n        isolate={props.isolate}\n        mode={props.mode}\n        name={props.name}\n        onBeforeLoad={props.onBeforeLoad}\n        onChange={props.onChange}\n        onError={props.onError}\n        onLoad={props.onLoad}\n        onRequest={props.onRequest}\n        onResponse={props.onResponse}\n        resolveClientUrl={props.resolveClientUrl}\n        reset={props.reset}\n        shared={sharedResult}\n        src={props.src}\n      >\n        {props.children}\n      </ConsumeRemoteComponentReact>\n    );\n  }\n\n  return (\n    <ConsumeRemoteComponentReact\n      isolate={props.isolate}\n      mode={props.mode}\n      name={props.name}\n      onBeforeLoad={props.onBeforeLoad}\n      onChange={props.onChange}\n      onError={props.onError}\n      onLoad={props.onLoad}\n      onRequest={props.onRequest}\n      onResponse={props.onResponse}\n      resolveClientUrl={props.resolveClientUrl}\n      reset={props.reset}\n      shared={sharedResult}\n      src={props.src}\n    >\n      {remoteComponent}\n    </ConsumeRemoteComponentReact>\n  );\n}\n\n/**\n * Fetches the remote component properties from the server. You need to pass these properties to the `<ConsumeRemoteComponent>` component to render the fetched remote component.\n *\n * @param src - The source URL of the remote component. When using the Vercel Microfrontends solution, you can use relative paths, e.g. `/nextjs-app-remote/components/header`. Absolute URLs are also supported.\n * @param headers - The HTTP headers used for supporting the Vercel Microfrontends proxy.\n * @returns The properties of the remote component.\n *\n * @example\n *\n * ```tsx\n * import { getRemoteComponentProps } from 'remote-components/next/host/pages';\n * import type { GetServerSideProps } from 'next';\n *\n * export const getServerSideProps: GetServerSideProps<PageProps> = async function getServerSideProps({ req }) {\n *   const myRemoteComponent = await getConsumeRemoteComponentProps(\n *     '/nextjs-app-remote/components/header',\n *     req.headers,\n *   );\n *   return {\n *     props: {\n *       remoteComponents: {\n *         myRemoteComponent,\n *       },\n *     },\n *   };\n * }\n * ```\n */\nexport async function getConsumeRemoteComponentProps(\n  src: string,\n  options?: {\n    /**\n     * Called when a fetch request is made to retrieve the remote component payload.\n     * Can be used to intercept requests, modify headers, or provide a custom response.\n     */\n    onRequest?: OnRequestHook;\n    /**\n     * Called after a fetch completes to retrieve the remote component payload.\n     * Can be used to inspect the response (e.g., check for redirects) or transform it.\n     */\n    onResponse?: OnResponseHook;\n    /**\n     * The name of the exposed remote component. Used to identify the remote component\n     * when multiple remote components are exposed on a page.\n     */\n    name?: string;\n  },\n): Promise<ConsumeRemoteComponentProps> {\n  if (typeof document !== 'undefined') {\n    throw new RemoteComponentsError(\n      '`getConsumeRemoteComponentProps()` can only be used on the server side.',\n    );\n  }\n\n  const {\n    metadata: { bundle, route },\n    name,\n    links,\n    component,\n    nextData,\n    remoteShared,\n    ssrImageDeploymentIds,\n  } = await fetchRemoteComponent(src, {\n    rsc: true,\n    ...options,\n  });\n\n  const props: ConsumeRemoteComponentProps = {\n    src,\n    bundle,\n    name,\n    route,\n    ssrImageDeploymentIds,\n  };\n\n  const key = getKey(bundle, route, name);\n\n  // do not render the HTML in development mode when remote is using Next.js Pages Router\n  // this behavior is emulating the Next.js Pages Router FOUC as the styles are only applied on the client when running in development mode\n  if (nextData?.buildId !== 'development') {\n    // store the HTML in a global store\n    setComponent(\n      key,\n      <>\n        <RemoteSharedScript name={name} remoteShared={remoteShared} />\n        {links.map((link) => (\n          <link\n            key={`${link.as}_${link.href}`}\n            {...link}\n            precedence={undefined}\n          />\n        ))}\n        {component}\n      </>,\n    );\n  }\n\n  return {\n    ...props,\n    // add remote component key to the props\n    [REMOTE_COMPONENT_KEY]: key,\n  };\n}\n"],"mappings":"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","names":["import_react","_shared","ConsumeRemoteComponentReact"]}

package/dist/host/nextjs/pages.d.ts

@@ -1,6 +1,7 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { ConsumeRemoteComponentConfig } from '../../internal/host/shared/config.js';
 import { OnRequestHook, OnResponseHook } from '../../internal/host/shared/fetch-interceptors.js';
+import { NextImageDeploymentId } from '../../internal/host/shared/next-image-deployment-id.js';
 import '../../internal/runtime/url/resolve-client-url.js';
 
 declare const REMOTE_COMPONENT_KEY = "__REMOTE_COMPONENT_KEY__";
@@ -17,6 +18,7 @@ interface ConsumeRemoteComponentProps extends ConsumeRemoteComponentConfig {
     bundle?: string;
     /** The page route of the remote component. */
     route?: string;
+    ssrImageDeploymentIds?: NextImageDeploymentId[];
     /** Loading fallback content displayed while the remote component is being fetched. */
     children?: React.ReactNode;
     [REMOTE_COMPONENT_KEY]?: string;

package/dist/host/nextjs/pages.js

@@ -34,8 +34,9 @@ const navigationImpl = {
   }
 };
 const sharedCache = /* @__PURE__ */ new Map();
-const shared = (bundle, resolveClientUrl) => {
-  if (!resolveClientUrl) {
+const shared = (bundle, resolveClientUrl, ssrImageDeploymentIds) => {
+  const canUseCache = !resolveClientUrl && !ssrImageDeploymentIds?.length;
+  if (canUseCache) {
     if (sharedCache.has(bundle)) {
       return sharedCache.get(bundle);
     }
@@ -53,9 +54,12 @@ const shared = (bundle, resolveClientUrl) => {
     "next/script": () => Promise.resolve(Script.default),
     "next/router": () => Promise.resolve(Router),
     ..._shared,
-    ...createImageLoaderSharedEntries({ unbound: resolveClientUrl })
+    ...createImageLoaderSharedEntries({
+      unbound: resolveClientUrl,
+      ssrImageDeploymentIds
+    })
   };
-  if (!resolveClientUrl) {
+  if (canUseCache) {
     sharedCache.set(bundle, result);
   }
   return result;
@@ -113,7 +117,8 @@ function ConsumeRemoteComponent(props) {
   );
   const sharedResult = shared(
     props.bundle ?? DEFAULT_BUNDLE_NAME,
-    props.resolveClientUrl
+    props.resolveClientUrl,
+    props.ssrImageDeploymentIds
   );
   useEffect(() => {
     const clientSelf = globalThis;
@@ -172,7 +177,8 @@ async function getConsumeRemoteComponentProps(src, options) {
     links,
     component,
     nextData,
-    remoteShared
+    remoteShared,
+    ssrImageDeploymentIds
   } = await fetchRemoteComponent(src, {
     rsc: true,
     ...options
@@ -181,7 +187,8 @@ async function getConsumeRemoteComponentProps(src, options) {
     src,
     bundle,
     name,
-    route
+    route,
+    ssrImageDeploymentIds
   };
   const key = getKey(bundle, route, name);
   if (nextData?.buildId !== "development") {

package/dist/host/nextjs/pages.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/host/nextjs/pages.tsx"],"sourcesContent":["import 'remote-components/remote/defaults/wrapper';\nimport * as Form from 'next/form';\nimport * as Link from 'next/link';\nimport * as Router from 'next/router';\nimport * as Script from 'next/script';\nimport { useEffect } from 'react';\nimport { ConsumeRemoteComponent as ConsumeRemoteComponentReact } from 'remote-components/host/react';\nimport { createImageLoaderSharedEntries } from '#internal/host/nextjs/image-shared';\nimport { fetchRemoteComponent } from '#internal/host/server/fetch-remote-component';\nimport type { ConsumeRemoteComponentConfig } from '#internal/host/shared/config';\nimport type {\n  OnRequestHook,\n  OnResponseHook,\n} from '#internal/host/shared/fetch-interceptors';\nimport {\n  isSharedModuleManifest,\n  type RemoteSharedModules,\n} from '#internal/host/shared/shared-broker';\nimport {\n  DEFAULT_BUNDLE_NAME,\n  DEFAULT_COMPONENT_NAME,\n} from '#internal/runtime/constants';\nimport {\n  DATA_REMOTE_COMPONENTS_SHARED,\n  DATA_REMOTE_COMPONENTS_SHARED_MANIFEST,\n  ID_SUFFIX_SHARED,\n  ID_SUFFIX_SHARED_MANIFEST,\n} from '#internal/runtime/html/html-spec';\nimport type { ResolveClientUrl } from '#internal/runtime/url/resolve-client-url';\nimport { RemoteComponentsError } from '#internal/utils/error';\nimport { shared as _shared } from '#remote-components/host/defaults/pages';\n\nconst navigationImpl = {\n  useRouter: () => Router.useRouter(),\n  useSearchParams: () => {\n    const router = Router.useRouter();\n    return {\n      get: (key: string) => router.query[key],\n      has: (key: string) => key in router.query,\n    };\n  },\n};\n\nconst sharedCache = new Map<string, Record<string, () => Promise<unknown>>>();\nconst shared = (bundle: string, resolveClientUrl?: ResolveClientUrl) => {\n  // Skip cache when resolveClientUrl is provided — different resolver instances\n  // must not share a cache entry, since the image loader closes over the resolver.\n  if (!resolveClientUrl) {\n    if (sharedCache.has(bundle)) {\n      return sharedCache.get(bundle);\n    }\n  }\n\n  const result = {\n    // polyfill Next.js App Router client API (minimal)\n    // some API methods are not available when using a Next.js Pages Router application as host\n    'next/navigation': () =>\n      Promise.resolve(navigationImpl) as Promise<unknown>,\n    'next/dist/client/components/navigation': () =>\n      Promise.resolve(navigationImpl) as Promise<unknown>,\n    'next/dist/client/app-dir/link': () =>\n      Promise.resolve(Link.default) as Promise<unknown>,\n    'next/link': () => Promise.resolve(Link.default) as Promise<unknown>,\n    'next/dist/client/app-dir/form': () =>\n      Promise.resolve(Form.default) as Promise<unknown>,\n    'next/form': () => Promise.resolve(Form.default) as Promise<unknown>,\n    'next/dist/client/script': () =>\n      Promise.resolve(Script.default) as Promise<unknown>,\n    'next/script': () => Promise.resolve(Script.default) as Promise<unknown>,\n    'next/router': () => Promise.resolve(Router) as Promise<unknown>,\n    ..._shared,\n    ...createImageLoaderSharedEntries({ unbound: resolveClientUrl }),\n  };\n\n  if (!resolveClientUrl) {\n    sharedCache.set(bundle, result);\n  }\n\n  return result;\n};\n\n// internal symbols to access global store\nconst REMOTE_COMPONENT_STORE = Symbol('REMOTE_COMPONENT_STORE');\nconst REMOTE_COMPONENT_KEY = '__REMOTE_COMPONENT_KEY__';\n\n// temporary global store for remote component HTML\n// the store is used to save the HTML of remote components for SSR without sending the content to the client\nconst self = globalThis as typeof globalThis & {\n  [REMOTE_COMPONENT_STORE]?: Map<string, React.ReactNode>;\n};\n\nfunction RemoteSharedScript({\n  name,\n  remoteShared,\n}: {\n  name: string;\n  remoteShared: RemoteSharedModules;\n}) {\n  if (isSharedModuleManifest(remoteShared)) {\n    return (\n      <script\n        {...{ [DATA_REMOTE_COMPONENTS_SHARED_MANIFEST]: '' }}\n        id={`${name}${ID_SUFFIX_SHARED_MANIFEST}`}\n        type=\"application/json\"\n      >\n        {JSON.stringify(remoteShared)}\n      </script>\n    );\n  }\n\n  return (\n    // @legacy(remote-components<=0.4.x): keep writing the historical shared\n    // map until hosts and remotes on 0.4.x are outside support.\n    <script\n      {...{ [DATA_REMOTE_COMPONENTS_SHARED]: '' }}\n      id={`${name}${ID_SUFFIX_SHARED}`}\n      type=\"application/json\"\n    >\n      {JSON.stringify(remoteShared)}\n    </script>\n  );\n}\n\nfunction getKey(bundle: string, route: string, name: string): string {\n  return `${bundle}:${route}:${name}__${crypto.randomUUID()}`;\n}\n\nfunction setComponent(key: string, component: React.ReactNode): void {\n  if (!self[REMOTE_COMPONENT_STORE]) {\n    self[REMOTE_COMPONENT_STORE] = new Map();\n  }\n  self[REMOTE_COMPONENT_STORE].set(key, component);\n}\n\nfunction getComponent(key: string): React.ReactNode | undefined {\n  const component = self[REMOTE_COMPONENT_STORE]?.get(key);\n  // remove the component from the store after retrieving it to prevent memory leaks\n  // storing the HTML in the global store is only needed for SSR and it's temporary only used for a single render\n  self[REMOTE_COMPONENT_STORE]?.delete(key);\n  return component;\n}\n\n/**\n * Props for the Next.js Pages Router remote component host.\n *\n * Extends {@link ConsumeRemoteComponentConfig} with Pages Router–specific `bundle` and\n * `route` props used for SSR hydration.\n */\nexport interface ConsumeRemoteComponentProps\n  extends ConsumeRemoteComponentConfig {\n  /** The source URL of the remote component. Required for server rendering. */\n  src: string | URL;\n  /** The Webpack bundle name for the remote component. */\n  bundle?: string;\n  /** The page route of the remote component. */\n  route?: string;\n  /** Loading fallback content displayed while the remote component is being fetched. */\n  children?: React.ReactNode;\n  [REMOTE_COMPONENT_KEY]?: string;\n}\n\n/**\n * This component handles the rendering of remote microfrontends.\n *\n * @param props - The properties for the remote component.\n * @returns A React component that renders the remote component.\n */\nexport function ConsumeRemoteComponent(props: ConsumeRemoteComponentProps) {\n  const remoteComponent =\n    typeof document !== 'undefined'\n      ? null\n      : // retrieve the HTML from the global store\n        getComponent(props[REMOTE_COMPONENT_KEY] ?? DEFAULT_COMPONENT_NAME);\n\n  const sharedResult = shared(\n    props.bundle ?? DEFAULT_BUNDLE_NAME,\n    props.resolveClientUrl,\n  );\n\n  useEffect(() => {\n    const clientSelf = globalThis as typeof globalThis & {\n      __remote_component_shared__?: Record<string, () => Promise<unknown>>;\n    };\n    // eslint-disable-next-line camelcase\n    clientSelf.__remote_component_shared__ = sharedResult;\n  }, [sharedResult]);\n\n  if (!props[REMOTE_COMPONENT_KEY]) {\n    return (\n      <ConsumeRemoteComponentReact\n        isolate={props.isolate}\n        mode={props.mode}\n        name={props.name}\n        onBeforeLoad={props.onBeforeLoad}\n        onChange={props.onChange}\n        onError={props.onError}\n        onLoad={props.onLoad}\n        onRequest={props.onRequest}\n        onResponse={props.onResponse}\n        resolveClientUrl={props.resolveClientUrl}\n        reset={props.reset}\n        shared={sharedResult}\n        src={props.src}\n      >\n        {props.children}\n      </ConsumeRemoteComponentReact>\n    );\n  }\n\n  return (\n    <ConsumeRemoteComponentReact\n      isolate={props.isolate}\n      mode={props.mode}\n      name={props.name}\n      onBeforeLoad={props.onBeforeLoad}\n      onChange={props.onChange}\n      onError={props.onError}\n      onLoad={props.onLoad}\n      onRequest={props.onRequest}\n      onResponse={props.onResponse}\n      resolveClientUrl={props.resolveClientUrl}\n      reset={props.reset}\n      shared={sharedResult}\n      src={props.src}\n    >\n      {remoteComponent}\n    </ConsumeRemoteComponentReact>\n  );\n}\n\n/**\n * Fetches the remote component properties from the server. You need to pass these properties to the `<ConsumeRemoteComponent>` component to render the fetched remote component.\n *\n * @param src - The source URL of the remote component. When using the Vercel Microfrontends solution, you can use relative paths, e.g. `/nextjs-app-remote/components/header`. Absolute URLs are also supported.\n * @param headers - The HTTP headers used for supporting the Vercel Microfrontends proxy.\n * @returns The properties of the remote component.\n *\n * @example\n *\n * ```tsx\n * import { getRemoteComponentProps } from 'remote-components/next/host/pages';\n * import type { GetServerSideProps } from 'next';\n *\n * export const getServerSideProps: GetServerSideProps<PageProps> = async function getServerSideProps({ req }) {\n *   const myRemoteComponent = await getConsumeRemoteComponentProps(\n *     '/nextjs-app-remote/components/header',\n *     req.headers,\n *   );\n *   return {\n *     props: {\n *       remoteComponents: {\n *         myRemoteComponent,\n *       },\n *     },\n *   };\n * }\n * ```\n */\nexport async function getConsumeRemoteComponentProps(\n  src: string,\n  options?: {\n    /**\n     * Called when a fetch request is made to retrieve the remote component payload.\n     * Can be used to intercept requests, modify headers, or provide a custom response.\n     */\n    onRequest?: OnRequestHook;\n    /**\n     * Called after a fetch completes to retrieve the remote component payload.\n     * Can be used to inspect the response (e.g., check for redirects) or transform it.\n     */\n    onResponse?: OnResponseHook;\n    /**\n     * The name of the exposed remote component. Used to identify the remote component\n     * when multiple remote components are exposed on a page.\n     */\n    name?: string;\n  },\n): Promise<ConsumeRemoteComponentProps> {\n  if (typeof document !== 'undefined') {\n    throw new RemoteComponentsError(\n      '`getConsumeRemoteComponentProps()` can only be used on the server side.',\n    );\n  }\n\n  const {\n    metadata: { bundle, route },\n    name,\n    links,\n    component,\n    nextData,\n    remoteShared,\n  } = await fetchRemoteComponent(src, {\n    rsc: true,\n    ...options,\n  });\n\n  const props: ConsumeRemoteComponentProps = {\n    src,\n    bundle,\n    name,\n    route,\n  };\n\n  const key = getKey(bundle, route, name);\n\n  // do not render the HTML in development mode when remote is using Next.js Pages Router\n  // this behavior is emulating the Next.js Pages Router FOUC as the styles are only applied on the client when running in development mode\n  if (nextData?.buildId !== 'development') {\n    // store the HTML in a global store\n    setComponent(\n      key,\n      <>\n        <RemoteSharedScript name={name} remoteShared={remoteShared} />\n        {links.map((link) => (\n          <link\n            key={`${link.as}_${link.href}`}\n            {...link}\n            precedence={undefined}\n          />\n        ))}\n        {component}\n      </>,\n    );\n  }\n\n  return {\n    ...props,\n    // add remote component key to the props\n    [REMOTE_COMPONENT_KEY]: key,\n  };\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../../src/host/nextjs/pages.tsx"],"sourcesContent":["import 'remote-components/remote/defaults/wrapper';\nimport * as Form from 'next/form';\nimport * as Link from 'next/link';\nimport * as Router from 'next/router';\nimport * as Script from 'next/script';\nimport { useEffect } from 'react';\nimport { ConsumeRemoteComponent as ConsumeRemoteComponentReact } from 'remote-components/host/react';\nimport { createImageLoaderSharedEntries } from '#internal/host/nextjs/image-shared';\nimport { fetchRemoteComponent } from '#internal/host/server/fetch-remote-component';\nimport type { ConsumeRemoteComponentConfig } from '#internal/host/shared/config';\nimport type {\n  OnRequestHook,\n  OnResponseHook,\n} from '#internal/host/shared/fetch-interceptors';\nimport type { NextImageDeploymentId } from '#internal/host/shared/next-image-deployment-id';\nimport {\n  isSharedModuleManifest,\n  type RemoteSharedModules,\n} from '#internal/host/shared/shared-broker';\nimport {\n  DEFAULT_BUNDLE_NAME,\n  DEFAULT_COMPONENT_NAME,\n} from '#internal/runtime/constants';\nimport {\n  DATA_REMOTE_COMPONENTS_SHARED,\n  DATA_REMOTE_COMPONENTS_SHARED_MANIFEST,\n  ID_SUFFIX_SHARED,\n  ID_SUFFIX_SHARED_MANIFEST,\n} from '#internal/runtime/html/html-spec';\nimport type { ResolveClientUrl } from '#internal/runtime/url/resolve-client-url';\nimport { RemoteComponentsError } from '#internal/utils/error';\nimport { shared as _shared } from '#remote-components/host/defaults/pages';\n\nconst navigationImpl = {\n  useRouter: () => Router.useRouter(),\n  useSearchParams: () => {\n    const router = Router.useRouter();\n    return {\n      get: (key: string) => router.query[key],\n      has: (key: string) => key in router.query,\n    };\n  },\n};\n\nconst sharedCache = new Map<string, Record<string, () => Promise<unknown>>>();\n\nconst shared = (\n  bundle: string,\n  resolveClientUrl?: ResolveClientUrl,\n  ssrImageDeploymentIds?: readonly NextImageDeploymentId[],\n) => {\n  // Skip cache when resolveClientUrl is provided — different resolver instances\n  // must not share a cache entry, since the image loader closes over the resolver.\n  const canUseCache = !resolveClientUrl && !ssrImageDeploymentIds?.length;\n  if (canUseCache) {\n    if (sharedCache.has(bundle)) {\n      return sharedCache.get(bundle);\n    }\n  }\n\n  const result = {\n    // polyfill Next.js App Router client API (minimal)\n    // some API methods are not available when using a Next.js Pages Router application as host\n    'next/navigation': () =>\n      Promise.resolve(navigationImpl) as Promise<unknown>,\n    'next/dist/client/components/navigation': () =>\n      Promise.resolve(navigationImpl) as Promise<unknown>,\n    'next/dist/client/app-dir/link': () =>\n      Promise.resolve(Link.default) as Promise<unknown>,\n    'next/link': () => Promise.resolve(Link.default) as Promise<unknown>,\n    'next/dist/client/app-dir/form': () =>\n      Promise.resolve(Form.default) as Promise<unknown>,\n    'next/form': () => Promise.resolve(Form.default) as Promise<unknown>,\n    'next/dist/client/script': () =>\n      Promise.resolve(Script.default) as Promise<unknown>,\n    'next/script': () => Promise.resolve(Script.default) as Promise<unknown>,\n    'next/router': () => Promise.resolve(Router) as Promise<unknown>,\n    ..._shared,\n    ...createImageLoaderSharedEntries({\n      unbound: resolveClientUrl,\n      ssrImageDeploymentIds,\n    }),\n  };\n\n  if (canUseCache) {\n    sharedCache.set(bundle, result);\n  }\n\n  return result;\n};\n\n// internal symbols to access global store\nconst REMOTE_COMPONENT_STORE = Symbol('REMOTE_COMPONENT_STORE');\nconst REMOTE_COMPONENT_KEY = '__REMOTE_COMPONENT_KEY__';\n\n// temporary global store for remote component HTML\n// the store is used to save the HTML of remote components for SSR without sending the content to the client\nconst self = globalThis as typeof globalThis & {\n  [REMOTE_COMPONENT_STORE]?: Map<string, React.ReactNode>;\n};\n\nfunction RemoteSharedScript({\n  name,\n  remoteShared,\n}: {\n  name: string;\n  remoteShared: RemoteSharedModules;\n}) {\n  if (isSharedModuleManifest(remoteShared)) {\n    return (\n      <script\n        {...{ [DATA_REMOTE_COMPONENTS_SHARED_MANIFEST]: '' }}\n        id={`${name}${ID_SUFFIX_SHARED_MANIFEST}`}\n        type=\"application/json\"\n      >\n        {JSON.stringify(remoteShared)}\n      </script>\n    );\n  }\n\n  return (\n    // @legacy(remote-components<=0.4.x): keep writing the historical shared\n    // map until hosts and remotes on 0.4.x are outside support.\n    <script\n      {...{ [DATA_REMOTE_COMPONENTS_SHARED]: '' }}\n      id={`${name}${ID_SUFFIX_SHARED}`}\n      type=\"application/json\"\n    >\n      {JSON.stringify(remoteShared)}\n    </script>\n  );\n}\n\nfunction getKey(bundle: string, route: string, name: string): string {\n  return `${bundle}:${route}:${name}__${crypto.randomUUID()}`;\n}\n\nfunction setComponent(key: string, component: React.ReactNode): void {\n  if (!self[REMOTE_COMPONENT_STORE]) {\n    self[REMOTE_COMPONENT_STORE] = new Map();\n  }\n  self[REMOTE_COMPONENT_STORE].set(key, component);\n}\n\nfunction getComponent(key: string): React.ReactNode | undefined {\n  const component = self[REMOTE_COMPONENT_STORE]?.get(key);\n  // remove the component from the store after retrieving it to prevent memory leaks\n  // storing the HTML in the global store is only needed for SSR and it's temporary only used for a single render\n  self[REMOTE_COMPONENT_STORE]?.delete(key);\n  return component;\n}\n\n/**\n * Props for the Next.js Pages Router remote component host.\n *\n * Extends {@link ConsumeRemoteComponentConfig} with Pages Router–specific `bundle` and\n * `route` props used for SSR hydration.\n */\nexport interface ConsumeRemoteComponentProps\n  extends ConsumeRemoteComponentConfig {\n  /** The source URL of the remote component. Required for server rendering. */\n  src: string | URL;\n  /** The Webpack bundle name for the remote component. */\n  bundle?: string;\n  /** The page route of the remote component. */\n  route?: string;\n  ssrImageDeploymentIds?: NextImageDeploymentId[];\n  /** Loading fallback content displayed while the remote component is being fetched. */\n  children?: React.ReactNode;\n  [REMOTE_COMPONENT_KEY]?: string;\n}\n\n/**\n * This component handles the rendering of remote microfrontends.\n *\n * @param props - The properties for the remote component.\n * @returns A React component that renders the remote component.\n */\nexport function ConsumeRemoteComponent(props: ConsumeRemoteComponentProps) {\n  const remoteComponent =\n    typeof document !== 'undefined'\n      ? null\n      : // retrieve the HTML from the global store\n        getComponent(props[REMOTE_COMPONENT_KEY] ?? DEFAULT_COMPONENT_NAME);\n\n  const sharedResult = shared(\n    props.bundle ?? DEFAULT_BUNDLE_NAME,\n    props.resolveClientUrl,\n    props.ssrImageDeploymentIds,\n  );\n\n  useEffect(() => {\n    const clientSelf = globalThis as typeof globalThis & {\n      __remote_component_shared__?: Record<string, () => Promise<unknown>>;\n    };\n    // eslint-disable-next-line camelcase\n    clientSelf.__remote_component_shared__ = sharedResult;\n  }, [sharedResult]);\n\n  if (!props[REMOTE_COMPONENT_KEY]) {\n    return (\n      <ConsumeRemoteComponentReact\n        isolate={props.isolate}\n        mode={props.mode}\n        name={props.name}\n        onBeforeLoad={props.onBeforeLoad}\n        onChange={props.onChange}\n        onError={props.onError}\n        onLoad={props.onLoad}\n        onRequest={props.onRequest}\n        onResponse={props.onResponse}\n        resolveClientUrl={props.resolveClientUrl}\n        reset={props.reset}\n        shared={sharedResult}\n        src={props.src}\n      >\n        {props.children}\n      </ConsumeRemoteComponentReact>\n    );\n  }\n\n  return (\n    <ConsumeRemoteComponentReact\n      isolate={props.isolate}\n      mode={props.mode}\n      name={props.name}\n      onBeforeLoad={props.onBeforeLoad}\n      onChange={props.onChange}\n      onError={props.onError}\n      onLoad={props.onLoad}\n      onRequest={props.onRequest}\n      onResponse={props.onResponse}\n      resolveClientUrl={props.resolveClientUrl}\n      reset={props.reset}\n      shared={sharedResult}\n      src={props.src}\n    >\n      {remoteComponent}\n    </ConsumeRemoteComponentReact>\n  );\n}\n\n/**\n * Fetches the remote component properties from the server. You need to pass these properties to the `<ConsumeRemoteComponent>` component to render the fetched remote component.\n *\n * @param src - The source URL of the remote component. When using the Vercel Microfrontends solution, you can use relative paths, e.g. `/nextjs-app-remote/components/header`. Absolute URLs are also supported.\n * @param headers - The HTTP headers used for supporting the Vercel Microfrontends proxy.\n * @returns The properties of the remote component.\n *\n * @example\n *\n * ```tsx\n * import { getRemoteComponentProps } from 'remote-components/next/host/pages';\n * import type { GetServerSideProps } from 'next';\n *\n * export const getServerSideProps: GetServerSideProps<PageProps> = async function getServerSideProps({ req }) {\n *   const myRemoteComponent = await getConsumeRemoteComponentProps(\n *     '/nextjs-app-remote/components/header',\n *     req.headers,\n *   );\n *   return {\n *     props: {\n *       remoteComponents: {\n *         myRemoteComponent,\n *       },\n *     },\n *   };\n * }\n * ```\n */\nexport async function getConsumeRemoteComponentProps(\n  src: string,\n  options?: {\n    /**\n     * Called when a fetch request is made to retrieve the remote component payload.\n     * Can be used to intercept requests, modify headers, or provide a custom response.\n     */\n    onRequest?: OnRequestHook;\n    /**\n     * Called after a fetch completes to retrieve the remote component payload.\n     * Can be used to inspect the response (e.g., check for redirects) or transform it.\n     */\n    onResponse?: OnResponseHook;\n    /**\n     * The name of the exposed remote component. Used to identify the remote component\n     * when multiple remote components are exposed on a page.\n     */\n    name?: string;\n  },\n): Promise<ConsumeRemoteComponentProps> {\n  if (typeof document !== 'undefined') {\n    throw new RemoteComponentsError(\n      '`getConsumeRemoteComponentProps()` can only be used on the server side.',\n    );\n  }\n\n  const {\n    metadata: { bundle, route },\n    name,\n    links,\n    component,\n    nextData,\n    remoteShared,\n    ssrImageDeploymentIds,\n  } = await fetchRemoteComponent(src, {\n    rsc: true,\n    ...options,\n  });\n\n  const props: ConsumeRemoteComponentProps = {\n    src,\n    bundle,\n    name,\n    route,\n    ssrImageDeploymentIds,\n  };\n\n  const key = getKey(bundle, route, name);\n\n  // do not render the HTML in development mode when remote is using Next.js Pages Router\n  // this behavior is emulating the Next.js Pages Router FOUC as the styles are only applied on the client when running in development mode\n  if (nextData?.buildId !== 'development') {\n    // store the HTML in a global store\n    setComponent(\n      key,\n      <>\n        <RemoteSharedScript name={name} remoteShared={remoteShared} />\n        {links.map((link) => (\n          <link\n            key={`${link.as}_${link.href}`}\n            {...link}\n            precedence={undefined}\n          />\n        ))}\n        {component}\n      </>,\n    );\n  }\n\n  return {\n    ...props,\n    // add remote component key to the props\n    [REMOTE_COMPONENT_KEY]: key,\n  };\n}\n"],"mappings":"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","names":[]}

package/dist/host/react.cjs

@@ -1,22 +1,22 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true});
 
 
-var _chunkYSJ4FKGIcjs = require('../chunk-YSJ4FKGI.cjs');
-require('../chunk-HXCW3WDT.cjs');
-require('../chunk-XWRB6CEA.cjs');
-require('../chunk-TGE3K3TR.cjs');
-require('../chunk-SULMNRMJ.cjs');
+var _chunkWCZKEWRMcjs = require('../chunk-WCZKEWRM.cjs');
+require('../chunk-T2JJIQUJ.cjs');
+require('../chunk-TCFLEBQM.cjs');
+require('../chunk-MAVMKFFL.cjs');
+require('../chunk-TIS6PXSQ.cjs');
+require('../chunk-JKDPK6L5.cjs');
 require('../chunk-3AX5WLZD.cjs');
 require('../chunk-N3SQTOSE.cjs');
-require('../chunk-6PZEDIAK.cjs');
+require('../chunk-ZPJ5J24T.cjs');
 require('../chunk-Z2SLBFQL.cjs');
 require('../chunk-5KTAEO52.cjs');
 require('../chunk-BBXVML3D.cjs');
 require('../chunk-KE7QPAQ4.cjs');
-require('../chunk-TCFLEBQM.cjs');
 require('../chunk-SHFJ5OQA.cjs');
 
 
 
-exports.ConsumeRemoteComponent = _chunkYSJ4FKGIcjs.ConsumeRemoteComponent; exports.useRemoteNavigate = _chunkYSJ4FKGIcjs.useRemoteNavigate;
+exports.ConsumeRemoteComponent = _chunkWCZKEWRMcjs.ConsumeRemoteComponent; exports.useRemoteNavigate = _chunkWCZKEWRMcjs.useRemoteNavigate;
 //# sourceMappingURL=react.cjs.map

package/dist/host/react.js

@@ -1,19 +1,19 @@
 import {
   ConsumeRemoteComponent,
   useRemoteNavigate
-} from "../chunk-CLO56ON2.js";
-import "../chunk-RZGFQTX6.js";
-import "../chunk-M6ACTSVB.js";
-import "../chunk-24LEEDHP.js";
-import "../chunk-BEGVH64U.js";
+} from "../chunk-EIEIT5PG.js";
+import "../chunk-PNKSHWZ3.js";
+import "../chunk-GAXJTFBV.js";
+import "../chunk-XLGLCKZZ.js";
+import "../chunk-YKCU7RFM.js";
+import "../chunk-GG32LZD3.js";
 import "../chunk-LEKG4YWI.js";
 import "../chunk-RHGEBXPL.js";
-import "../chunk-3PR3SWYZ.js";
+import "../chunk-WWHNG5YP.js";
 import "../chunk-D5GNZB6O.js";
 import "../chunk-STIJO4AG.js";
 import "../chunk-ULXU6XWH.js";
 import "../chunk-X6YKUJKH.js";
-import "../chunk-GAXJTFBV.js";
 import "../chunk-ENYGL5CO.js";
 export {
   ConsumeRemoteComponent,

package/dist/internal/host/nextjs/app-client.cjs

@@ -37,7 +37,7 @@ var import_utils = require("#internal/utils");
 var import_logger = require("#internal/utils/logger");
 var import_app_compat = require("./app-compat");
 var import_remote_component_links = require("./remote-component-links");
-async function resolveHostShared(resolveClientUrl) {
+async function resolveHostShared(resolveClientUrl, ssrImageDeploymentIds) {
   const shared = await (0, import_shared_import.tryImportShared)();
   if ("__remote_components_missing_shared__" in shared) {
     await shared.__remote_components_missing_shared__();
@@ -45,7 +45,10 @@ async function resolveHostShared(resolveClientUrl) {
   return {
     "next/router": import_app_compat.routerImpl,
     ...shared,
-    ...(0, import_image_shared.createImageLoaderSharedEntries)({ bound: resolveClientUrl })
+    ...(0, import_image_shared.createImageLoaderSharedEntries)({
+      bound: resolveClientUrl,
+      ssrImageDeploymentIds
+    })
   };
 }
 function ConsumeRemoteComponentClient({
@@ -55,6 +58,7 @@ function ConsumeRemoteComponentClient({
   bundle,
   route = import_constants.DEFAULT_ROUTE,
   runtime = import_constants.RUNTIME_WEBPACK,
+  ssrImageDeploymentIds,
   data,
   nextData,
   scripts = [],
@@ -182,6 +186,13 @@ function ConsumeRemoteComponentClient({
       });
     }
   }, [component, children]);
+  (0, import_react.useEffect)(() => {
+    return () => {
+      hostStateRef.current.abortController?.abort();
+      hostStateRef.current.abortController = void 0;
+      hostStateRef.current.stage = "idle";
+    };
+  }, []);
   (0, import_react.useEffect)(() => {
     (0, import_react.startTransition)(async () => {
       try {
@@ -244,7 +255,7 @@ function ConsumeRemoteComponentClient({
               nextData,
               scripts
             },
-            shared: resolveHostShared(resolveClientUrl),
+            shared: resolveHostShared(resolveClientUrl, ssrImageDeploymentIds),
             remoteShared,
             container: shadowRootRef.current,
             resolveClientUrl,
@@ -266,15 +277,13 @@ function ConsumeRemoteComponentClient({
         setComponent(error);
       }
     });
-    return () => {
-      hostStateRef.current.abortController?.abort();
-    };
   }, [
     component,
     name,
     bundle,
     route,
     runtime,
+    ssrImageDeploymentIds,
     scripts,
     data,
     nextData,