remote-components 0.4.13 → 0.4.14

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,15 +1,15 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true});
 
 
-var _chunkW7RJUCZQcjs = require('../chunk-W7RJUCZQ.cjs');
-require('../chunk-OI37BBBU.cjs');
+var _chunkWCZKEWRMcjs = require('../chunk-WCZKEWRM.cjs');
+require('../chunk-T2JJIQUJ.cjs');
 require('../chunk-TCFLEBQM.cjs');
-require('../chunk-KMG54QXV.cjs');
-require('../chunk-OVD7BRLD.cjs');
-require('../chunk-KP544TQH.cjs');
+require('../chunk-MAVMKFFL.cjs');
+require('../chunk-TIS6PXSQ.cjs');
+require('../chunk-JKDPK6L5.cjs');
 require('../chunk-3AX5WLZD.cjs');
 require('../chunk-N3SQTOSE.cjs');
-require('../chunk-OZCVXVKU.cjs');
+require('../chunk-ZPJ5J24T.cjs');
 require('../chunk-Z2SLBFQL.cjs');
 require('../chunk-5KTAEO52.cjs');
 require('../chunk-BBXVML3D.cjs');
@@ -18,5 +18,5 @@ require('../chunk-SHFJ5OQA.cjs');
 
 
 
-exports.ConsumeRemoteComponent = _chunkW7RJUCZQcjs.ConsumeRemoteComponent; exports.useRemoteNavigate = _chunkW7RJUCZQcjs.useRemoteNavigate;
+exports.ConsumeRemoteComponent = _chunkWCZKEWRMcjs.ConsumeRemoteComponent; exports.useRemoteNavigate = _chunkWCZKEWRMcjs.useRemoteNavigate;
 //# sourceMappingURL=react.cjs.map

package/dist/host/react.js

@@ -1,15 +1,15 @@
 import {
   ConsumeRemoteComponent,
   useRemoteNavigate
-} from "../chunk-CLB2ATH2.js";
-import "../chunk-XEO3XD67.js";
+} from "../chunk-EIEIT5PG.js";
+import "../chunk-PNKSHWZ3.js";
 import "../chunk-GAXJTFBV.js";
-import "../chunk-IE7FXNFJ.js";
-import "../chunk-CBEDRGC7.js";
-import "../chunk-5BBEO4SE.js";
+import "../chunk-XLGLCKZZ.js";
+import "../chunk-YKCU7RFM.js";
+import "../chunk-GG32LZD3.js";
 import "../chunk-LEKG4YWI.js";
 import "../chunk-RHGEBXPL.js";
-import "../chunk-3DR4Z24C.js";
+import "../chunk-WWHNG5YP.js";
 import "../chunk-D5GNZB6O.js";
 import "../chunk-STIJO4AG.js";
 import "../chunk-ULXU6XWH.js";

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 = [],
@@ -251,7 +255,7 @@ function ConsumeRemoteComponentClient({
               nextData,
               scripts
             },
-            shared: resolveHostShared(resolveClientUrl),
+            shared: resolveHostShared(resolveClientUrl, ssrImageDeploymentIds),
             remoteShared,
             container: shadowRootRef.current,
             resolveClientUrl,
@@ -279,6 +283,7 @@ function ConsumeRemoteComponentClient({
     bundle,
     route,
     runtime,
+    ssrImageDeploymentIds,
     scripts,
     data,
     nextData,

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/host/nextjs/app-client.tsx"],"sourcesContent":["'use client';\n\nimport {\n  startTransition,\n  useEffect,\n  useId,\n  useLayoutEffect,\n  useRef,\n  useState,\n} from 'react';\nimport { createPortal } from 'react-dom';\nimport { createImageLoaderSharedEntries } from '#internal/host/nextjs/image-shared';\nimport { tryImportShared } from '#internal/host/nextjs/shared-import';\nimport { useResolveClientUrl } from '#internal/host/react/hooks/use-resolve-client-url';\nimport { getClientOrServerUrl } from '#internal/host/server/get-client-or-server-url';\nimport type { InternalResolveClientUrl } from '#internal/host/server/types';\nimport type { ConsumeClientOnlyConfig } from '#internal/host/shared/config';\nimport { runPipelineFromParsed } from '#internal/host/shared/pipeline';\nimport type { ConsumeServerData } from '#internal/host/shared/server-handoff';\nimport { createHostState } from '#internal/host/shared/state';\nimport { DEFAULT_ROUTE, RUNTIME_WEBPACK } from '#internal/runtime/constants';\nimport { loadStaticRemoteComponent } from '#internal/runtime/loaders/static-loader';\nimport type { MountOrUnmountFunction } from '#internal/runtime/types';\nimport { escapeString } from '#internal/utils';\nimport { logError } from '#internal/utils/logger';\nimport { routerImpl } from './app-compat';\nimport { RemoteComponentLinks } from './remote-component-links';\n\n/**\n * Resolves host-side shared modules (React, Next.js router, image loader, etc.)\n * and returns them as a map the loading pipeline can pass to remotes.\n */\nasync function resolveHostShared(\n  resolveClientUrl: InternalResolveClientUrl | undefined,\n): Promise<Record<string, (bundle?: string) => Promise<unknown>>> {\n  const shared = await tryImportShared();\n  if ('__remote_components_missing_shared__' in shared) {\n    await shared.__remote_components_missing_shared__();\n  }\n  return {\n    'next/router': routerImpl,\n    ...shared,\n    ...createImageLoaderSharedEntries({ bound: resolveClientUrl }),\n  };\n}\n\n/**\n * Extends the RSC-serializable data with {@link ConsumeClientConfig} fields\n * (like `resolveClientUrl`) that can't cross the server→client boundary\n * but are accepted when this component is used directly as a client import.\n */\ninterface ConsumeRemoteComponentClientProps\n  extends ConsumeServerData,\n    ConsumeClientOnlyConfig {}\n\n/**\n * ConsumeRemoteComponentClient - Main component for rendering remote components\n *\n * This component handles the loading and rendering of remote microfrontends.\n * It supports both RSC (React Server Components) and Next.js Pages Router based components.\n */\nexport function ConsumeRemoteComponentClient({\n  src,\n  serverUrl,\n  name,\n  bundle,\n  route = DEFAULT_ROUTE,\n  runtime = RUNTIME_WEBPACK,\n  data,\n  nextData,\n  scripts = [],\n  links = [],\n  remoteShared = {},\n  isolate,\n  mode = 'open',\n  resolveClientUrl: resolveClientUrlProp,\n  reset,\n  type,\n  children,\n}: ConsumeRemoteComponentClientProps) {\n  const remoteComponentId = useId();\n  const [component, setComponent] = useState<React.ReactNode | Error>(null);\n  const url = getClientOrServerUrl(src, serverUrl);\n  const resolveClientUrl = useResolveClientUrl(resolveClientUrlProp, url.href);\n  const hostStateRef = useRef(createHostState());\n  const metadataRef = useRef<{\n    name: string;\n    bundle: string;\n    route: string;\n    url: string;\n  }>({\n    name,\n    bundle,\n    route,\n    url: url.href,\n  });\n  const startRef = useRef<HTMLTemplateElement | null>(null);\n  const endRef = useRef<HTMLTemplateElement | null>(null);\n  const prevRemoteComponentUnmountRef = useRef<{\n    unmount: Set<MountOrUnmountFunction>;\n    root: ShadowRoot | DocumentFragment | null;\n  } | null>(null);\n\n  // Handle errors by re-throwing them\n  if (component instanceof Error) {\n    throw component;\n  }\n\n  // determine whether to use children or loaded component\n  const shouldUseChildren =\n    (!component ||\n      (component &&\n        !nextData &&\n        type !== 'remote-component' &&\n        typeof (component as unknown as Promise<unknown>).then !==\n          'function')) &&\n    // if the remote Next.js Pages Router application is in development mode\n    // we don't use the provided static HTML\n    // to mitigate layout shift when loading CSS using JavaScript on the client\n    nextData?.buildId !== 'development';\n\n  // The pathname is used so this URL is the same across server and client requests for relative src's\n  const keySuffix = `${escapeString(bundle)}_${escapeString(\n    url.pathname,\n  )}_${escapeString(name)}`;\n  const rscName = `__remote_components_rsc_${keySuffix}`;\n\n  const self = globalThis as Record<\n    `__remote_components_shadowroot_${string}`,\n    ShadowRoot | null\n  > &\n    Record<`__remote_components_container_${string}`, HTMLDivElement | null>;\n  const shadowRootKey = `__remote_components_shadowroot_${keySuffix}` as const;\n  const shadowContainerRef = useRef<HTMLDivElement | null>(\n    typeof document === 'undefined'\n      ? null\n      : document.querySelector(\n          `[data-remote-component-id=\"shadowroot_${remoteComponentId}\"]`,\n        ),\n  );\n  const shadowRootRef = useRef<ShadowRoot | null>(\n    self[shadowRootKey] ?? shadowContainerRef.current?.shadowRoot ?? null,\n  );\n  const ssrShadowRootContentRef = useRef<NodeListOf<ChildNode> | null>(null);\n  const ssrLinksStylesRef = useRef<(HTMLLinkElement | HTMLStyleElement)[]>([]);\n\n  if (self[shadowRootKey] && shadowRootRef.current) {\n    self[shadowRootKey] = null;\n  }\n\n  useLayoutEffect(() => {\n    if (\n      !shadowContainerRef.current ||\n      shadowContainerRef.current !== shadowRootRef.current?.host\n    ) {\n      shadowRootRef.current = null;\n    }\n\n    if (\n      isolate !== false &&\n      typeof document !== 'undefined' &&\n      !shadowRootRef.current\n    ) {\n      let shadowRootElement: ShadowRoot | null = null;\n      const element = shadowContainerRef.current;\n\n      shadowRootElement = self[shadowRootKey] ?? element?.shadowRoot ?? null;\n      self[shadowRootKey] = null;\n\n      if (!shadowRootElement && element) {\n        // create a shadow root if it doesn't exist\n        // this is a fallback for browsers that don't support declarative shadow DOM\n        try {\n          shadowRootElement = element.attachShadow({ mode });\n        } catch {\n          // do nothing if attachShadow fails because of existing shadow root\n        }\n      }\n\n      if (shadowRootElement) {\n        shadowRootRef.current = shadowRootElement;\n      }\n    }\n\n    // Capture SSR content once the shadow root is available. This runs\n    // while shouldUseChildren is still true (before the portal adds its\n    // own content), so the query captures only server-rendered nodes.\n    if (\n      !ssrShadowRootContentRef.current &&\n      shadowRootRef.current &&\n      shouldUseChildren\n    ) {\n      ssrShadowRootContentRef.current =\n        shadowRootRef.current.querySelectorAll('*');\n    }\n\n    if (\n      shadowRootRef.current &&\n      ssrShadowRootContentRef.current &&\n      !shouldUseChildren\n    ) {\n      // remove all nodes from the shadow root except links\n      ssrShadowRootContentRef.current.forEach((node) => {\n        if (node.nodeName !== 'LINK' && node.nodeName !== 'STYLE') {\n          node.parentNode?.removeChild(node);\n        } else {\n          ssrLinksStylesRef.current.push(\n            node as HTMLLinkElement | HTMLStyleElement,\n          );\n        }\n      });\n      ssrShadowRootContentRef.current = null;\n    }\n\n    if (ssrLinksStylesRef.current.length > 0 && shadowRootRef.current) {\n      const waitForLoad =\n        shadowRootRef.current.querySelectorAll('link[data-wait]');\n      if (waitForLoad.length > 0) {\n        Promise.all(\n          Array.from(waitForLoad).map(\n            (link) =>\n              new Promise<void>((resolve) => {\n                link.addEventListener('load', () => resolve());\n                link.addEventListener('error', () => resolve());\n              }),\n          ),\n        )\n          .then(() => {\n            waitForLoad.forEach((el) => {\n              el.removeAttribute('data-wait');\n            });\n\n            // remove SSR injected styles and links\n            ssrLinksStylesRef.current.forEach((el) => {\n              el.parentNode?.removeChild(el);\n            });\n            ssrLinksStylesRef.current = [];\n          })\n          .catch((e) => {\n            logError('NextAppRouter', 'Error in cleanup.', e);\n          });\n      }\n    }\n  }, [isolate, mode, self, shadowRootKey, shouldUseChildren]);\n\n  useEffect(() => {\n    // run unmount functions when the component changes or unmounts\n    if (prevRemoteComponentUnmountRef.current && component !== children) {\n      const { unmount, root } = prevRemoteComponentUnmountRef.current;\n      prevRemoteComponentUnmountRef.current = null;\n      Promise.all(\n        Array.from(unmount).map(async (unmountFn) => {\n          try {\n            await unmountFn(root);\n          } catch (e) {\n            logError('NextAppRouter', 'Error in unmount.', e);\n          }\n        }),\n      ).catch((e) => {\n        logError('NextAppRouter', 'Error in unmount cleanup.', e);\n      });\n    }\n  }, [component, children]);\n\n  useEffect(() => {\n    return () => {\n      hostStateRef.current.abortController?.abort();\n      hostStateRef.current.abortController = undefined;\n      hostStateRef.current.stage = 'idle';\n    };\n  }, []);\n\n  useEffect(() => {\n    startTransition(async () => {\n      try {\n        // if we have a component, we don't need to load it again\n        if (\n          (hostStateRef.current.stage !== 'loading' &&\n            !component &&\n            (isolate === false || shadowRootRef.current)) ||\n          metadataRef.current.url !== url.href ||\n          metadataRef.current.name !== name ||\n          metadataRef.current.bundle !== bundle ||\n          metadataRef.current.route !== route\n        ) {\n          // Abort any in-flight load before starting a new one\n          hostStateRef.current.abortController?.abort();\n          const controller = new AbortController();\n          hostStateRef.current.abortController = controller;\n\n          hostStateRef.current.stage = 'loading';\n          metadataRef.current = {\n            name,\n            bundle,\n            route,\n            url: url.href,\n          };\n\n          // use the children as the component when type is remote-component\n          if (type === 'remote-component') {\n            setComponent(children);\n            // load static scripts and execute mount functions\n            // run this async but don't await it as we render children immediately\n            loadStaticRemoteComponent(\n              scripts as HTMLScriptElement[],\n              url,\n              resolveClientUrl,\n            )\n              .then(({ mount, unmount }) => {\n                if (mount.size > 0) {\n                  let root: ShadowRoot | DocumentFragment | null =\n                    shadowRootRef.current;\n                  try {\n                    if (!root && startRef.current && endRef.current) {\n                      root = document.querySelectorAll(\n                        `#${startRef.current.id} ~ *:not(#${endRef.current.id}):has(~ #${endRef.current.id})`,\n                      ) as unknown as DocumentFragment;\n                    }\n                  } catch (e) {\n                    logError('NextAppRouter', 'Error finding root element.', e);\n                  }\n                  if (unmount.size > 0) {\n                    prevRemoteComponentUnmountRef.current = { unmount, root };\n                  }\n                  return Promise.all(\n                    Array.from(mount).map((mountFn) => mountFn(root)),\n                  );\n                }\n              })\n              .catch((e) => {\n                logError(\n                  'NextAppRouter',\n                  'Error loading static remote component.',\n                  e,\n                );\n                setComponent(e as Error);\n              });\n            return;\n          }\n\n          const result = await runPipelineFromParsed({\n            url,\n            name,\n            signal: controller.signal,\n            payload: {\n              name,\n              bundle,\n              route,\n              runtime,\n              data,\n              nextData,\n              scripts,\n            },\n            shared: resolveHostShared(resolveClientUrl),\n            remoteShared,\n            container: shadowRootRef.current,\n            resolveClientUrl,\n            rscName,\n          });\n\n          if (result.status === 'aborted') {\n            return;\n          }\n          if (result.status === 'error') {\n            hostStateRef.current.stage = 'error';\n            setComponent(result.error);\n          } else {\n            hostStateRef.current.stage = 'loaded';\n            setComponent(result.component);\n          }\n        }\n      } catch (error: unknown) {\n        hostStateRef.current.stage = 'error';\n        setComponent(error as Error);\n      }\n    });\n  }, [\n    component,\n    name,\n    bundle,\n    route,\n    runtime,\n    scripts,\n    data,\n    nextData,\n    remoteShared,\n    children,\n    isolate,\n    type,\n    rscName,\n    url,\n    resolveClientUrl,\n  ]);\n\n  if (\n    nextData?.buildId === 'development' &&\n    shadowRootRef.current &&\n    isolate !== false &&\n    reset &&\n    !shadowRootRef.current.querySelector('[data-remote-components-reset]')\n  ) {\n    // inject reset styles into the shadow root\n    const style = document.createElement('style');\n    style.setAttribute('data-remote-components-reset', '');\n    style.textContent = `:host { all: initial; }`;\n    shadowRootRef.current.insertBefore(style, shadowRootRef.current.firstChild);\n  } else if (\n    shadowRootRef.current &&\n    isolate !== false &&\n    !reset &&\n    shadowRootRef.current.querySelector('[data-remote-components-reset]')\n  ) {\n    // ensure reset styles are the first child in the shadow root\n    const style = shadowRootRef.current.querySelector(\n      '[data-remote-components-reset]',\n    );\n    if (style && shadowRootRef.current.firstChild !== style) {\n      shadowRootRef.current.removeChild(style);\n    }\n  }\n\n  const linksToRender = (\n    <RemoteComponentLinks\n      links={links}\n      url={url}\n      serverUrl={serverUrl}\n      bundle={bundle}\n      isolate={isolate}\n      reset={reset}\n      isDevelopment={nextData?.buildId === 'development'}\n    />\n  );\n\n  let componentToRender = shouldUseChildren\n    ? children\n    : (component as React.ReactNode);\n\n  if (isolate !== false) {\n    componentToRender = (\n      <div\n        data-remote-component-id={`shadowroot_${remoteComponentId}`}\n        data-remote-component-isolation-root=\"\"\n        id={`shadowroot_${name}`}\n        ref={shadowContainerRef}\n      >\n        {typeof document === 'undefined' ? (\n          // eslint-disable-next-line react/no-unknown-property\n          <template shadowrootmode={mode}>\n            {mode === 'closed' ? (\n              <div\n                dangerouslySetInnerHTML={{\n                  __html: `<img\n      alt=\"\" decoding=\"async\" style=\"display:none\"\n      src=\"data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==\"\n      onload=\"(function(el){\n        const root = el.getRootNode();\n        globalThis.${shadowRootKey} = root;\n        el.parentElement.remove();\n      })(this)\"\n    />`,\n                }}\n              />\n            ) : null}\n            {linksToRender}\n            {shouldUseChildren ? children : null}\n          </template>\n        ) : null}\n        {typeof document !== 'undefined' &&\n        shadowRootRef.current &&\n        !shouldUseChildren\n          ? createPortal(\n              <>\n                {linksToRender}\n                {componentToRender}\n              </>,\n              shadowRootRef.current,\n            )\n          : null}\n      </div>\n    );\n  }\n\n  return (\n    <>\n      {isolate === false ? (\n        <template id={`${name}_start`} ref={startRef} />\n      ) : null}\n      <script data-remote-component type=\"application/json\">\n        {JSON.stringify({\n          name,\n          bundle,\n          route,\n          runtime,\n        })}\n      </script>\n      {isolate === false ? linksToRender : null}\n      {componentToRender}\n      {nextData ? (\n        <script\n          id={`${bundle}_${route.replace(\n            /[^a-zA-Z0-9]+/g,\n            '_',\n          )}${name}_next_data`}\n          type=\"application/json\"\n        >\n          {JSON.stringify(nextData)}\n        </script>\n      ) : null}\n      {isolate === false ? <template id={`${name}_end`} ref={endRef} /> : null}\n    </>\n  );\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../../../src/host/nextjs/app-client.tsx"],"sourcesContent":["'use client';\n\nimport {\n  startTransition,\n  useEffect,\n  useId,\n  useLayoutEffect,\n  useRef,\n  useState,\n} from 'react';\nimport { createPortal } from 'react-dom';\nimport { createImageLoaderSharedEntries } from '#internal/host/nextjs/image-shared';\nimport { tryImportShared } from '#internal/host/nextjs/shared-import';\nimport { useResolveClientUrl } from '#internal/host/react/hooks/use-resolve-client-url';\nimport { getClientOrServerUrl } from '#internal/host/server/get-client-or-server-url';\nimport type { InternalResolveClientUrl } from '#internal/host/server/types';\nimport type { ConsumeClientOnlyConfig } from '#internal/host/shared/config';\nimport type { NextImageDeploymentId } from '#internal/host/shared/next-image-deployment-id';\nimport { runPipelineFromParsed } from '#internal/host/shared/pipeline';\nimport type { ConsumeServerData } from '#internal/host/shared/server-handoff';\nimport { createHostState } from '#internal/host/shared/state';\nimport { DEFAULT_ROUTE, RUNTIME_WEBPACK } from '#internal/runtime/constants';\nimport { loadStaticRemoteComponent } from '#internal/runtime/loaders/static-loader';\nimport type { MountOrUnmountFunction } from '#internal/runtime/types';\nimport { escapeString } from '#internal/utils';\nimport { logError } from '#internal/utils/logger';\nimport { routerImpl } from './app-compat';\nimport { RemoteComponentLinks } from './remote-component-links';\n\n/**\n * Resolves host-side shared modules (React, Next.js router, image loader, etc.)\n * and returns them as a map the loading pipeline can pass to remotes.\n */\nasync function resolveHostShared(\n  resolveClientUrl: InternalResolveClientUrl | undefined,\n  ssrImageDeploymentIds: readonly NextImageDeploymentId[] | undefined,\n): Promise<Record<string, (bundle?: string) => Promise<unknown>>> {\n  const shared = await tryImportShared();\n  if ('__remote_components_missing_shared__' in shared) {\n    await shared.__remote_components_missing_shared__();\n  }\n  return {\n    'next/router': routerImpl,\n    ...shared,\n    ...createImageLoaderSharedEntries({\n      bound: resolveClientUrl,\n      ssrImageDeploymentIds,\n    }),\n  };\n}\n\n/**\n * Extends the RSC-serializable data with {@link ConsumeClientConfig} fields\n * (like `resolveClientUrl`) that can't cross the server→client boundary\n * but are accepted when this component is used directly as a client import.\n */\ninterface ConsumeRemoteComponentClientProps\n  extends ConsumeServerData,\n    ConsumeClientOnlyConfig {}\n\n/**\n * ConsumeRemoteComponentClient - Main component for rendering remote components\n *\n * This component handles the loading and rendering of remote microfrontends.\n * It supports both RSC (React Server Components) and Next.js Pages Router based components.\n */\nexport function ConsumeRemoteComponentClient({\n  src,\n  serverUrl,\n  name,\n  bundle,\n  route = DEFAULT_ROUTE,\n  runtime = RUNTIME_WEBPACK,\n  ssrImageDeploymentIds,\n  data,\n  nextData,\n  scripts = [],\n  links = [],\n  remoteShared = {},\n  isolate,\n  mode = 'open',\n  resolveClientUrl: resolveClientUrlProp,\n  reset,\n  type,\n  children,\n}: ConsumeRemoteComponentClientProps) {\n  const remoteComponentId = useId();\n  const [component, setComponent] = useState<React.ReactNode | Error>(null);\n  const url = getClientOrServerUrl(src, serverUrl);\n  const resolveClientUrl = useResolveClientUrl(resolveClientUrlProp, url.href);\n  const hostStateRef = useRef(createHostState());\n  const metadataRef = useRef<{\n    name: string;\n    bundle: string;\n    route: string;\n    url: string;\n  }>({\n    name,\n    bundle,\n    route,\n    url: url.href,\n  });\n  const startRef = useRef<HTMLTemplateElement | null>(null);\n  const endRef = useRef<HTMLTemplateElement | null>(null);\n  const prevRemoteComponentUnmountRef = useRef<{\n    unmount: Set<MountOrUnmountFunction>;\n    root: ShadowRoot | DocumentFragment | null;\n  } | null>(null);\n\n  // Handle errors by re-throwing them\n  if (component instanceof Error) {\n    throw component;\n  }\n\n  // determine whether to use children or loaded component\n  const shouldUseChildren =\n    (!component ||\n      (component &&\n        !nextData &&\n        type !== 'remote-component' &&\n        typeof (component as unknown as Promise<unknown>).then !==\n          'function')) &&\n    // if the remote Next.js Pages Router application is in development mode\n    // we don't use the provided static HTML\n    // to mitigate layout shift when loading CSS using JavaScript on the client\n    nextData?.buildId !== 'development';\n\n  // The pathname is used so this URL is the same across server and client requests for relative src's\n  const keySuffix = `${escapeString(bundle)}_${escapeString(\n    url.pathname,\n  )}_${escapeString(name)}`;\n  const rscName = `__remote_components_rsc_${keySuffix}`;\n\n  const self = globalThis as Record<\n    `__remote_components_shadowroot_${string}`,\n    ShadowRoot | null\n  > &\n    Record<`__remote_components_container_${string}`, HTMLDivElement | null>;\n  const shadowRootKey = `__remote_components_shadowroot_${keySuffix}` as const;\n  const shadowContainerRef = useRef<HTMLDivElement | null>(\n    typeof document === 'undefined'\n      ? null\n      : document.querySelector(\n          `[data-remote-component-id=\"shadowroot_${remoteComponentId}\"]`,\n        ),\n  );\n  const shadowRootRef = useRef<ShadowRoot | null>(\n    self[shadowRootKey] ?? shadowContainerRef.current?.shadowRoot ?? null,\n  );\n  const ssrShadowRootContentRef = useRef<NodeListOf<ChildNode> | null>(null);\n  const ssrLinksStylesRef = useRef<(HTMLLinkElement | HTMLStyleElement)[]>([]);\n\n  if (self[shadowRootKey] && shadowRootRef.current) {\n    self[shadowRootKey] = null;\n  }\n\n  useLayoutEffect(() => {\n    if (\n      !shadowContainerRef.current ||\n      shadowContainerRef.current !== shadowRootRef.current?.host\n    ) {\n      shadowRootRef.current = null;\n    }\n\n    if (\n      isolate !== false &&\n      typeof document !== 'undefined' &&\n      !shadowRootRef.current\n    ) {\n      let shadowRootElement: ShadowRoot | null = null;\n      const element = shadowContainerRef.current;\n\n      shadowRootElement = self[shadowRootKey] ?? element?.shadowRoot ?? null;\n      self[shadowRootKey] = null;\n\n      if (!shadowRootElement && element) {\n        // create a shadow root if it doesn't exist\n        // this is a fallback for browsers that don't support declarative shadow DOM\n        try {\n          shadowRootElement = element.attachShadow({ mode });\n        } catch {\n          // do nothing if attachShadow fails because of existing shadow root\n        }\n      }\n\n      if (shadowRootElement) {\n        shadowRootRef.current = shadowRootElement;\n      }\n    }\n\n    // Capture SSR content once the shadow root is available. This runs\n    // while shouldUseChildren is still true (before the portal adds its\n    // own content), so the query captures only server-rendered nodes.\n    if (\n      !ssrShadowRootContentRef.current &&\n      shadowRootRef.current &&\n      shouldUseChildren\n    ) {\n      ssrShadowRootContentRef.current =\n        shadowRootRef.current.querySelectorAll('*');\n    }\n\n    if (\n      shadowRootRef.current &&\n      ssrShadowRootContentRef.current &&\n      !shouldUseChildren\n    ) {\n      // remove all nodes from the shadow root except links\n      ssrShadowRootContentRef.current.forEach((node) => {\n        if (node.nodeName !== 'LINK' && node.nodeName !== 'STYLE') {\n          node.parentNode?.removeChild(node);\n        } else {\n          ssrLinksStylesRef.current.push(\n            node as HTMLLinkElement | HTMLStyleElement,\n          );\n        }\n      });\n      ssrShadowRootContentRef.current = null;\n    }\n\n    if (ssrLinksStylesRef.current.length > 0 && shadowRootRef.current) {\n      const waitForLoad =\n        shadowRootRef.current.querySelectorAll('link[data-wait]');\n      if (waitForLoad.length > 0) {\n        Promise.all(\n          Array.from(waitForLoad).map(\n            (link) =>\n              new Promise<void>((resolve) => {\n                link.addEventListener('load', () => resolve());\n                link.addEventListener('error', () => resolve());\n              }),\n          ),\n        )\n          .then(() => {\n            waitForLoad.forEach((el) => {\n              el.removeAttribute('data-wait');\n            });\n\n            // remove SSR injected styles and links\n            ssrLinksStylesRef.current.forEach((el) => {\n              el.parentNode?.removeChild(el);\n            });\n            ssrLinksStylesRef.current = [];\n          })\n          .catch((e) => {\n            logError('NextAppRouter', 'Error in cleanup.', e);\n          });\n      }\n    }\n  }, [isolate, mode, self, shadowRootKey, shouldUseChildren]);\n\n  useEffect(() => {\n    // run unmount functions when the component changes or unmounts\n    if (prevRemoteComponentUnmountRef.current && component !== children) {\n      const { unmount, root } = prevRemoteComponentUnmountRef.current;\n      prevRemoteComponentUnmountRef.current = null;\n      Promise.all(\n        Array.from(unmount).map(async (unmountFn) => {\n          try {\n            await unmountFn(root);\n          } catch (e) {\n            logError('NextAppRouter', 'Error in unmount.', e);\n          }\n        }),\n      ).catch((e) => {\n        logError('NextAppRouter', 'Error in unmount cleanup.', e);\n      });\n    }\n  }, [component, children]);\n\n  useEffect(() => {\n    return () => {\n      hostStateRef.current.abortController?.abort();\n      hostStateRef.current.abortController = undefined;\n      hostStateRef.current.stage = 'idle';\n    };\n  }, []);\n\n  useEffect(() => {\n    startTransition(async () => {\n      try {\n        // if we have a component, we don't need to load it again\n        if (\n          (hostStateRef.current.stage !== 'loading' &&\n            !component &&\n            (isolate === false || shadowRootRef.current)) ||\n          metadataRef.current.url !== url.href ||\n          metadataRef.current.name !== name ||\n          metadataRef.current.bundle !== bundle ||\n          metadataRef.current.route !== route\n        ) {\n          // Abort any in-flight load before starting a new one\n          hostStateRef.current.abortController?.abort();\n          const controller = new AbortController();\n          hostStateRef.current.abortController = controller;\n\n          hostStateRef.current.stage = 'loading';\n          metadataRef.current = {\n            name,\n            bundle,\n            route,\n            url: url.href,\n          };\n\n          // use the children as the component when type is remote-component\n          if (type === 'remote-component') {\n            setComponent(children);\n            // load static scripts and execute mount functions\n            // run this async but don't await it as we render children immediately\n            loadStaticRemoteComponent(\n              scripts as HTMLScriptElement[],\n              url,\n              resolveClientUrl,\n            )\n              .then(({ mount, unmount }) => {\n                if (mount.size > 0) {\n                  let root: ShadowRoot | DocumentFragment | null =\n                    shadowRootRef.current;\n                  try {\n                    if (!root && startRef.current && endRef.current) {\n                      root = document.querySelectorAll(\n                        `#${startRef.current.id} ~ *:not(#${endRef.current.id}):has(~ #${endRef.current.id})`,\n                      ) as unknown as DocumentFragment;\n                    }\n                  } catch (e) {\n                    logError('NextAppRouter', 'Error finding root element.', e);\n                  }\n                  if (unmount.size > 0) {\n                    prevRemoteComponentUnmountRef.current = { unmount, root };\n                  }\n                  return Promise.all(\n                    Array.from(mount).map((mountFn) => mountFn(root)),\n                  );\n                }\n              })\n              .catch((e) => {\n                logError(\n                  'NextAppRouter',\n                  'Error loading static remote component.',\n                  e,\n                );\n                setComponent(e as Error);\n              });\n            return;\n          }\n\n          const result = await runPipelineFromParsed({\n            url,\n            name,\n            signal: controller.signal,\n            payload: {\n              name,\n              bundle,\n              route,\n              runtime,\n              data,\n              nextData,\n              scripts,\n            },\n            shared: resolveHostShared(resolveClientUrl, ssrImageDeploymentIds),\n            remoteShared,\n            container: shadowRootRef.current,\n            resolveClientUrl,\n            rscName,\n          });\n\n          if (result.status === 'aborted') {\n            return;\n          }\n          if (result.status === 'error') {\n            hostStateRef.current.stage = 'error';\n            setComponent(result.error);\n          } else {\n            hostStateRef.current.stage = 'loaded';\n            setComponent(result.component);\n          }\n        }\n      } catch (error: unknown) {\n        hostStateRef.current.stage = 'error';\n        setComponent(error as Error);\n      }\n    });\n  }, [\n    component,\n    name,\n    bundle,\n    route,\n    runtime,\n    ssrImageDeploymentIds,\n    scripts,\n    data,\n    nextData,\n    remoteShared,\n    children,\n    isolate,\n    type,\n    rscName,\n    url,\n    resolveClientUrl,\n  ]);\n\n  if (\n    nextData?.buildId === 'development' &&\n    shadowRootRef.current &&\n    isolate !== false &&\n    reset &&\n    !shadowRootRef.current.querySelector('[data-remote-components-reset]')\n  ) {\n    // inject reset styles into the shadow root\n    const style = document.createElement('style');\n    style.setAttribute('data-remote-components-reset', '');\n    style.textContent = `:host { all: initial; }`;\n    shadowRootRef.current.insertBefore(style, shadowRootRef.current.firstChild);\n  } else if (\n    shadowRootRef.current &&\n    isolate !== false &&\n    !reset &&\n    shadowRootRef.current.querySelector('[data-remote-components-reset]')\n  ) {\n    // ensure reset styles are the first child in the shadow root\n    const style = shadowRootRef.current.querySelector(\n      '[data-remote-components-reset]',\n    );\n    if (style && shadowRootRef.current.firstChild !== style) {\n      shadowRootRef.current.removeChild(style);\n    }\n  }\n\n  const linksToRender = (\n    <RemoteComponentLinks\n      links={links}\n      url={url}\n      serverUrl={serverUrl}\n      bundle={bundle}\n      isolate={isolate}\n      reset={reset}\n      isDevelopment={nextData?.buildId === 'development'}\n    />\n  );\n\n  let componentToRender = shouldUseChildren\n    ? children\n    : (component as React.ReactNode);\n\n  if (isolate !== false) {\n    componentToRender = (\n      <div\n        data-remote-component-id={`shadowroot_${remoteComponentId}`}\n        data-remote-component-isolation-root=\"\"\n        id={`shadowroot_${name}`}\n        ref={shadowContainerRef}\n      >\n        {typeof document === 'undefined' ? (\n          // eslint-disable-next-line react/no-unknown-property\n          <template shadowrootmode={mode}>\n            {mode === 'closed' ? (\n              <div\n                dangerouslySetInnerHTML={{\n                  __html: `<img\n      alt=\"\" decoding=\"async\" style=\"display:none\"\n      src=\"data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==\"\n      onload=\"(function(el){\n        const root = el.getRootNode();\n        globalThis.${shadowRootKey} = root;\n        el.parentElement.remove();\n      })(this)\"\n    />`,\n                }}\n              />\n            ) : null}\n            {linksToRender}\n            {shouldUseChildren ? children : null}\n          </template>\n        ) : null}\n        {typeof document !== 'undefined' &&\n        shadowRootRef.current &&\n        !shouldUseChildren\n          ? createPortal(\n              <>\n                {linksToRender}\n                {componentToRender}\n              </>,\n              shadowRootRef.current,\n            )\n          : null}\n      </div>\n    );\n  }\n\n  return (\n    <>\n      {isolate === false ? (\n        <template id={`${name}_start`} ref={startRef} />\n      ) : null}\n      <script data-remote-component type=\"application/json\">\n        {JSON.stringify({\n          name,\n          bundle,\n          route,\n          runtime,\n        })}\n      </script>\n      {isolate === false ? linksToRender : null}\n      {componentToRender}\n      {nextData ? (\n        <script\n          id={`${bundle}_${route.replace(\n            /[^a-zA-Z0-9]+/g,\n            '_',\n          )}${name}_next_data`}\n          type=\"application/json\"\n        >\n          {JSON.stringify(nextData)}\n        </script>\n      ) : null}\n      {isolate === false ? <template id={`${name}_end`} ref={endRef} /> : null}\n    </>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AA6aI;AA3aJ,mBAOO;AACP,uBAA6B;AAC7B,0BAA+C;AAC/C,2BAAgC;AAChC,oCAAoC;AACpC,sCAAqC;AAIrC,sBAAsC;AAEtC,mBAAgC;AAChC,uBAA+C;AAC/C,2BAA0C;AAE1C,mBAA6B;AAC7B,oBAAyB;AACzB,wBAA2B;AAC3B,oCAAqC;AAMrC,eAAe,kBACb,kBACA,uBACgE;AAChE,QAAM,SAAS,UAAM,sCAAgB;AACrC,MAAI,0CAA0C,QAAQ;AACpD,UAAM,OAAO,qCAAqC;AAAA,EACpD;AACA,SAAO;AAAA,IACL,eAAe;AAAA,IACf,GAAG;AAAA,IACH,OAAG,oDAA+B;AAAA,MAChC,OAAO;AAAA,MACP;AAAA,IACF,CAAC;AAAA,EACH;AACF;AAiBO,SAAS,6BAA6B;AAAA,EAC3C;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,QAAQ;AAAA,EACR,UAAU;AAAA,EACV;AAAA,EACA;AAAA,EACA;AAAA,EACA,UAAU,CAAC;AAAA,EACX,QAAQ,CAAC;AAAA,EACT,eAAe,CAAC;AAAA,EAChB;AAAA,EACA,OAAO;AAAA,EACP,kBAAkB;AAAA,EAClB;AAAA,EACA;AAAA,EACA;AACF,GAAsC;AACpC,QAAM,wBAAoB,oBAAM;AAChC,QAAM,CAAC,WAAW,YAAY,QAAI,uBAAkC,IAAI;AACxE,QAAM,UAAM,sDAAqB,KAAK,SAAS;AAC/C,QAAM,uBAAmB,mDAAoB,sBAAsB,IAAI,IAAI;AAC3E,QAAM,mBAAe,yBAAO,8BAAgB,CAAC;AAC7C,QAAM,kBAAc,qBAKjB;AAAA,IACD;AAAA,IACA;AAAA,IACA;AAAA,IACA,KAAK,IAAI;AAAA,EACX,CAAC;AACD,QAAM,eAAW,qBAAmC,IAAI;AACxD,QAAM,aAAS,qBAAmC,IAAI;AACtD,QAAM,oCAAgC,qBAG5B,IAAI;AAGd,MAAI,qBAAqB,OAAO;AAC9B,UAAM;AAAA,EACR;AAGA,QAAM,qBACH,CAAC,aACC,aACC,CAAC,YACD,SAAS,sBACT,OAAQ,UAA0C,SAChD;AAAA;AAAA;AAAA,EAIN,UAAU,YAAY;AAGxB,QAAM,YAAY,OAAG,2BAAa,MAAM,SAAK;AAAA,IAC3C,IAAI;AAAA,EACN,SAAK,2BAAa,IAAI;AACtB,QAAM,UAAU,2BAA2B;AAE3C,QAAM,OAAO;AAKb,QAAM,gBAAgB,kCAAkC;AACxD,QAAM,yBAAqB;AAAA,IACzB,OAAO,aAAa,cAChB,OACA,SAAS;AAAA,MACP,yCAAyC;AAAA,IAC3C;AAAA,EACN;AACA,QAAM,oBAAgB;AAAA,IACpB,KAAK,aAAa,KAAK,mBAAmB,SAAS,cAAc;AAAA,EACnE;AACA,QAAM,8BAA0B,qBAAqC,IAAI;AACzE,QAAM,wBAAoB,qBAA+C,CAAC,CAAC;AAE3E,MAAI,KAAK,aAAa,KAAK,cAAc,SAAS;AAChD,SAAK,aAAa,IAAI;AAAA,EACxB;AAEA,oCAAgB,MAAM;AACpB,QACE,CAAC,mBAAmB,WACpB,mBAAmB,YAAY,cAAc,SAAS,MACtD;AACA,oBAAc,UAAU;AAAA,IAC1B;AAEA,QACE,YAAY,SACZ,OAAO,aAAa,eACpB,CAAC,cAAc,SACf;AACA,UAAI,oBAAuC;AAC3C,YAAM,UAAU,mBAAmB;AAEnC,0BAAoB,KAAK,aAAa,KAAK,SAAS,cAAc;AAClE,WAAK,aAAa,IAAI;AAEtB,UAAI,CAAC,qBAAqB,SAAS;AAGjC,YAAI;AACF,8BAAoB,QAAQ,aAAa,EAAE,KAAK,CAAC;AAAA,QACnD,QAAE;AAAA,QAEF;AAAA,MACF;AAEA,UAAI,mBAAmB;AACrB,sBAAc,UAAU;AAAA,MAC1B;AAAA,IACF;AAKA,QACE,CAAC,wBAAwB,WACzB,cAAc,WACd,mBACA;AACA,8BAAwB,UACtB,cAAc,QAAQ,iBAAiB,GAAG;AAAA,IAC9C;AAEA,QACE,cAAc,WACd,wBAAwB,WACxB,CAAC,mBACD;AAEA,8BAAwB,QAAQ,QAAQ,CAAC,SAAS;AAChD,YAAI,KAAK,aAAa,UAAU,KAAK,aAAa,SAAS;AACzD,eAAK,YAAY,YAAY,IAAI;AAAA,QACnC,OAAO;AACL,4BAAkB,QAAQ;AAAA,YACxB;AAAA,UACF;AAAA,QACF;AAAA,MACF,CAAC;AACD,8BAAwB,UAAU;AAAA,IACpC;AAEA,QAAI,kBAAkB,QAAQ,SAAS,KAAK,cAAc,SAAS;AACjE,YAAM,cACJ,cAAc,QAAQ,iBAAiB,iBAAiB;AAC1D,UAAI,YAAY,SAAS,GAAG;AAC1B,gBAAQ;AAAA,UACN,MAAM,KAAK,WAAW,EAAE;AAAA,YACtB,CAAC,SACC,IAAI,QAAc,CAAC,YAAY;AAC7B,mBAAK,iBAAiB,QAAQ,MAAM,QAAQ,CAAC;AAC7C,mBAAK,iBAAiB,SAAS,MAAM,QAAQ,CAAC;AAAA,YAChD,CAAC;AAAA,UACL;AAAA,QACF,EACG,KAAK,MAAM;AACV,sBAAY,QAAQ,CAAC,OAAO;AAC1B,eAAG,gBAAgB,WAAW;AAAA,UAChC,CAAC;AAGD,4BAAkB,QAAQ,QAAQ,CAAC,OAAO;AACxC,eAAG,YAAY,YAAY,EAAE;AAAA,UAC/B,CAAC;AACD,4BAAkB,UAAU,CAAC;AAAA,QAC/B,CAAC,EACA,MAAM,CAAC,MAAM;AACZ,sCAAS,iBAAiB,qBAAqB,CAAC;AAAA,QAClD,CAAC;AAAA,MACL;AAAA,IACF;AAAA,EACF,GAAG,CAAC,SAAS,MAAM,MAAM,eAAe,iBAAiB,CAAC;AAE1D,8BAAU,MAAM;AAEd,QAAI,8BAA8B,WAAW,cAAc,UAAU;AACnE,YAAM,EAAE,SAAS,KAAK,IAAI,8BAA8B;AACxD,oCAA8B,UAAU;AACxC,cAAQ;AAAA,QACN,MAAM,KAAK,OAAO,EAAE,IAAI,OAAO,cAAc;AAC3C,cAAI;AACF,kBAAM,UAAU,IAAI;AAAA,UACtB,SAAS,GAAP;AACA,wCAAS,iBAAiB,qBAAqB,CAAC;AAAA,UAClD;AAAA,QACF,CAAC;AAAA,MACH,EAAE,MAAM,CAAC,MAAM;AACb,oCAAS,iBAAiB,6BAA6B,CAAC;AAAA,MAC1D,CAAC;AAAA,IACH;AAAA,EACF,GAAG,CAAC,WAAW,QAAQ,CAAC;AAExB,8BAAU,MAAM;AACd,WAAO,MAAM;AACX,mBAAa,QAAQ,iBAAiB,MAAM;AAC5C,mBAAa,QAAQ,kBAAkB;AACvC,mBAAa,QAAQ,QAAQ;AAAA,IAC/B;AAAA,EACF,GAAG,CAAC,CAAC;AAEL,8BAAU,MAAM;AACd,sCAAgB,YAAY;AAC1B,UAAI;AAEF,YACG,aAAa,QAAQ,UAAU,aAC9B,CAAC,cACA,YAAY,SAAS,cAAc,YACtC,YAAY,QAAQ,QAAQ,IAAI,QAChC,YAAY,QAAQ,SAAS,QAC7B,YAAY,QAAQ,WAAW,UAC/B,YAAY,QAAQ,UAAU,OAC9B;AAEA,uBAAa,QAAQ,iBAAiB,MAAM;AAC5C,gBAAM,aAAa,IAAI,gBAAgB;AACvC,uBAAa,QAAQ,kBAAkB;AAEvC,uBAAa,QAAQ,QAAQ;AAC7B,sBAAY,UAAU;AAAA,YACpB;AAAA,YACA;AAAA,YACA;AAAA,YACA,KAAK,IAAI;AAAA,UACX;AAGA,cAAI,SAAS,oBAAoB;AAC/B,yBAAa,QAAQ;AAGrB;AAAA,cACE;AAAA,cACA;AAAA,cACA;AAAA,YACF,EACG,KAAK,CAAC,EAAE,OAAO,QAAQ,MAAM;AAC5B,kBAAI,MAAM,OAAO,GAAG;AAClB,oBAAI,OACF,cAAc;AAChB,oBAAI;AACF,sBAAI,CAAC,QAAQ,SAAS,WAAW,OAAO,SAAS;AAC/C,2BAAO,SAAS;AAAA,sBACd,IAAI,SAAS,QAAQ,eAAe,OAAO,QAAQ,cAAc,OAAO,QAAQ;AAAA,oBAClF;AAAA,kBACF;AAAA,gBACF,SAAS,GAAP;AACA,8CAAS,iBAAiB,+BAA+B,CAAC;AAAA,gBAC5D;AACA,oBAAI,QAAQ,OAAO,GAAG;AACpB,gDAA8B,UAAU,EAAE,SAAS,KAAK;AAAA,gBAC1D;AACA,uBAAO,QAAQ;AAAA,kBACb,MAAM,KAAK,KAAK,EAAE,IAAI,CAAC,YAAY,QAAQ,IAAI,CAAC;AAAA,gBAClD;AAAA,cACF;AAAA,YACF,CAAC,EACA,MAAM,CAAC,MAAM;AACZ;AAAA,gBACE;AAAA,gBACA;AAAA,gBACA;AAAA,cACF;AACA,2BAAa,CAAU;AAAA,YACzB,CAAC;AACH;AAAA,UACF;AAEA,gBAAM,SAAS,UAAM,uCAAsB;AAAA,YACzC;AAAA,YACA;AAAA,YACA,QAAQ,WAAW;AAAA,YACnB,SAAS;AAAA,cACP;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,YACF;AAAA,YACA,QAAQ,kBAAkB,kBAAkB,qBAAqB;AAAA,YACjE;AAAA,YACA,WAAW,cAAc;AAAA,YACzB;AAAA,YACA;AAAA,UACF,CAAC;AAED,cAAI,OAAO,WAAW,WAAW;AAC/B;AAAA,UACF;AACA,cAAI,OAAO,WAAW,SAAS;AAC7B,yBAAa,QAAQ,QAAQ;AAC7B,yBAAa,OAAO,KAAK;AAAA,UAC3B,OAAO;AACL,yBAAa,QAAQ,QAAQ;AAC7B,yBAAa,OAAO,SAAS;AAAA,UAC/B;AAAA,QACF;AAAA,MACF,SAAS,OAAP;AACA,qBAAa,QAAQ,QAAQ;AAC7B,qBAAa,KAAc;AAAA,MAC7B;AAAA,IACF,CAAC;AAAA,EACH,GAAG;AAAA,IACD;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAED,MACE,UAAU,YAAY,iBACtB,cAAc,WACd,YAAY,SACZ,SACA,CAAC,cAAc,QAAQ,cAAc,gCAAgC,GACrE;AAEA,UAAM,QAAQ,SAAS,cAAc,OAAO;AAC5C,UAAM,aAAa,gCAAgC,EAAE;AACrD,UAAM,cAAc;AACpB,kBAAc,QAAQ,aAAa,OAAO,cAAc,QAAQ,UAAU;AAAA,EAC5E,WACE,cAAc,WACd,YAAY,SACZ,CAAC,SACD,cAAc,QAAQ,cAAc,gCAAgC,GACpE;AAEA,UAAM,QAAQ,cAAc,QAAQ;AAAA,MAClC;AAAA,IACF;AACA,QAAI,SAAS,cAAc,QAAQ,eAAe,OAAO;AACvD,oBAAc,QAAQ,YAAY,KAAK;AAAA,IACzC;AAAA,EACF;AAEA,QAAM,gBACJ;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,eAAe,UAAU,YAAY;AAAA;AAAA,EACvC;AAGF,MAAI,oBAAoB,oBACpB,WACC;AAEL,MAAI,YAAY,OAAO;AACrB,wBACE;AAAA,MAAC;AAAA;AAAA,QACC,4BAA0B,cAAc;AAAA,QACxC,wCAAqC;AAAA,QACrC,IAAI,cAAc;AAAA,QAClB,KAAK;AAAA,QAEJ;AAAA,iBAAO,aAAa;AAAA;AAAA,YAEnB,6CAAC,cAAS,gBAAgB,MACvB;AAAA,uBAAS,WACR;AAAA,gBAAC;AAAA;AAAA,kBACC,yBAAyB;AAAA,oBACvB,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA,qBAKL;AAAA;AAAA;AAAA;AAAA,kBAIL;AAAA;AAAA,cACF,IACE;AAAA,cACH;AAAA,cACA,oBAAoB,WAAW;AAAA,eAClC;AAAA,cACE;AAAA,UACH,OAAO,aAAa,eACrB,cAAc,WACd,CAAC,wBACG;AAAA,YACE,4EACG;AAAA;AAAA,cACA;AAAA,eACH;AAAA,YACA,cAAc;AAAA,UAChB,IACA;AAAA;AAAA;AAAA,IACN;AAAA,EAEJ;AAEA,SACE,4EACG;AAAA,gBAAY,QACX,4CAAC,cAAS,IAAI,GAAG,cAAc,KAAK,UAAU,IAC5C;AAAA,IACJ,4CAAC,YAAO,yBAAqB,MAAC,MAAK,oBAChC,eAAK,UAAU;AAAA,MACd;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF,CAAC,GACH;AAAA,IACC,YAAY,QAAQ,gBAAgB;AAAA,IACpC;AAAA,IACA,WACC;AAAA,MAAC;AAAA;AAAA,QACC,IAAI,GAAG,UAAU,MAAM;AAAA,UACrB;AAAA,UACA;AAAA,QACF,IAAI;AAAA,QACJ,MAAK;AAAA,QAEJ,eAAK,UAAU,QAAQ;AAAA;AAAA,IAC1B,IACE;AAAA,IACH,YAAY,QAAQ,4CAAC,cAAS,IAAI,GAAG,YAAY,KAAK,QAAQ,IAAK;AAAA,KACtE;AAEJ;","names":[]}

package/dist/internal/host/nextjs/app-client.d.ts

@@ -1,10 +1,11 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { ConsumeClientOnlyConfig } from '../shared/config.js';
-import { C as ConsumeServerData } from '../../../server-handoff-9e905049.js';
+import { C as ConsumeServerData } from '../../../server-handoff-006f9cb5.js';
 import '../../runtime/url/resolve-client-url.js';
 import '../shared/fetch-interceptors.js';
 import 'react';
 import '../shared/asset-descriptors.js';
+import '../shared/next-image-deployment-id.js';
 import '../shared/shared-broker.js';
 import '../../utils/logger.js';
 import '../../runtime/metadata.js';
@@ -22,6 +23,6 @@ interface ConsumeRemoteComponentClientProps extends ConsumeServerData, ConsumeCl
  * This component handles the loading and rendering of remote microfrontends.
  * It supports both RSC (React Server Components) and Next.js Pages Router based components.
  */
-declare function ConsumeRemoteComponentClient({ src, serverUrl, name, bundle, route, runtime, data, nextData, scripts, links, remoteShared, isolate, mode, resolveClientUrl: resolveClientUrlProp, reset, type, children, }: ConsumeRemoteComponentClientProps): react_jsx_runtime.JSX.Element;
+declare function ConsumeRemoteComponentClient({ src, serverUrl, name, bundle, route, runtime, ssrImageDeploymentIds, data, nextData, scripts, links, remoteShared, isolate, mode, resolveClientUrl: resolveClientUrlProp, reset, type, children, }: ConsumeRemoteComponentClientProps): react_jsx_runtime.JSX.Element;
 
 export { ConsumeRemoteComponentClient };

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

@@ -21,7 +21,7 @@ import { escapeString } from "#internal/utils";
 import { logError } from "#internal/utils/logger";
 import { routerImpl } from "./app-compat";
 import { RemoteComponentLinks } from "./remote-component-links";
-async function resolveHostShared(resolveClientUrl) {
+async function resolveHostShared(resolveClientUrl, ssrImageDeploymentIds) {
   const shared = await tryImportShared();
   if ("__remote_components_missing_shared__" in shared) {
     await shared.__remote_components_missing_shared__();
@@ -29,7 +29,10 @@ async function resolveHostShared(resolveClientUrl) {
   return {
     "next/router": routerImpl,
     ...shared,
-    ...createImageLoaderSharedEntries({ bound: resolveClientUrl })
+    ...createImageLoaderSharedEntries({
+      bound: resolveClientUrl,
+      ssrImageDeploymentIds
+    })
   };
 }
 function ConsumeRemoteComponentClient({
@@ -39,6 +42,7 @@ function ConsumeRemoteComponentClient({
   bundle,
   route = DEFAULT_ROUTE,
   runtime = RUNTIME_WEBPACK,
+  ssrImageDeploymentIds,
   data,
   nextData,
   scripts = [],
@@ -235,7 +239,7 @@ function ConsumeRemoteComponentClient({
               nextData,
               scripts
             },
-            shared: resolveHostShared(resolveClientUrl),
+            shared: resolveHostShared(resolveClientUrl, ssrImageDeploymentIds),
             remoteShared,
             container: shadowRootRef.current,
             resolveClientUrl,
@@ -263,6 +267,7 @@ function ConsumeRemoteComponentClient({
     bundle,
     route,
     runtime,
+    ssrImageDeploymentIds,
     scripts,
     data,
     nextData,