remote-components 0.4.13 → 0.4.14

package/dist/internal/host/server/fetch-remote-component.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/host/server/fetch-remote-component.ts"],"sourcesContent":["import { type DefaultTreeAdapterMap, Parser } from 'parse5';\nimport { type RSC, visit } from '#internal/host/nextjs/dom-flight';\nimport {\n  getSkeletonHtml,\n  getSkeletonMessage,\n} from '#internal/host/nextjs/skeleton';\nimport { fetchWithHooks } from '#internal/host/server/fetch-with-hooks';\nimport { getClientSrc } from '#internal/host/server/get-client-src';\nimport {\n  DEPLOYMENT_URL,\n  getSSRRelativePathBaseUrl,\n  PRODUCTION_URL,\n} from '#internal/host/server/get-ssr-relative-path-base-url';\nimport type {\n  LinkDescriptor,\n  ScriptDescriptor,\n} from '#internal/host/shared/asset-descriptors';\nimport type {\n  OnRequestHook,\n  OnResponseHook,\n} from '#internal/host/shared/fetch-interceptors';\nimport type { RemoteSharedModules } from '#internal/host/shared/shared-broker';\nimport {\n  buildMetadata,\n  type RawMetadataAttrs,\n  type RemoteComponentMetadata,\n} from '#internal/runtime/metadata';\nimport { importRSCClientEdge } from '#internal/runtime/rsc-imports';\nimport {\n  failedToFetchRemoteComponentError,\n  multipleRemoteComponentsError,\n  RemoteComponentsError,\n} from '#internal/utils/error';\nimport type { FetchRemoteComponentResponse, NextData } from './types';\n\n/**\n * Converts RSC flight data into a React element tree using the edge streaming\n * runtime. The manifest tells React how to resolve module references back to\n * the remote origin.\n */\nasync function buildRscComponent(\n  rsc: RSC | RSC[] | string | null,\n  serverUrl: URL,\n): Promise<React.ReactNode> {\n  const componentRSC = `0:${JSON.stringify(rsc)}\\n`;\n  const { createFromReadableStream } = await importRSCClientEdge();\n  return createFromReadableStream(\n    new ReadableStream({\n      type: 'bytes',\n      start(controller) {\n        const encoder = new TextEncoder();\n        controller.enqueue(encoder.encode(componentRSC));\n        controller.close();\n      },\n    }),\n    {\n      serverConsumerManifest: {\n        moduleLoading: {\n          prefix: serverUrl.origin,\n          crossOrigin: true,\n        },\n        moduleMap: {},\n      },\n    },\n  );\n}\n\nfunction buildSkeletonResponse(\n  serverUrl: URL,\n  metadata: RemoteComponentMetadata,\n  skeletonComponent: React.ReactNode | undefined,\n): FetchRemoteComponentResponse {\n  return {\n    name: 'remote-component-skeleton',\n    serverUrl,\n    metadata: {\n      ...metadata,\n      type: 'remote-component',\n    },\n    rsc: getSkeletonMessage(),\n    scripts: [],\n    links: [],\n    hydrationData: [],\n    nextData: undefined,\n    component: skeletonComponent,\n    html: getSkeletonHtml(serverUrl.href),\n    remoteShared: {},\n  };\n}\n\n/**\n * Walks the parsed HTML fragment and extracts all remote component data:\n * metadata, scripts, links, hydration data, Next.js data, shared deps, and HTML.\n */\nfunction visitFragment(\n  fragment: DefaultTreeAdapterMap['documentFragment'],\n  serverUrl: URL,\n  remoteName: string | undefined,\n) {\n  const scriptSrcSet = new Set<string>();\n  const scriptTextSet = new Set<string>();\n  const scripts: ScriptDescriptor[] = [];\n\n  const linkKeySet = new Set<string>();\n  const links: LinkDescriptor[] = [];\n\n  const hydrationData: string[] = [];\n  const htmlChunks = new Set<string>();\n\n  let metadata: RemoteComponentMetadata | undefined;\n  let nextData: NextData | undefined;\n  let remoteShared: RemoteSharedModules = {};\n  let hasRSC = false;\n  let hasShared = false;\n  let error: RemoteComponentsError | undefined;\n\n  const rawRscChunks: string[] = [];\n\n  const rsc = visit(fragment, {\n    url: serverUrl,\n    name: remoteName,\n    onMetadata(attrs: RawMetadataAttrs) {\n      const incoming = buildMetadata(attrs, serverUrl);\n      // Skip multiple component detection for Pages Router (__next) since\n      // it only supports one remote component per page\n      if (\n        !remoteName &&\n        metadata &&\n        metadata.id !== incoming.id &&\n        incoming.id !== '__next' &&\n        metadata.id !== '__next' &&\n        !nextData\n      ) {\n        throw multipleRemoteComponentsError(serverUrl.href);\n      }\n      metadata = incoming;\n    },\n    onScript(attrs) {\n      const clientSrc = getClientSrc(attrs.src, serverUrl.href);\n      const textContent =\n        typeof attrs.textContent === 'string' ? attrs.textContent : undefined;\n\n      if (textContent) {\n        if (!scriptTextSet.has(textContent)) {\n          scriptTextSet.add(textContent);\n          scripts.push({ src: '', textContent });\n        }\n      } else if (!scriptSrcSet.has(clientSrc)) {\n        scriptSrcSet.add(clientSrc);\n        scripts.push({ src: clientSrc });\n      }\n    },\n    onLink(attrs) {\n      const relativeAttrs = {\n        ...attrs,\n        href: getClientSrc(attrs.href, serverUrl.href),\n      };\n      const linkKey = `${relativeAttrs.href}::${attrs.rel}`;\n      if (!linkKeySet.has(linkKey)) {\n        linkKeySet.add(linkKey);\n        links.push(relativeAttrs);\n      }\n    },\n    onRSC(chunk) {\n      rawRscChunks.push(chunk);\n      hasRSC = true;\n    },\n    onNextData(data) {\n      nextData = data;\n    },\n    onHTML(chunk) {\n      if (!htmlChunks.has(chunk)) {\n        htmlChunks.add(chunk);\n      }\n    },\n    onShared(_shared) {\n      remoteShared = _shared;\n      hasShared = true;\n    },\n    onError(message, stack) {\n      error = new RemoteComponentsError(message);\n      if (stack) {\n        error.stack = stack;\n      }\n    },\n  });\n\n  hydrationData.push(...rawRscChunks);\n\n  if (error) {\n    throw error;\n  }\n\n  if (metadata) {\n    if (!hasRSC && !nextData && metadata.type === 'nextjs') {\n      throw new RemoteComponentsError(\n        `The Remote Component at \"${serverUrl.href}\" seems to be a Next.js component but it does not contain any RSC flight data or Next.js props data. Make sure the remote URL is correct and contains a Remote Component.`,\n      );\n    }\n\n    if (\n      metadata.type === 'nextjs' &&\n      !hasShared &&\n      !nextData?.props.__REMOTE_COMPONENT__?.sharedManifest &&\n      !nextData?.props.__REMOTE_COMPONENT__?.shared\n    ) {\n      throw new RemoteComponentsError(\n        `No shared dependencies found for Remote Component at \"${serverUrl.href}\". Make sure the remote URL is correct and contains a Remote Component with shared dependencies.`,\n      );\n    }\n  }\n\n  const resolvedShared =\n    nextData?.props.__REMOTE_COMPONENT__?.sharedManifest ??\n    // @legacy(remote-components<=0.4.x): keep accepting the Pages Router\n    // shared map until remotes on 0.4.x are outside the compatibility window.\n    nextData?.props.__REMOTE_COMPONENT__?.shared ??\n    remoteShared;\n\n  return {\n    rsc,\n    metadata,\n    scripts,\n    links,\n    hydrationData,\n    nextData,\n    remoteShared: resolvedShared,\n    html: Array.from(htmlChunks).join(''),\n  };\n}\n\ninterface Options {\n  name?: string;\n  rsc?: boolean;\n  /** Whether this is being called from Next.js App Router. Used to enable skeleton fallback during SSG builds. */\n  appRouter?: boolean;\n  onRequest?: OnRequestHook;\n  onResponse?: OnResponseHook;\n}\n\nasync function fetchWithTags(\n  src: string | URL,\n  relativePathBaseUrl: string,\n  options: Options,\n) {\n  const serverUrl = new URL(src, relativePathBaseUrl);\n  const tags = [\n    '_vc_rc:fetch-remote-component',\n    // the max size of a next cache tag is 256 characters\n    serverUrl.host.slice(0, 256),\n    // use the suffix so this tag is unique if multiple remote\n    // components have the same host, but unique pathnames / query params\n    (typeof src === 'string' ? src : src.href).slice(-256),\n  ];\n  if (options.name) {\n    tags.push(options.name.slice(-256));\n  }\n\n  const fetchInit = { next: { tags } };\n\n  const res = await fetchWithHooks(serverUrl, fetchInit, {\n    onRequest: options.onRequest,\n    onResponse: options.onResponse,\n  });\n\n  return {\n    res,\n    serverUrl,\n    // If the remote component is part of a microfrontend, the src provided will be relative.\n    isMfeRelativeSrc: serverUrl.host === new URL(relativePathBaseUrl).host,\n  };\n}\n\nexport async function fetchRemoteComponent(\n  src: string | URL,\n  options: Options = {},\n): Promise<FetchRemoteComponentResponse> {\n  let { res, isMfeRelativeSrc, serverUrl } = await fetchWithTags(\n    src,\n    getSSRRelativePathBaseUrl(),\n    options,\n  );\n\n  const maybeFirstMfeProductionDeployment =\n    isMfeRelativeSrc && serverUrl.host === PRODUCTION_URL;\n\n  // When deploying a microfrontend with remote components to production for the first time, the fetch with the\n  // production URL will fail if the production URL is not already an MFE alias. The URL becomes an MFE alias\n  // on the first MFE deployment. For this fetch, use the deployment URL which is an MFE alias.\n  if (\n    res.status === 404 &&\n    maybeFirstMfeProductionDeployment &&\n    DEPLOYMENT_URL\n  ) {\n    ({ res, isMfeRelativeSrc, serverUrl } = await fetchWithTags(\n      src,\n      `https://${DEPLOYMENT_URL}`,\n      options,\n    ));\n  }\n\n  // If there is an error in the remote, parse and extract the remote error (except 404 and 401).\n  if (!res.ok && !res.body) {\n    throw failedToFetchRemoteComponentError(serverUrl.href, res);\n  }\n\n  if (res.status === 401) {\n    throw failedToFetchRemoteComponentError(\n      serverUrl.href,\n      res,\n      'If you are using Deployment Protection, ensure the automation bypass environment variable secret in the host matches an automation bypass value in the remote. See https://remote-components-docs.vercel.sh/docs/concepts/cors-external-urls#deployment-protection for details.',\n    );\n  }\n\n  if (res.status === 404) {\n    throw failedToFetchRemoteComponentError(\n      serverUrl.href,\n      res,\n      maybeFirstMfeProductionDeployment\n        ? `If this is the first production build of a microfrontends setup, try redeploying once the remote is deployed to production. Once deployed, this error will not re-occur, and ISR revalidation will happen automatically for remote components once they deploy. https://remote-components-docs.vercel.sh/docs/concepts/isr-deployment`\n        : `Check if you can open it in the browser.`,\n    );\n  }\n\n  if (!res.body) {\n    throw failedToFetchRemoteComponentError(\n      serverUrl.href,\n      res,\n      `Response body is empty. Check if you can open it in the browser and you see the Remote Component content.`,\n    );\n  }\n\n  const parser = Parser.getFragmentParser<DefaultTreeAdapterMap>();\n  const decoder = new TextDecoder();\n  // read the response body as a stream and parse it using the parse5 fragment parser\n  for await (const chunk of res.body as unknown as AsyncIterable<Uint8Array>) {\n    parser.tokenizer.write(decoder.decode(chunk), false);\n  }\n  const fragment = parser.getFragment();\n\n  const remoteName =\n    options.name || (serverUrl.hash ? serverUrl.hash.substring(1) : undefined);\n\n  const {\n    rsc,\n    metadata,\n    scripts,\n    links,\n    hydrationData,\n    nextData,\n    remoteShared,\n    html,\n  } = visitFragment(fragment, serverUrl, remoteName);\n\n  if (!metadata) {\n    // For microfrontend builds during run time, the host and remote build\n    // may be happening concurrently. In this case, the request will 404.\n    // We want to allow the build to continue with a placeholder remote\n    // component. Once the build completes, vercel will automatically revalidate\n    // ISR and fetch the built remote component.\n    const isSSGBuild = process.env.NEXT_PHASE === 'phase-production-build';\n    // Only want this skeleton behaviour in previews to unblock development.\n    // For production, the remote component should already be built.\n    const isPreview = process.env.VERCEL_TARGET_ENV === 'preview';\n    // For app router previews, the host and remote build at the same time, to allow this, render a skeleton\n    // in the host if the remote is not found, which will revalidate when the remote deploys, or give a helpful error in the UI\n    if (isSSGBuild && isMfeRelativeSrc && isPreview && options.appRouter) {\n      let skeletonComponent: React.ReactNode | undefined;\n      if (options.rsc) {\n        const { createElement } = await import('react');\n        skeletonComponent = createElement('div', {\n          dangerouslySetInnerHTML: {\n            __html: getSkeletonHtml(serverUrl.href),\n          },\n        });\n      }\n\n      return buildSkeletonResponse(\n        serverUrl,\n        buildMetadata({}, serverUrl),\n        skeletonComponent,\n      );\n    }\n\n    throw failedToFetchRemoteComponentError(\n      serverUrl.href,\n      res,\n      `No Remote Component found. Make sure the remote URL is correct and contains a Remote Component.`,\n    );\n  }\n\n  const name = remoteName || metadata.name;\n  const component = options.rsc\n    ? await buildRscComponent(rsc, serverUrl)\n    : undefined;\n\n  return {\n    name,\n    serverUrl,\n    metadata,\n    rsc,\n    scripts,\n    links,\n    hydrationData,\n    nextData,\n    component,\n    html,\n    remoteShared,\n  };\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../../../src/host/server/fetch-remote-component.ts"],"sourcesContent":["import { type DefaultTreeAdapterMap, Parser } from 'parse5';\nimport { type RSC, visit } from '#internal/host/nextjs/dom-flight';\nimport {\n  getSkeletonHtml,\n  getSkeletonMessage,\n} from '#internal/host/nextjs/skeleton';\nimport { fetchWithHooks } from '#internal/host/server/fetch-with-hooks';\nimport { getClientSrc } from '#internal/host/server/get-client-src';\nimport {\n  DEPLOYMENT_URL,\n  getSSRRelativePathBaseUrl,\n  PRODUCTION_URL,\n} from '#internal/host/server/get-ssr-relative-path-base-url';\nimport type {\n  LinkDescriptor,\n  ScriptDescriptor,\n} from '#internal/host/shared/asset-descriptors';\nimport type {\n  OnRequestHook,\n  OnResponseHook,\n} from '#internal/host/shared/fetch-interceptors';\nimport {\n  extractDeploymentIdFromSrc,\n  isNextDeploymentAssetSrc,\n  type NextImageDeploymentId,\n} from '#internal/host/shared/next-image-deployment-id';\nimport type { RemoteSharedModules } from '#internal/host/shared/shared-broker';\nimport {\n  buildMetadata,\n  type RawMetadataAttrs,\n  type RemoteComponentMetadata,\n} from '#internal/runtime/metadata';\nimport { importRSCClientEdge } from '#internal/runtime/rsc-imports';\nimport {\n  failedToFetchRemoteComponentError,\n  multipleRemoteComponentsError,\n  RemoteComponentsError,\n} from '#internal/utils/error';\nimport type { FetchRemoteComponentResponse, NextData } from './types';\n\nconst NEXT_IMAGE_PATHNAME = '/_next/image';\n/**\n * Converts RSC flight data into a React element tree using the edge streaming\n * runtime. The manifest tells React how to resolve module references back to\n * the remote origin.\n */\nasync function buildRscComponent(\n  rsc: RSC | RSC[] | string | null,\n  serverUrl: URL,\n): Promise<React.ReactNode> {\n  const componentRSC = `0:${JSON.stringify(rsc)}\\n`;\n  const { createFromReadableStream } = await importRSCClientEdge();\n  return createFromReadableStream(\n    new ReadableStream({\n      type: 'bytes',\n      start(controller) {\n        const encoder = new TextEncoder();\n        controller.enqueue(encoder.encode(componentRSC));\n        controller.close();\n      },\n    }),\n    {\n      serverConsumerManifest: {\n        moduleLoading: {\n          prefix: serverUrl.origin,\n          crossOrigin: true,\n        },\n        moduleMap: {},\n      },\n    },\n  );\n}\n\nfunction buildSkeletonResponse(\n  serverUrl: URL,\n  metadata: RemoteComponentMetadata,\n  skeletonComponent: React.ReactNode | undefined,\n): FetchRemoteComponentResponse {\n  return {\n    name: 'remote-component-skeleton',\n    serverUrl,\n    metadata: {\n      ...metadata,\n      type: 'remote-component',\n    },\n    rsc: getSkeletonMessage(),\n    scripts: [],\n    links: [],\n    hydrationData: [],\n    nextData: undefined,\n    component: skeletonComponent,\n    html: getSkeletonHtml(serverUrl.href),\n    remoteShared: {},\n    ssrImageDeploymentIds: [],\n  };\n}\n\nfunction getNextImageDeploymentId(\n  value: string,\n  base: URL,\n): NextImageDeploymentId | undefined {\n  try {\n    const parsed = new URL(value.replace(/&amp;/g, '&'), base);\n    const imageSrc = parsed.searchParams.get('url');\n    if (\n      !parsed.pathname.endsWith(NEXT_IMAGE_PATHNAME) ||\n      !isNextDeploymentAssetSrc(imageSrc)\n    ) {\n      return undefined;\n    }\n\n    const extracted = extractDeploymentIdFromSrc(imageSrc);\n    const deploymentId =\n      parsed.searchParams.get('dpl') || extracted.deploymentId;\n\n    return deploymentId ? { src: extracted.src, deploymentId } : undefined;\n  } catch {\n    return undefined;\n  }\n}\n\nfunction addNextImageDeploymentId(\n  value: string | undefined,\n  serverUrl: URL,\n  result: Map<string, string>,\n) {\n  if (!value) {\n    return;\n  }\n\n  const image = getNextImageDeploymentId(value, serverUrl);\n  if (image) {\n    result.set(image.src, image.deploymentId);\n  }\n}\n\nfunction addNextImageDeploymentIdsFromSrcset(\n  value: string | undefined,\n  serverUrl: URL,\n  result: Map<string, string>,\n) {\n  if (!value) return;\n  for (const candidate of value.split(',')) {\n    addNextImageDeploymentId(\n      candidate.trim().split(/\\s+/)[0],\n      serverUrl,\n      result,\n    );\n  }\n}\n\n/**\n * Walks the parsed HTML fragment and extracts all remote component data:\n * metadata, scripts, links, hydration data, Next.js data, shared deps, and HTML.\n */\nfunction visitFragment(\n  fragment: DefaultTreeAdapterMap['documentFragment'],\n  serverUrl: URL,\n  remoteName: string | undefined,\n) {\n  const scriptSrcSet = new Set<string>();\n  const scriptTextSet = new Set<string>();\n  const scripts: ScriptDescriptor[] = [];\n\n  const linkKeySet = new Set<string>();\n  const links: LinkDescriptor[] = [];\n\n  const hydrationData: string[] = [];\n  const htmlChunks = new Set<string>();\n  const ssrImageDeploymentIdMap = new Map<string, string>();\n\n  let metadata: RemoteComponentMetadata | undefined;\n  let nextData: NextData | undefined;\n  let remoteShared: RemoteSharedModules = {};\n  let hasRSC = false;\n  let hasShared = false;\n  let error: RemoteComponentsError | undefined;\n\n  const rawRscChunks: string[] = [];\n\n  const rsc = visit(fragment, {\n    url: serverUrl,\n    name: remoteName,\n    onMetadata(attrs: RawMetadataAttrs) {\n      const incoming = buildMetadata(attrs, serverUrl);\n      // Skip multiple component detection for Pages Router (__next) since\n      // it only supports one remote component per page\n      if (\n        !remoteName &&\n        metadata &&\n        metadata.id !== incoming.id &&\n        incoming.id !== '__next' &&\n        metadata.id !== '__next' &&\n        !nextData\n      ) {\n        throw multipleRemoteComponentsError(serverUrl.href);\n      }\n      metadata = incoming;\n    },\n    onScript(attrs) {\n      const clientSrc = getClientSrc(attrs.src, serverUrl.href);\n      const textContent =\n        typeof attrs.textContent === 'string' ? attrs.textContent : undefined;\n\n      if (textContent) {\n        if (!scriptTextSet.has(textContent)) {\n          scriptTextSet.add(textContent);\n          scripts.push({ src: '', textContent });\n        }\n      } else if (!scriptSrcSet.has(clientSrc)) {\n        scriptSrcSet.add(clientSrc);\n        scripts.push({ src: clientSrc });\n      }\n    },\n    onLink(attrs) {\n      const relativeAttrs = {\n        ...attrs,\n        href: getClientSrc(attrs.href, serverUrl.href),\n      };\n      const linkKey = `${relativeAttrs.href}::${attrs.rel}`;\n      if (!linkKeySet.has(linkKey)) {\n        linkKeySet.add(linkKey);\n        links.push(relativeAttrs);\n      }\n    },\n    onRSC(chunk) {\n      rawRscChunks.push(chunk);\n      hasRSC = true;\n    },\n    onNextData(data) {\n      nextData = data;\n    },\n    onHTML(chunk) {\n      if (!htmlChunks.has(chunk)) {\n        htmlChunks.add(chunk);\n      }\n    },\n    onShared(_shared) {\n      remoteShared = _shared;\n      hasShared = true;\n    },\n    onError(message, stack) {\n      error = new RemoteComponentsError(message);\n      if (stack) {\n        error.stack = stack;\n      }\n    },\n    onElement(nodeName, attrs) {\n      if (nodeName !== 'img') {\n        return;\n      }\n\n      addNextImageDeploymentId(attrs.src, serverUrl, ssrImageDeploymentIdMap);\n      addNextImageDeploymentIdsFromSrcset(\n        attrs.srcset,\n        serverUrl,\n        ssrImageDeploymentIdMap,\n      );\n    },\n  });\n\n  hydrationData.push(...rawRscChunks);\n\n  if (error) {\n    throw error;\n  }\n\n  if (metadata) {\n    if (!hasRSC && !nextData && metadata.type === 'nextjs') {\n      throw new RemoteComponentsError(\n        `The Remote Component at \"${serverUrl.href}\" seems to be a Next.js component but it does not contain any RSC flight data or Next.js props data. Make sure the remote URL is correct and contains a Remote Component.`,\n      );\n    }\n\n    if (\n      metadata.type === 'nextjs' &&\n      !hasShared &&\n      !nextData?.props.__REMOTE_COMPONENT__?.sharedManifest &&\n      !nextData?.props.__REMOTE_COMPONENT__?.shared\n    ) {\n      throw new RemoteComponentsError(\n        `No shared dependencies found for Remote Component at \"${serverUrl.href}\". Make sure the remote URL is correct and contains a Remote Component with shared dependencies.`,\n      );\n    }\n  }\n\n  const resolvedShared =\n    nextData?.props.__REMOTE_COMPONENT__?.sharedManifest ??\n    // @legacy(remote-components<=0.4.x): keep accepting the Pages Router\n    // shared map until remotes on 0.4.x are outside the compatibility window.\n    nextData?.props.__REMOTE_COMPONENT__?.shared ??\n    remoteShared;\n\n  return {\n    rsc,\n    metadata,\n    scripts,\n    links,\n    hydrationData,\n    nextData,\n    remoteShared: resolvedShared,\n    ssrImageDeploymentIds: Array.from(\n      ssrImageDeploymentIdMap,\n      ([src, deploymentId]) => ({ src, deploymentId }),\n    ),\n    html: Array.from(htmlChunks).join(''),\n  };\n}\n\ninterface Options {\n  name?: string;\n  rsc?: boolean;\n  /** Whether this is being called from Next.js App Router. Used to enable skeleton fallback during SSG builds. */\n  appRouter?: boolean;\n  onRequest?: OnRequestHook;\n  onResponse?: OnResponseHook;\n}\n\nasync function fetchWithTags(\n  src: string | URL,\n  relativePathBaseUrl: string,\n  options: Options,\n) {\n  const serverUrl = new URL(src, relativePathBaseUrl);\n  const tags = [\n    '_vc_rc:fetch-remote-component',\n    // the max size of a next cache tag is 256 characters\n    serverUrl.host.slice(0, 256),\n    // use the suffix so this tag is unique if multiple remote\n    // components have the same host, but unique pathnames / query params\n    (typeof src === 'string' ? src : src.href).slice(-256),\n  ];\n  if (options.name) {\n    tags.push(options.name.slice(-256));\n  }\n\n  const fetchInit = { next: { tags } };\n\n  const res = await fetchWithHooks(serverUrl, fetchInit, {\n    onRequest: options.onRequest,\n    onResponse: options.onResponse,\n  });\n\n  return {\n    res,\n    serverUrl,\n    // If the remote component is part of a microfrontend, the src provided will be relative.\n    isMfeRelativeSrc: serverUrl.host === new URL(relativePathBaseUrl).host,\n  };\n}\n\nexport async function fetchRemoteComponent(\n  src: string | URL,\n  options: Options = {},\n): Promise<FetchRemoteComponentResponse> {\n  let { res, isMfeRelativeSrc, serverUrl } = await fetchWithTags(\n    src,\n    getSSRRelativePathBaseUrl(),\n    options,\n  );\n\n  const maybeFirstMfeProductionDeployment =\n    isMfeRelativeSrc && serverUrl.host === PRODUCTION_URL;\n\n  // When deploying a microfrontend with remote components to production for the first time, the fetch with the\n  // production URL will fail if the production URL is not already an MFE alias. The URL becomes an MFE alias\n  // on the first MFE deployment. For this fetch, use the deployment URL which is an MFE alias.\n  if (\n    res.status === 404 &&\n    maybeFirstMfeProductionDeployment &&\n    DEPLOYMENT_URL\n  ) {\n    ({ res, isMfeRelativeSrc, serverUrl } = await fetchWithTags(\n      src,\n      `https://${DEPLOYMENT_URL}`,\n      options,\n    ));\n  }\n\n  // If there is an error in the remote, parse and extract the remote error (except 404 and 401).\n  if (!res.ok && !res.body) {\n    throw failedToFetchRemoteComponentError(serverUrl.href, res);\n  }\n\n  if (res.status === 401) {\n    throw failedToFetchRemoteComponentError(\n      serverUrl.href,\n      res,\n      'If you are using Deployment Protection, ensure the automation bypass environment variable secret in the host matches an automation bypass value in the remote. See https://remote-components-docs.vercel.sh/docs/concepts/cors-external-urls#deployment-protection for details.',\n    );\n  }\n\n  if (res.status === 404) {\n    throw failedToFetchRemoteComponentError(\n      serverUrl.href,\n      res,\n      maybeFirstMfeProductionDeployment\n        ? `If this is the first production build of a microfrontends setup, try redeploying once the remote is deployed to production. Once deployed, this error will not re-occur, and ISR revalidation will happen automatically for remote components once they deploy. https://remote-components-docs.vercel.sh/docs/concepts/isr-deployment`\n        : `Check if you can open it in the browser.`,\n    );\n  }\n\n  if (!res.body) {\n    throw failedToFetchRemoteComponentError(\n      serverUrl.href,\n      res,\n      `Response body is empty. Check if you can open it in the browser and you see the Remote Component content.`,\n    );\n  }\n\n  const parser = Parser.getFragmentParser<DefaultTreeAdapterMap>();\n  const decoder = new TextDecoder();\n  // read the response body as a stream and parse it using the parse5 fragment parser\n  for await (const chunk of res.body as unknown as AsyncIterable<Uint8Array>) {\n    parser.tokenizer.write(decoder.decode(chunk), false);\n  }\n  const fragment = parser.getFragment();\n\n  const remoteName =\n    options.name || (serverUrl.hash ? serverUrl.hash.substring(1) : undefined);\n\n  const {\n    rsc,\n    metadata,\n    scripts,\n    links,\n    hydrationData,\n    nextData,\n    remoteShared,\n    html,\n    ssrImageDeploymentIds,\n  } = visitFragment(fragment, serverUrl, remoteName);\n\n  if (!metadata) {\n    // For microfrontend builds during run time, the host and remote build\n    // may be happening concurrently. In this case, the request will 404.\n    // We want to allow the build to continue with a placeholder remote\n    // component. Once the build completes, vercel will automatically revalidate\n    // ISR and fetch the built remote component.\n    const isSSGBuild = process.env.NEXT_PHASE === 'phase-production-build';\n    // Only want this skeleton behaviour in previews to unblock development.\n    // For production, the remote component should already be built.\n    const isPreview = process.env.VERCEL_TARGET_ENV === 'preview';\n    // For app router previews, the host and remote build at the same time, to allow this, render a skeleton\n    // in the host if the remote is not found, which will revalidate when the remote deploys, or give a helpful error in the UI\n    if (isSSGBuild && isMfeRelativeSrc && isPreview && options.appRouter) {\n      let skeletonComponent: React.ReactNode | undefined;\n      if (options.rsc) {\n        const { createElement } = await import('react');\n        skeletonComponent = createElement('div', {\n          dangerouslySetInnerHTML: {\n            __html: getSkeletonHtml(serverUrl.href),\n          },\n        });\n      }\n\n      return buildSkeletonResponse(\n        serverUrl,\n        buildMetadata({}, serverUrl),\n        skeletonComponent,\n      );\n    }\n\n    throw failedToFetchRemoteComponentError(\n      serverUrl.href,\n      res,\n      `No Remote Component found. Make sure the remote URL is correct and contains a Remote Component.`,\n    );\n  }\n\n  const name = remoteName || metadata.name;\n  const component = options.rsc\n    ? await buildRscComponent(rsc, serverUrl)\n    : undefined;\n\n  return {\n    name,\n    serverUrl,\n    metadata,\n    rsc,\n    scripts,\n    links,\n    hydrationData,\n    nextData,\n    component,\n    html,\n    remoteShared,\n    ssrImageDeploymentIds,\n  };\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,oBAAmD;AACnD,wBAAgC;AAChC,sBAGO;AACP,8BAA+B;AAC/B,4BAA6B;AAC7B,4CAIO;AASP,sCAIO;AAEP,sBAIO;AACP,yBAAoC;AACpC,mBAIO;AAGP,MAAM,sBAAsB;AAM5B,eAAe,kBACb,KACA,WAC0B;AAC1B,QAAM,eAAe,KAAK,KAAK,UAAU,GAAG;AAAA;AAC5C,QAAM,EAAE,yBAAyB,IAAI,UAAM,wCAAoB;AAC/D,SAAO;AAAA,IACL,IAAI,eAAe;AAAA,MACjB,MAAM;AAAA,MACN,MAAM,YAAY;AAChB,cAAM,UAAU,IAAI,YAAY;AAChC,mBAAW,QAAQ,QAAQ,OAAO,YAAY,CAAC;AAC/C,mBAAW,MAAM;AAAA,MACnB;AAAA,IACF,CAAC;AAAA,IACD;AAAA,MACE,wBAAwB;AAAA,QACtB,eAAe;AAAA,UACb,QAAQ,UAAU;AAAA,UAClB,aAAa;AAAA,QACf;AAAA,QACA,WAAW,CAAC;AAAA,MACd;AAAA,IACF;AAAA,EACF;AACF;AAEA,SAAS,sBACP,WACA,UACA,mBAC8B;AAC9B,SAAO;AAAA,IACL,MAAM;AAAA,IACN;AAAA,IACA,UAAU;AAAA,MACR,GAAG;AAAA,MACH,MAAM;AAAA,IACR;AAAA,IACA,SAAK,oCAAmB;AAAA,IACxB,SAAS,CAAC;AAAA,IACV,OAAO,CAAC;AAAA,IACR,eAAe,CAAC;AAAA,IAChB,UAAU;AAAA,IACV,WAAW;AAAA,IACX,UAAM,iCAAgB,UAAU,IAAI;AAAA,IACpC,cAAc,CAAC;AAAA,IACf,uBAAuB,CAAC;AAAA,EAC1B;AACF;AAEA,SAAS,yBACP,OACA,MACmC;AACnC,MAAI;AACF,UAAM,SAAS,IAAI,IAAI,MAAM,QAAQ,UAAU,GAAG,GAAG,IAAI;AACzD,UAAM,WAAW,OAAO,aAAa,IAAI,KAAK;AAC9C,QACE,CAAC,OAAO,SAAS,SAAS,mBAAmB,KAC7C,KAAC,0DAAyB,QAAQ,GAClC;AACA,aAAO;AAAA,IACT;AAEA,UAAM,gBAAY,4DAA2B,QAAQ;AACrD,UAAM,eACJ,OAAO,aAAa,IAAI,KAAK,KAAK,UAAU;AAE9C,WAAO,eAAe,EAAE,KAAK,UAAU,KAAK,aAAa,IAAI;AAAA,EAC/D,QAAE;AACA,WAAO;AAAA,EACT;AACF;AAEA,SAAS,yBACP,OACA,WACA,QACA;AACA,MAAI,CAAC,OAAO;AACV;AAAA,EACF;AAEA,QAAM,QAAQ,yBAAyB,OAAO,SAAS;AACvD,MAAI,OAAO;AACT,WAAO,IAAI,MAAM,KAAK,MAAM,YAAY;AAAA,EAC1C;AACF;AAEA,SAAS,oCACP,OACA,WACA,QACA;AACA,MAAI,CAAC;AAAO;AACZ,aAAW,aAAa,MAAM,MAAM,GAAG,GAAG;AACxC;AAAA,MACE,UAAU,KAAK,EAAE,MAAM,KAAK,EAAE,CAAC;AAAA,MAC/B;AAAA,MACA;AAAA,IACF;AAAA,EACF;AACF;AAMA,SAAS,cACP,UACA,WACA,YACA;AACA,QAAM,eAAe,oBAAI,IAAY;AACrC,QAAM,gBAAgB,oBAAI,IAAY;AACtC,QAAM,UAA8B,CAAC;AAErC,QAAM,aAAa,oBAAI,IAAY;AACnC,QAAM,QAA0B,CAAC;AAEjC,QAAM,gBAA0B,CAAC;AACjC,QAAM,aAAa,oBAAI,IAAY;AACnC,QAAM,0BAA0B,oBAAI,IAAoB;AAExD,MAAI;AACJ,MAAI;AACJ,MAAI,eAAoC,CAAC;AACzC,MAAI,SAAS;AACb,MAAI,YAAY;AAChB,MAAI;AAEJ,QAAM,eAAyB,CAAC;AAEhC,QAAM,UAAM,yBAAM,UAAU;AAAA,IAC1B,KAAK;AAAA,IACL,MAAM;AAAA,IACN,WAAW,OAAyB;AAClC,YAAM,eAAW,+BAAc,OAAO,SAAS;AAG/C,UACE,CAAC,cACD,YACA,SAAS,OAAO,SAAS,MACzB,SAAS,OAAO,YAChB,SAAS,OAAO,YAChB,CAAC,UACD;AACA,kBAAM,4CAA8B,UAAU,IAAI;AAAA,MACpD;AACA,iBAAW;AAAA,IACb;AAAA,IACA,SAAS,OAAO;AACd,YAAM,gBAAY,oCAAa,MAAM,KAAK,UAAU,IAAI;AACxD,YAAM,cACJ,OAAO,MAAM,gBAAgB,WAAW,MAAM,cAAc;AAE9D,UAAI,aAAa;AACf,YAAI,CAAC,cAAc,IAAI,WAAW,GAAG;AACnC,wBAAc,IAAI,WAAW;AAC7B,kBAAQ,KAAK,EAAE,KAAK,IAAI,YAAY,CAAC;AAAA,QACvC;AAAA,MACF,WAAW,CAAC,aAAa,IAAI,SAAS,GAAG;AACvC,qBAAa,IAAI,SAAS;AAC1B,gBAAQ,KAAK,EAAE,KAAK,UAAU,CAAC;AAAA,MACjC;AAAA,IACF;AAAA,IACA,OAAO,OAAO;AACZ,YAAM,gBAAgB;AAAA,QACpB,GAAG;AAAA,QACH,UAAM,oCAAa,MAAM,MAAM,UAAU,IAAI;AAAA,MAC/C;AACA,YAAM,UAAU,GAAG,cAAc,SAAS,MAAM;AAChD,UAAI,CAAC,WAAW,IAAI,OAAO,GAAG;AAC5B,mBAAW,IAAI,OAAO;AACtB,cAAM,KAAK,aAAa;AAAA,MAC1B;AAAA,IACF;AAAA,IACA,MAAM,OAAO;AACX,mBAAa,KAAK,KAAK;AACvB,eAAS;AAAA,IACX;AAAA,IACA,WAAW,MAAM;AACf,iBAAW;AAAA,IACb;AAAA,IACA,OAAO,OAAO;AACZ,UAAI,CAAC,WAAW,IAAI,KAAK,GAAG;AAC1B,mBAAW,IAAI,KAAK;AAAA,MACtB;AAAA,IACF;AAAA,IACA,SAAS,SAAS;AAChB,qBAAe;AACf,kBAAY;AAAA,IACd;AAAA,IACA,QAAQ,SAAS,OAAO;AACtB,cAAQ,IAAI,mCAAsB,OAAO;AACzC,UAAI,OAAO;AACT,cAAM,QAAQ;AAAA,MAChB;AAAA,IACF;AAAA,IACA,UAAU,UAAU,OAAO;AACzB,UAAI,aAAa,OAAO;AACtB;AAAA,MACF;AAEA,+BAAyB,MAAM,KAAK,WAAW,uBAAuB;AACtE;AAAA,QACE,MAAM;AAAA,QACN;AAAA,QACA;AAAA,MACF;AAAA,IACF;AAAA,EACF,CAAC;AAED,gBAAc,KAAK,GAAG,YAAY;AAElC,MAAI,OAAO;AACT,UAAM;AAAA,EACR;AAEA,MAAI,UAAU;AACZ,QAAI,CAAC,UAAU,CAAC,YAAY,SAAS,SAAS,UAAU;AACtD,YAAM,IAAI;AAAA,QACR,4BAA4B,UAAU;AAAA,MACxC;AAAA,IACF;AAEA,QACE,SAAS,SAAS,YAClB,CAAC,aACD,CAAC,UAAU,MAAM,sBAAsB,kBACvC,CAAC,UAAU,MAAM,sBAAsB,QACvC;AACA,YAAM,IAAI;AAAA,QACR,yDAAyD,UAAU;AAAA,MACrE;AAAA,IACF;AAAA,EACF;AAEA,QAAM,iBACJ,UAAU,MAAM,sBAAsB;AAAA;AAAA,EAGtC,UAAU,MAAM,sBAAsB,UACtC;AAEF,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,cAAc;AAAA,IACd,uBAAuB,MAAM;AAAA,MAC3B;AAAA,MACA,CAAC,CAAC,KAAK,YAAY,OAAO,EAAE,KAAK,aAAa;AAAA,IAChD;AAAA,IACA,MAAM,MAAM,KAAK,UAAU,EAAE,KAAK,EAAE;AAAA,EACtC;AACF;AAWA,eAAe,cACb,KACA,qBACA,SACA;AACA,QAAM,YAAY,IAAI,IAAI,KAAK,mBAAmB;AAClD,QAAM,OAAO;AAAA,IACX;AAAA;AAAA,IAEA,UAAU,KAAK,MAAM,GAAG,GAAG;AAAA;AAAA;AAAA,KAG1B,OAAO,QAAQ,WAAW,MAAM,IAAI,MAAM,MAAM,IAAI;AAAA,EACvD;AACA,MAAI,QAAQ,MAAM;AAChB,SAAK,KAAK,QAAQ,KAAK,MAAM,IAAI,CAAC;AAAA,EACpC;AAEA,QAAM,YAAY,EAAE,MAAM,EAAE,KAAK,EAAE;AAEnC,QAAM,MAAM,UAAM,wCAAe,WAAW,WAAW;AAAA,IACrD,WAAW,QAAQ;AAAA,IACnB,YAAY,QAAQ;AAAA,EACtB,CAAC;AAED,SAAO;AAAA,IACL;AAAA,IACA;AAAA;AAAA,IAEA,kBAAkB,UAAU,SAAS,IAAI,IAAI,mBAAmB,EAAE;AAAA,EACpE;AACF;AAEA,eAAsB,qBACpB,KACA,UAAmB,CAAC,GACmB;AACvC,MAAI,EAAE,KAAK,kBAAkB,UAAU,IAAI,MAAM;AAAA,IAC/C;AAAA,QACA,iEAA0B;AAAA,IAC1B;AAAA,EACF;AAEA,QAAM,oCACJ,oBAAoB,UAAU,SAAS;AAKzC,MACE,IAAI,WAAW,OACf,qCACA,sDACA;AACA,KAAC,EAAE,KAAK,kBAAkB,UAAU,IAAI,MAAM;AAAA,MAC5C;AAAA,MACA,WAAW;AAAA,MACX;AAAA,IACF;AAAA,EACF;AAGA,MAAI,CAAC,IAAI,MAAM,CAAC,IAAI,MAAM;AACxB,cAAM,gDAAkC,UAAU,MAAM,GAAG;AAAA,EAC7D;AAEA,MAAI,IAAI,WAAW,KAAK;AACtB,cAAM;AAAA,MACJ,UAAU;AAAA,MACV;AAAA,MACA;AAAA,IACF;AAAA,EACF;AAEA,MAAI,IAAI,WAAW,KAAK;AACtB,cAAM;AAAA,MACJ,UAAU;AAAA,MACV;AAAA,MACA,oCACI,0UACA;AAAA,IACN;AAAA,EACF;AAEA,MAAI,CAAC,IAAI,MAAM;AACb,cAAM;AAAA,MACJ,UAAU;AAAA,MACV;AAAA,MACA;AAAA,IACF;AAAA,EACF;AAEA,QAAM,SAAS,qBAAO,kBAAyC;AAC/D,QAAM,UAAU,IAAI,YAAY;AAEhC,mBAAiB,SAAS,IAAI,MAA8C;AAC1E,WAAO,UAAU,MAAM,QAAQ,OAAO,KAAK,GAAG,KAAK;AAAA,EACrD;AACA,QAAM,WAAW,OAAO,YAAY;AAEpC,QAAM,aACJ,QAAQ,SAAS,UAAU,OAAO,UAAU,KAAK,UAAU,CAAC,IAAI;AAElE,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,cAAc,UAAU,WAAW,UAAU;AAEjD,MAAI,CAAC,UAAU;AAMb,UAAM,aAAa,QAAQ,IAAI,eAAe;AAG9C,UAAM,YAAY,QAAQ,IAAI,sBAAsB;AAGpD,QAAI,cAAc,oBAAoB,aAAa,QAAQ,WAAW;AACpE,UAAI;AACJ,UAAI,QAAQ,KAAK;AACf,cAAM,EAAE,cAAc,IAAI,MAAM,OAAO,OAAO;AAC9C,4BAAoB,cAAc,OAAO;AAAA,UACvC,yBAAyB;AAAA,YACvB,YAAQ,iCAAgB,UAAU,IAAI;AAAA,UACxC;AAAA,QACF,CAAC;AAAA,MACH;AAEA,aAAO;AAAA,QACL;AAAA,YACA,+BAAc,CAAC,GAAG,SAAS;AAAA,QAC3B;AAAA,MACF;AAAA,IACF;AAEA,cAAM;AAAA,MACJ,UAAU;AAAA,MACV;AAAA,MACA;AAAA,IACF;AAAA,EACF;AAEA,QAAM,OAAO,cAAc,SAAS;AACpC,QAAM,YAAY,QAAQ,MACtB,MAAM,kBAAkB,KAAK,SAAS,IACtC;AAEJ,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACF;","names":[]}

package/dist/internal/host/server/fetch-remote-component.d.ts

@@ -6,6 +6,7 @@ import '../shared/shared-broker.js';
 import '../../utils/logger.js';
 import '../../runtime/metadata.js';
 import '../shared/asset-descriptors.js';
+import '../shared/next-image-deployment-id.js';
 import '../../runtime/url/resolve-client-url.js';
 
 interface Options {

package/dist/internal/host/server/fetch-remote-component.js

@@ -11,6 +11,10 @@ import {
   getSSRRelativePathBaseUrl,
   PRODUCTION_URL
 } from "#internal/host/server/get-ssr-relative-path-base-url";
+import {
+  extractDeploymentIdFromSrc,
+  isNextDeploymentAssetSrc
+} from "#internal/host/shared/next-image-deployment-id";
 import {
   buildMetadata
 } from "#internal/runtime/metadata";
@@ -20,6 +24,7 @@ import {
   multipleRemoteComponentsError,
   RemoteComponentsError
 } from "#internal/utils/error";
+const NEXT_IMAGE_PATHNAME = "/_next/image";
 async function buildRscComponent(rsc, serverUrl) {
   const componentRSC = `0:${JSON.stringify(rsc)}
 `;
@@ -59,9 +64,44 @@ function buildSkeletonResponse(serverUrl, metadata, skeletonComponent) {
     nextData: void 0,
     component: skeletonComponent,
     html: getSkeletonHtml(serverUrl.href),
-    remoteShared: {}
+    remoteShared: {},
+    ssrImageDeploymentIds: []
   };
 }
+function getNextImageDeploymentId(value, base) {
+  try {
+    const parsed = new URL(value.replace(/&/g, "&"), base);
+    const imageSrc = parsed.searchParams.get("url");
+    if (!parsed.pathname.endsWith(NEXT_IMAGE_PATHNAME) || !isNextDeploymentAssetSrc(imageSrc)) {
+      return void 0;
+    }
+    const extracted = extractDeploymentIdFromSrc(imageSrc);
+    const deploymentId = parsed.searchParams.get("dpl") || extracted.deploymentId;
+    return deploymentId ? { src: extracted.src, deploymentId } : void 0;
+  } catch {
+    return void 0;
+  }
+}
+function addNextImageDeploymentId(value, serverUrl, result) {
+  if (!value) {
+    return;
+  }
+  const image = getNextImageDeploymentId(value, serverUrl);
+  if (image) {
+    result.set(image.src, image.deploymentId);
+  }
+}
+function addNextImageDeploymentIdsFromSrcset(value, serverUrl, result) {
+  if (!value)
+    return;
+  for (const candidate of value.split(",")) {
+    addNextImageDeploymentId(
+      candidate.trim().split(/\s+/)[0],
+      serverUrl,
+      result
+    );
+  }
+}
 function visitFragment(fragment, serverUrl, remoteName) {
   const scriptSrcSet = /* @__PURE__ */ new Set();
   const scriptTextSet = /* @__PURE__ */ new Set();
@@ -70,6 +110,7 @@ function visitFragment(fragment, serverUrl, remoteName) {
   const links = [];
   const hydrationData = [];
   const htmlChunks = /* @__PURE__ */ new Set();
+  const ssrImageDeploymentIdMap = /* @__PURE__ */ new Map();
   let metadata;
   let nextData;
   let remoteShared = {};
@@ -132,6 +173,17 @@ function visitFragment(fragment, serverUrl, remoteName) {
       if (stack) {
         error.stack = stack;
       }
+    },
+    onElement(nodeName, attrs) {
+      if (nodeName !== "img") {
+        return;
+      }
+      addNextImageDeploymentId(attrs.src, serverUrl, ssrImageDeploymentIdMap);
+      addNextImageDeploymentIdsFromSrcset(
+        attrs.srcset,
+        serverUrl,
+        ssrImageDeploymentIdMap
+      );
     }
   });
   hydrationData.push(...rawRscChunks);
@@ -161,6 +213,10 @@ function visitFragment(fragment, serverUrl, remoteName) {
     hydrationData,
     nextData,
     remoteShared: resolvedShared,
+    ssrImageDeploymentIds: Array.from(
+      ssrImageDeploymentIdMap,
+      ([src, deploymentId]) => ({ src, deploymentId })
+    ),
     html: Array.from(htmlChunks).join("")
   };
 }
@@ -242,7 +298,8 @@ async function fetchRemoteComponent(src, options = {}) {
     hydrationData,
     nextData,
     remoteShared,
-    html
+    html,
+    ssrImageDeploymentIds
   } = visitFragment(fragment, serverUrl, remoteName);
   if (!metadata) {
     const isSSGBuild = process.env.NEXT_PHASE === "phase-production-build";
@@ -282,7 +339,8 @@ async function fetchRemoteComponent(src, options = {}) {
     nextData,
     component,
     html,
-    remoteShared
+    remoteShared,
+    ssrImageDeploymentIds
   };
 }
 export {

package/dist/internal/host/server/fetch-remote-component.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/host/server/fetch-remote-component.ts"],"sourcesContent":["import { type DefaultTreeAdapterMap, Parser } from 'parse5';\nimport { type RSC, visit } from '#internal/host/nextjs/dom-flight';\nimport {\n  getSkeletonHtml,\n  getSkeletonMessage,\n} from '#internal/host/nextjs/skeleton';\nimport { fetchWithHooks } from '#internal/host/server/fetch-with-hooks';\nimport { getClientSrc } from '#internal/host/server/get-client-src';\nimport {\n  DEPLOYMENT_URL,\n  getSSRRelativePathBaseUrl,\n  PRODUCTION_URL,\n} from '#internal/host/server/get-ssr-relative-path-base-url';\nimport type {\n  LinkDescriptor,\n  ScriptDescriptor,\n} from '#internal/host/shared/asset-descriptors';\nimport type {\n  OnRequestHook,\n  OnResponseHook,\n} from '#internal/host/shared/fetch-interceptors';\nimport type { RemoteSharedModules } from '#internal/host/shared/shared-broker';\nimport {\n  buildMetadata,\n  type RawMetadataAttrs,\n  type RemoteComponentMetadata,\n} from '#internal/runtime/metadata';\nimport { importRSCClientEdge } from '#internal/runtime/rsc-imports';\nimport {\n  failedToFetchRemoteComponentError,\n  multipleRemoteComponentsError,\n  RemoteComponentsError,\n} from '#internal/utils/error';\nimport type { FetchRemoteComponentResponse, NextData } from './types';\n\n/**\n * Converts RSC flight data into a React element tree using the edge streaming\n * runtime. The manifest tells React how to resolve module references back to\n * the remote origin.\n */\nasync function buildRscComponent(\n  rsc: RSC | RSC[] | string | null,\n  serverUrl: URL,\n): Promise<React.ReactNode> {\n  const componentRSC = `0:${JSON.stringify(rsc)}\\n`;\n  const { createFromReadableStream } = await importRSCClientEdge();\n  return createFromReadableStream(\n    new ReadableStream({\n      type: 'bytes',\n      start(controller) {\n        const encoder = new TextEncoder();\n        controller.enqueue(encoder.encode(componentRSC));\n        controller.close();\n      },\n    }),\n    {\n      serverConsumerManifest: {\n        moduleLoading: {\n          prefix: serverUrl.origin,\n          crossOrigin: true,\n        },\n        moduleMap: {},\n      },\n    },\n  );\n}\n\nfunction buildSkeletonResponse(\n  serverUrl: URL,\n  metadata: RemoteComponentMetadata,\n  skeletonComponent: React.ReactNode | undefined,\n): FetchRemoteComponentResponse {\n  return {\n    name: 'remote-component-skeleton',\n    serverUrl,\n    metadata: {\n      ...metadata,\n      type: 'remote-component',\n    },\n    rsc: getSkeletonMessage(),\n    scripts: [],\n    links: [],\n    hydrationData: [],\n    nextData: undefined,\n    component: skeletonComponent,\n    html: getSkeletonHtml(serverUrl.href),\n    remoteShared: {},\n  };\n}\n\n/**\n * Walks the parsed HTML fragment and extracts all remote component data:\n * metadata, scripts, links, hydration data, Next.js data, shared deps, and HTML.\n */\nfunction visitFragment(\n  fragment: DefaultTreeAdapterMap['documentFragment'],\n  serverUrl: URL,\n  remoteName: string | undefined,\n) {\n  const scriptSrcSet = new Set<string>();\n  const scriptTextSet = new Set<string>();\n  const scripts: ScriptDescriptor[] = [];\n\n  const linkKeySet = new Set<string>();\n  const links: LinkDescriptor[] = [];\n\n  const hydrationData: string[] = [];\n  const htmlChunks = new Set<string>();\n\n  let metadata: RemoteComponentMetadata | undefined;\n  let nextData: NextData | undefined;\n  let remoteShared: RemoteSharedModules = {};\n  let hasRSC = false;\n  let hasShared = false;\n  let error: RemoteComponentsError | undefined;\n\n  const rawRscChunks: string[] = [];\n\n  const rsc = visit(fragment, {\n    url: serverUrl,\n    name: remoteName,\n    onMetadata(attrs: RawMetadataAttrs) {\n      const incoming = buildMetadata(attrs, serverUrl);\n      // Skip multiple component detection for Pages Router (__next) since\n      // it only supports one remote component per page\n      if (\n        !remoteName &&\n        metadata &&\n        metadata.id !== incoming.id &&\n        incoming.id !== '__next' &&\n        metadata.id !== '__next' &&\n        !nextData\n      ) {\n        throw multipleRemoteComponentsError(serverUrl.href);\n      }\n      metadata = incoming;\n    },\n    onScript(attrs) {\n      const clientSrc = getClientSrc(attrs.src, serverUrl.href);\n      const textContent =\n        typeof attrs.textContent === 'string' ? attrs.textContent : undefined;\n\n      if (textContent) {\n        if (!scriptTextSet.has(textContent)) {\n          scriptTextSet.add(textContent);\n          scripts.push({ src: '', textContent });\n        }\n      } else if (!scriptSrcSet.has(clientSrc)) {\n        scriptSrcSet.add(clientSrc);\n        scripts.push({ src: clientSrc });\n      }\n    },\n    onLink(attrs) {\n      const relativeAttrs = {\n        ...attrs,\n        href: getClientSrc(attrs.href, serverUrl.href),\n      };\n      const linkKey = `${relativeAttrs.href}::${attrs.rel}`;\n      if (!linkKeySet.has(linkKey)) {\n        linkKeySet.add(linkKey);\n        links.push(relativeAttrs);\n      }\n    },\n    onRSC(chunk) {\n      rawRscChunks.push(chunk);\n      hasRSC = true;\n    },\n    onNextData(data) {\n      nextData = data;\n    },\n    onHTML(chunk) {\n      if (!htmlChunks.has(chunk)) {\n        htmlChunks.add(chunk);\n      }\n    },\n    onShared(_shared) {\n      remoteShared = _shared;\n      hasShared = true;\n    },\n    onError(message, stack) {\n      error = new RemoteComponentsError(message);\n      if (stack) {\n        error.stack = stack;\n      }\n    },\n  });\n\n  hydrationData.push(...rawRscChunks);\n\n  if (error) {\n    throw error;\n  }\n\n  if (metadata) {\n    if (!hasRSC && !nextData && metadata.type === 'nextjs') {\n      throw new RemoteComponentsError(\n        `The Remote Component at \"${serverUrl.href}\" seems to be a Next.js component but it does not contain any RSC flight data or Next.js props data. Make sure the remote URL is correct and contains a Remote Component.`,\n      );\n    }\n\n    if (\n      metadata.type === 'nextjs' &&\n      !hasShared &&\n      !nextData?.props.__REMOTE_COMPONENT__?.sharedManifest &&\n      !nextData?.props.__REMOTE_COMPONENT__?.shared\n    ) {\n      throw new RemoteComponentsError(\n        `No shared dependencies found for Remote Component at \"${serverUrl.href}\". Make sure the remote URL is correct and contains a Remote Component with shared dependencies.`,\n      );\n    }\n  }\n\n  const resolvedShared =\n    nextData?.props.__REMOTE_COMPONENT__?.sharedManifest ??\n    // @legacy(remote-components<=0.4.x): keep accepting the Pages Router\n    // shared map until remotes on 0.4.x are outside the compatibility window.\n    nextData?.props.__REMOTE_COMPONENT__?.shared ??\n    remoteShared;\n\n  return {\n    rsc,\n    metadata,\n    scripts,\n    links,\n    hydrationData,\n    nextData,\n    remoteShared: resolvedShared,\n    html: Array.from(htmlChunks).join(''),\n  };\n}\n\ninterface Options {\n  name?: string;\n  rsc?: boolean;\n  /** Whether this is being called from Next.js App Router. Used to enable skeleton fallback during SSG builds. */\n  appRouter?: boolean;\n  onRequest?: OnRequestHook;\n  onResponse?: OnResponseHook;\n}\n\nasync function fetchWithTags(\n  src: string | URL,\n  relativePathBaseUrl: string,\n  options: Options,\n) {\n  const serverUrl = new URL(src, relativePathBaseUrl);\n  const tags = [\n    '_vc_rc:fetch-remote-component',\n    // the max size of a next cache tag is 256 characters\n    serverUrl.host.slice(0, 256),\n    // use the suffix so this tag is unique if multiple remote\n    // components have the same host, but unique pathnames / query params\n    (typeof src === 'string' ? src : src.href).slice(-256),\n  ];\n  if (options.name) {\n    tags.push(options.name.slice(-256));\n  }\n\n  const fetchInit = { next: { tags } };\n\n  const res = await fetchWithHooks(serverUrl, fetchInit, {\n    onRequest: options.onRequest,\n    onResponse: options.onResponse,\n  });\n\n  return {\n    res,\n    serverUrl,\n    // If the remote component is part of a microfrontend, the src provided will be relative.\n    isMfeRelativeSrc: serverUrl.host === new URL(relativePathBaseUrl).host,\n  };\n}\n\nexport async function fetchRemoteComponent(\n  src: string | URL,\n  options: Options = {},\n): Promise<FetchRemoteComponentResponse> {\n  let { res, isMfeRelativeSrc, serverUrl } = await fetchWithTags(\n    src,\n    getSSRRelativePathBaseUrl(),\n    options,\n  );\n\n  const maybeFirstMfeProductionDeployment =\n    isMfeRelativeSrc && serverUrl.host === PRODUCTION_URL;\n\n  // When deploying a microfrontend with remote components to production for the first time, the fetch with the\n  // production URL will fail if the production URL is not already an MFE alias. The URL becomes an MFE alias\n  // on the first MFE deployment. For this fetch, use the deployment URL which is an MFE alias.\n  if (\n    res.status === 404 &&\n    maybeFirstMfeProductionDeployment &&\n    DEPLOYMENT_URL\n  ) {\n    ({ res, isMfeRelativeSrc, serverUrl } = await fetchWithTags(\n      src,\n      `https://${DEPLOYMENT_URL}`,\n      options,\n    ));\n  }\n\n  // If there is an error in the remote, parse and extract the remote error (except 404 and 401).\n  if (!res.ok && !res.body) {\n    throw failedToFetchRemoteComponentError(serverUrl.href, res);\n  }\n\n  if (res.status === 401) {\n    throw failedToFetchRemoteComponentError(\n      serverUrl.href,\n      res,\n      'If you are using Deployment Protection, ensure the automation bypass environment variable secret in the host matches an automation bypass value in the remote. See https://remote-components-docs.vercel.sh/docs/concepts/cors-external-urls#deployment-protection for details.',\n    );\n  }\n\n  if (res.status === 404) {\n    throw failedToFetchRemoteComponentError(\n      serverUrl.href,\n      res,\n      maybeFirstMfeProductionDeployment\n        ? `If this is the first production build of a microfrontends setup, try redeploying once the remote is deployed to production. Once deployed, this error will not re-occur, and ISR revalidation will happen automatically for remote components once they deploy. https://remote-components-docs.vercel.sh/docs/concepts/isr-deployment`\n        : `Check if you can open it in the browser.`,\n    );\n  }\n\n  if (!res.body) {\n    throw failedToFetchRemoteComponentError(\n      serverUrl.href,\n      res,\n      `Response body is empty. Check if you can open it in the browser and you see the Remote Component content.`,\n    );\n  }\n\n  const parser = Parser.getFragmentParser<DefaultTreeAdapterMap>();\n  const decoder = new TextDecoder();\n  // read the response body as a stream and parse it using the parse5 fragment parser\n  for await (const chunk of res.body as unknown as AsyncIterable<Uint8Array>) {\n    parser.tokenizer.write(decoder.decode(chunk), false);\n  }\n  const fragment = parser.getFragment();\n\n  const remoteName =\n    options.name || (serverUrl.hash ? serverUrl.hash.substring(1) : undefined);\n\n  const {\n    rsc,\n    metadata,\n    scripts,\n    links,\n    hydrationData,\n    nextData,\n    remoteShared,\n    html,\n  } = visitFragment(fragment, serverUrl, remoteName);\n\n  if (!metadata) {\n    // For microfrontend builds during run time, the host and remote build\n    // may be happening concurrently. In this case, the request will 404.\n    // We want to allow the build to continue with a placeholder remote\n    // component. Once the build completes, vercel will automatically revalidate\n    // ISR and fetch the built remote component.\n    const isSSGBuild = process.env.NEXT_PHASE === 'phase-production-build';\n    // Only want this skeleton behaviour in previews to unblock development.\n    // For production, the remote component should already be built.\n    const isPreview = process.env.VERCEL_TARGET_ENV === 'preview';\n    // For app router previews, the host and remote build at the same time, to allow this, render a skeleton\n    // in the host if the remote is not found, which will revalidate when the remote deploys, or give a helpful error in the UI\n    if (isSSGBuild && isMfeRelativeSrc && isPreview && options.appRouter) {\n      let skeletonComponent: React.ReactNode | undefined;\n      if (options.rsc) {\n        const { createElement } = await import('react');\n        skeletonComponent = createElement('div', {\n          dangerouslySetInnerHTML: {\n            __html: getSkeletonHtml(serverUrl.href),\n          },\n        });\n      }\n\n      return buildSkeletonResponse(\n        serverUrl,\n        buildMetadata({}, serverUrl),\n        skeletonComponent,\n      );\n    }\n\n    throw failedToFetchRemoteComponentError(\n      serverUrl.href,\n      res,\n      `No Remote Component found. Make sure the remote URL is correct and contains a Remote Component.`,\n    );\n  }\n\n  const name = remoteName || metadata.name;\n  const component = options.rsc\n    ? await buildRscComponent(rsc, serverUrl)\n    : undefined;\n\n  return {\n    name,\n    serverUrl,\n    metadata,\n    rsc,\n    scripts,\n    links,\n    hydrationData,\n    nextData,\n    component,\n    html,\n    remoteShared,\n  };\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../../../src/host/server/fetch-remote-component.ts"],"sourcesContent":["import { type DefaultTreeAdapterMap, Parser } from 'parse5';\nimport { type RSC, visit } from '#internal/host/nextjs/dom-flight';\nimport {\n  getSkeletonHtml,\n  getSkeletonMessage,\n} from '#internal/host/nextjs/skeleton';\nimport { fetchWithHooks } from '#internal/host/server/fetch-with-hooks';\nimport { getClientSrc } from '#internal/host/server/get-client-src';\nimport {\n  DEPLOYMENT_URL,\n  getSSRRelativePathBaseUrl,\n  PRODUCTION_URL,\n} from '#internal/host/server/get-ssr-relative-path-base-url';\nimport type {\n  LinkDescriptor,\n  ScriptDescriptor,\n} from '#internal/host/shared/asset-descriptors';\nimport type {\n  OnRequestHook,\n  OnResponseHook,\n} from '#internal/host/shared/fetch-interceptors';\nimport {\n  extractDeploymentIdFromSrc,\n  isNextDeploymentAssetSrc,\n  type NextImageDeploymentId,\n} from '#internal/host/shared/next-image-deployment-id';\nimport type { RemoteSharedModules } from '#internal/host/shared/shared-broker';\nimport {\n  buildMetadata,\n  type RawMetadataAttrs,\n  type RemoteComponentMetadata,\n} from '#internal/runtime/metadata';\nimport { importRSCClientEdge } from '#internal/runtime/rsc-imports';\nimport {\n  failedToFetchRemoteComponentError,\n  multipleRemoteComponentsError,\n  RemoteComponentsError,\n} from '#internal/utils/error';\nimport type { FetchRemoteComponentResponse, NextData } from './types';\n\nconst NEXT_IMAGE_PATHNAME = '/_next/image';\n/**\n * Converts RSC flight data into a React element tree using the edge streaming\n * runtime. The manifest tells React how to resolve module references back to\n * the remote origin.\n */\nasync function buildRscComponent(\n  rsc: RSC | RSC[] | string | null,\n  serverUrl: URL,\n): Promise<React.ReactNode> {\n  const componentRSC = `0:${JSON.stringify(rsc)}\\n`;\n  const { createFromReadableStream } = await importRSCClientEdge();\n  return createFromReadableStream(\n    new ReadableStream({\n      type: 'bytes',\n      start(controller) {\n        const encoder = new TextEncoder();\n        controller.enqueue(encoder.encode(componentRSC));\n        controller.close();\n      },\n    }),\n    {\n      serverConsumerManifest: {\n        moduleLoading: {\n          prefix: serverUrl.origin,\n          crossOrigin: true,\n        },\n        moduleMap: {},\n      },\n    },\n  );\n}\n\nfunction buildSkeletonResponse(\n  serverUrl: URL,\n  metadata: RemoteComponentMetadata,\n  skeletonComponent: React.ReactNode | undefined,\n): FetchRemoteComponentResponse {\n  return {\n    name: 'remote-component-skeleton',\n    serverUrl,\n    metadata: {\n      ...metadata,\n      type: 'remote-component',\n    },\n    rsc: getSkeletonMessage(),\n    scripts: [],\n    links: [],\n    hydrationData: [],\n    nextData: undefined,\n    component: skeletonComponent,\n    html: getSkeletonHtml(serverUrl.href),\n    remoteShared: {},\n    ssrImageDeploymentIds: [],\n  };\n}\n\nfunction getNextImageDeploymentId(\n  value: string,\n  base: URL,\n): NextImageDeploymentId | undefined {\n  try {\n    const parsed = new URL(value.replace(/&amp;/g, '&'), base);\n    const imageSrc = parsed.searchParams.get('url');\n    if (\n      !parsed.pathname.endsWith(NEXT_IMAGE_PATHNAME) ||\n      !isNextDeploymentAssetSrc(imageSrc)\n    ) {\n      return undefined;\n    }\n\n    const extracted = extractDeploymentIdFromSrc(imageSrc);\n    const deploymentId =\n      parsed.searchParams.get('dpl') || extracted.deploymentId;\n\n    return deploymentId ? { src: extracted.src, deploymentId } : undefined;\n  } catch {\n    return undefined;\n  }\n}\n\nfunction addNextImageDeploymentId(\n  value: string | undefined,\n  serverUrl: URL,\n  result: Map<string, string>,\n) {\n  if (!value) {\n    return;\n  }\n\n  const image = getNextImageDeploymentId(value, serverUrl);\n  if (image) {\n    result.set(image.src, image.deploymentId);\n  }\n}\n\nfunction addNextImageDeploymentIdsFromSrcset(\n  value: string | undefined,\n  serverUrl: URL,\n  result: Map<string, string>,\n) {\n  if (!value) return;\n  for (const candidate of value.split(',')) {\n    addNextImageDeploymentId(\n      candidate.trim().split(/\\s+/)[0],\n      serverUrl,\n      result,\n    );\n  }\n}\n\n/**\n * Walks the parsed HTML fragment and extracts all remote component data:\n * metadata, scripts, links, hydration data, Next.js data, shared deps, and HTML.\n */\nfunction visitFragment(\n  fragment: DefaultTreeAdapterMap['documentFragment'],\n  serverUrl: URL,\n  remoteName: string | undefined,\n) {\n  const scriptSrcSet = new Set<string>();\n  const scriptTextSet = new Set<string>();\n  const scripts: ScriptDescriptor[] = [];\n\n  const linkKeySet = new Set<string>();\n  const links: LinkDescriptor[] = [];\n\n  const hydrationData: string[] = [];\n  const htmlChunks = new Set<string>();\n  const ssrImageDeploymentIdMap = new Map<string, string>();\n\n  let metadata: RemoteComponentMetadata | undefined;\n  let nextData: NextData | undefined;\n  let remoteShared: RemoteSharedModules = {};\n  let hasRSC = false;\n  let hasShared = false;\n  let error: RemoteComponentsError | undefined;\n\n  const rawRscChunks: string[] = [];\n\n  const rsc = visit(fragment, {\n    url: serverUrl,\n    name: remoteName,\n    onMetadata(attrs: RawMetadataAttrs) {\n      const incoming = buildMetadata(attrs, serverUrl);\n      // Skip multiple component detection for Pages Router (__next) since\n      // it only supports one remote component per page\n      if (\n        !remoteName &&\n        metadata &&\n        metadata.id !== incoming.id &&\n        incoming.id !== '__next' &&\n        metadata.id !== '__next' &&\n        !nextData\n      ) {\n        throw multipleRemoteComponentsError(serverUrl.href);\n      }\n      metadata = incoming;\n    },\n    onScript(attrs) {\n      const clientSrc = getClientSrc(attrs.src, serverUrl.href);\n      const textContent =\n        typeof attrs.textContent === 'string' ? attrs.textContent : undefined;\n\n      if (textContent) {\n        if (!scriptTextSet.has(textContent)) {\n          scriptTextSet.add(textContent);\n          scripts.push({ src: '', textContent });\n        }\n      } else if (!scriptSrcSet.has(clientSrc)) {\n        scriptSrcSet.add(clientSrc);\n        scripts.push({ src: clientSrc });\n      }\n    },\n    onLink(attrs) {\n      const relativeAttrs = {\n        ...attrs,\n        href: getClientSrc(attrs.href, serverUrl.href),\n      };\n      const linkKey = `${relativeAttrs.href}::${attrs.rel}`;\n      if (!linkKeySet.has(linkKey)) {\n        linkKeySet.add(linkKey);\n        links.push(relativeAttrs);\n      }\n    },\n    onRSC(chunk) {\n      rawRscChunks.push(chunk);\n      hasRSC = true;\n    },\n    onNextData(data) {\n      nextData = data;\n    },\n    onHTML(chunk) {\n      if (!htmlChunks.has(chunk)) {\n        htmlChunks.add(chunk);\n      }\n    },\n    onShared(_shared) {\n      remoteShared = _shared;\n      hasShared = true;\n    },\n    onError(message, stack) {\n      error = new RemoteComponentsError(message);\n      if (stack) {\n        error.stack = stack;\n      }\n    },\n    onElement(nodeName, attrs) {\n      if (nodeName !== 'img') {\n        return;\n      }\n\n      addNextImageDeploymentId(attrs.src, serverUrl, ssrImageDeploymentIdMap);\n      addNextImageDeploymentIdsFromSrcset(\n        attrs.srcset,\n        serverUrl,\n        ssrImageDeploymentIdMap,\n      );\n    },\n  });\n\n  hydrationData.push(...rawRscChunks);\n\n  if (error) {\n    throw error;\n  }\n\n  if (metadata) {\n    if (!hasRSC && !nextData && metadata.type === 'nextjs') {\n      throw new RemoteComponentsError(\n        `The Remote Component at \"${serverUrl.href}\" seems to be a Next.js component but it does not contain any RSC flight data or Next.js props data. Make sure the remote URL is correct and contains a Remote Component.`,\n      );\n    }\n\n    if (\n      metadata.type === 'nextjs' &&\n      !hasShared &&\n      !nextData?.props.__REMOTE_COMPONENT__?.sharedManifest &&\n      !nextData?.props.__REMOTE_COMPONENT__?.shared\n    ) {\n      throw new RemoteComponentsError(\n        `No shared dependencies found for Remote Component at \"${serverUrl.href}\". Make sure the remote URL is correct and contains a Remote Component with shared dependencies.`,\n      );\n    }\n  }\n\n  const resolvedShared =\n    nextData?.props.__REMOTE_COMPONENT__?.sharedManifest ??\n    // @legacy(remote-components<=0.4.x): keep accepting the Pages Router\n    // shared map until remotes on 0.4.x are outside the compatibility window.\n    nextData?.props.__REMOTE_COMPONENT__?.shared ??\n    remoteShared;\n\n  return {\n    rsc,\n    metadata,\n    scripts,\n    links,\n    hydrationData,\n    nextData,\n    remoteShared: resolvedShared,\n    ssrImageDeploymentIds: Array.from(\n      ssrImageDeploymentIdMap,\n      ([src, deploymentId]) => ({ src, deploymentId }),\n    ),\n    html: Array.from(htmlChunks).join(''),\n  };\n}\n\ninterface Options {\n  name?: string;\n  rsc?: boolean;\n  /** Whether this is being called from Next.js App Router. Used to enable skeleton fallback during SSG builds. */\n  appRouter?: boolean;\n  onRequest?: OnRequestHook;\n  onResponse?: OnResponseHook;\n}\n\nasync function fetchWithTags(\n  src: string | URL,\n  relativePathBaseUrl: string,\n  options: Options,\n) {\n  const serverUrl = new URL(src, relativePathBaseUrl);\n  const tags = [\n    '_vc_rc:fetch-remote-component',\n    // the max size of a next cache tag is 256 characters\n    serverUrl.host.slice(0, 256),\n    // use the suffix so this tag is unique if multiple remote\n    // components have the same host, but unique pathnames / query params\n    (typeof src === 'string' ? src : src.href).slice(-256),\n  ];\n  if (options.name) {\n    tags.push(options.name.slice(-256));\n  }\n\n  const fetchInit = { next: { tags } };\n\n  const res = await fetchWithHooks(serverUrl, fetchInit, {\n    onRequest: options.onRequest,\n    onResponse: options.onResponse,\n  });\n\n  return {\n    res,\n    serverUrl,\n    // If the remote component is part of a microfrontend, the src provided will be relative.\n    isMfeRelativeSrc: serverUrl.host === new URL(relativePathBaseUrl).host,\n  };\n}\n\nexport async function fetchRemoteComponent(\n  src: string | URL,\n  options: Options = {},\n): Promise<FetchRemoteComponentResponse> {\n  let { res, isMfeRelativeSrc, serverUrl } = await fetchWithTags(\n    src,\n    getSSRRelativePathBaseUrl(),\n    options,\n  );\n\n  const maybeFirstMfeProductionDeployment =\n    isMfeRelativeSrc && serverUrl.host === PRODUCTION_URL;\n\n  // When deploying a microfrontend with remote components to production for the first time, the fetch with the\n  // production URL will fail if the production URL is not already an MFE alias. The URL becomes an MFE alias\n  // on the first MFE deployment. For this fetch, use the deployment URL which is an MFE alias.\n  if (\n    res.status === 404 &&\n    maybeFirstMfeProductionDeployment &&\n    DEPLOYMENT_URL\n  ) {\n    ({ res, isMfeRelativeSrc, serverUrl } = await fetchWithTags(\n      src,\n      `https://${DEPLOYMENT_URL}`,\n      options,\n    ));\n  }\n\n  // If there is an error in the remote, parse and extract the remote error (except 404 and 401).\n  if (!res.ok && !res.body) {\n    throw failedToFetchRemoteComponentError(serverUrl.href, res);\n  }\n\n  if (res.status === 401) {\n    throw failedToFetchRemoteComponentError(\n      serverUrl.href,\n      res,\n      'If you are using Deployment Protection, ensure the automation bypass environment variable secret in the host matches an automation bypass value in the remote. See https://remote-components-docs.vercel.sh/docs/concepts/cors-external-urls#deployment-protection for details.',\n    );\n  }\n\n  if (res.status === 404) {\n    throw failedToFetchRemoteComponentError(\n      serverUrl.href,\n      res,\n      maybeFirstMfeProductionDeployment\n        ? `If this is the first production build of a microfrontends setup, try redeploying once the remote is deployed to production. Once deployed, this error will not re-occur, and ISR revalidation will happen automatically for remote components once they deploy. https://remote-components-docs.vercel.sh/docs/concepts/isr-deployment`\n        : `Check if you can open it in the browser.`,\n    );\n  }\n\n  if (!res.body) {\n    throw failedToFetchRemoteComponentError(\n      serverUrl.href,\n      res,\n      `Response body is empty. Check if you can open it in the browser and you see the Remote Component content.`,\n    );\n  }\n\n  const parser = Parser.getFragmentParser<DefaultTreeAdapterMap>();\n  const decoder = new TextDecoder();\n  // read the response body as a stream and parse it using the parse5 fragment parser\n  for await (const chunk of res.body as unknown as AsyncIterable<Uint8Array>) {\n    parser.tokenizer.write(decoder.decode(chunk), false);\n  }\n  const fragment = parser.getFragment();\n\n  const remoteName =\n    options.name || (serverUrl.hash ? serverUrl.hash.substring(1) : undefined);\n\n  const {\n    rsc,\n    metadata,\n    scripts,\n    links,\n    hydrationData,\n    nextData,\n    remoteShared,\n    html,\n    ssrImageDeploymentIds,\n  } = visitFragment(fragment, serverUrl, remoteName);\n\n  if (!metadata) {\n    // For microfrontend builds during run time, the host and remote build\n    // may be happening concurrently. In this case, the request will 404.\n    // We want to allow the build to continue with a placeholder remote\n    // component. Once the build completes, vercel will automatically revalidate\n    // ISR and fetch the built remote component.\n    const isSSGBuild = process.env.NEXT_PHASE === 'phase-production-build';\n    // Only want this skeleton behaviour in previews to unblock development.\n    // For production, the remote component should already be built.\n    const isPreview = process.env.VERCEL_TARGET_ENV === 'preview';\n    // For app router previews, the host and remote build at the same time, to allow this, render a skeleton\n    // in the host if the remote is not found, which will revalidate when the remote deploys, or give a helpful error in the UI\n    if (isSSGBuild && isMfeRelativeSrc && isPreview && options.appRouter) {\n      let skeletonComponent: React.ReactNode | undefined;\n      if (options.rsc) {\n        const { createElement } = await import('react');\n        skeletonComponent = createElement('div', {\n          dangerouslySetInnerHTML: {\n            __html: getSkeletonHtml(serverUrl.href),\n          },\n        });\n      }\n\n      return buildSkeletonResponse(\n        serverUrl,\n        buildMetadata({}, serverUrl),\n        skeletonComponent,\n      );\n    }\n\n    throw failedToFetchRemoteComponentError(\n      serverUrl.href,\n      res,\n      `No Remote Component found. Make sure the remote URL is correct and contains a Remote Component.`,\n    );\n  }\n\n  const name = remoteName || metadata.name;\n  const component = options.rsc\n    ? await buildRscComponent(rsc, serverUrl)\n    : undefined;\n\n  return {\n    name,\n    serverUrl,\n    metadata,\n    rsc,\n    scripts,\n    links,\n    hydrationData,\n    nextData,\n    component,\n    html,\n    remoteShared,\n    ssrImageDeploymentIds,\n  };\n}\n"],"mappings":"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","names":[]}

package/dist/internal/host/server/types.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/host/server/types.ts"],"sourcesContent":["import type {\n  LinkDescriptor,\n  ScriptDescriptor,\n} from '#internal/host/shared/asset-descriptors';\nimport type {\n  RemoteSharedModules,\n  SharedModuleManifest,\n} from '#internal/host/shared/shared-broker';\nimport type { RemoteComponentMetadata } from '#internal/runtime/metadata';\n\nexport type {\n  InternalResolveClientUrl,\n  ResolveClientUrl,\n} from '#internal/runtime/url/resolve-client-url';\n\nexport interface NextData {\n  props: {\n    pageProps: Record<string, unknown>;\n    __REMOTE_COMPONENT__?: {\n      bundle: string;\n      runtime: string;\n      shared?: Record<string, string>;\n      sharedManifest?: SharedModuleManifest;\n    };\n  };\n  page?: string;\n  buildId?: string;\n}\n\nexport interface FetchRemoteComponentResponse {\n  name: string;\n  serverUrl: URL;\n  metadata: RemoteComponentMetadata;\n  rsc:\n    | import('#internal/host/nextjs/dom-flight').RSC\n    | import('#internal/host/nextjs/dom-flight').RSC[]\n    | string\n    | null;\n  scripts: ScriptDescriptor[];\n  links: LinkDescriptor[];\n  hydrationData: string[];\n  nextData: NextData | undefined;\n  component: React.ReactNode | undefined;\n  html: string;\n  remoteShared: RemoteSharedModules;\n}\n"],"mappings":";;;;;;;;;;;;;;AAAA;AAAA;","names":[]}
+{"version":3,"sources":["../../../../src/host/server/types.ts"],"sourcesContent":["import type {\n  LinkDescriptor,\n  ScriptDescriptor,\n} from '#internal/host/shared/asset-descriptors';\nimport type { NextImageDeploymentId } from '#internal/host/shared/next-image-deployment-id';\nimport type {\n  RemoteSharedModules,\n  SharedModuleManifest,\n} from '#internal/host/shared/shared-broker';\nimport type { RemoteComponentMetadata } from '#internal/runtime/metadata';\n\nexport type {\n  InternalResolveClientUrl,\n  ResolveClientUrl,\n} from '#internal/runtime/url/resolve-client-url';\n\nexport interface NextData {\n  props: {\n    pageProps: Record<string, unknown>;\n    __REMOTE_COMPONENT__?: {\n      bundle: string;\n      runtime: string;\n      shared?: Record<string, string>;\n      sharedManifest?: SharedModuleManifest;\n    };\n  };\n  page?: string;\n  buildId?: string;\n}\n\nexport interface FetchRemoteComponentResponse {\n  name: string;\n  serverUrl: URL;\n  metadata: RemoteComponentMetadata;\n  rsc:\n    | import('#internal/host/nextjs/dom-flight').RSC\n    | import('#internal/host/nextjs/dom-flight').RSC[]\n    | string\n    | null;\n  scripts: ScriptDescriptor[];\n  links: LinkDescriptor[];\n  hydrationData: string[];\n  nextData: NextData | undefined;\n  component: React.ReactNode | undefined;\n  html: string;\n  remoteShared: RemoteSharedModules;\n  ssrImageDeploymentIds: NextImageDeploymentId[];\n}\n"],"mappings":";;;;;;;;;;;;;;AAAA;AAAA;","names":[]}

package/dist/internal/host/server/types.d.ts

@@ -1,5 +1,6 @@
 import { RSC } from '../nextjs/dom-flight.js';
 import { ScriptDescriptor, LinkDescriptor } from '../shared/asset-descriptors.js';
+import { NextImageDeploymentId } from '../shared/next-image-deployment-id.js';
 import { SharedModuleManifest, RemoteSharedModules } from '../shared/shared-broker.js';
 import { RemoteComponentMetadata } from '../../runtime/metadata.js';
 export { InternalResolveClientUrl, ResolveClientUrl } from '../../runtime/url/resolve-client-url.js';
@@ -31,6 +32,7 @@ interface FetchRemoteComponentResponse {
     component: React.ReactNode | undefined;
     html: string;
     remoteShared: RemoteSharedModules;
+    ssrImageDeploymentIds: NextImageDeploymentId[];
 }
 
 export { FetchRemoteComponentResponse, NextData };

package/dist/internal/host/shared/next-image-deployment-id.cjs

@@ -0,0 +1,50 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var next_image_deployment_id_exports = {};
+__export(next_image_deployment_id_exports, {
+  extractDeploymentIdFromSrc: () => extractDeploymentIdFromSrc,
+  isNextDeploymentAssetSrc: () => isNextDeploymentAssetSrc
+});
+module.exports = __toCommonJS(next_image_deployment_id_exports);
+function isNextDeploymentAssetSrc(src) {
+  return typeof src === "string" && src.startsWith("/") && !src.startsWith("//");
+}
+function extractDeploymentIdFromSrc(src) {
+  const queryIndex = src.indexOf("?");
+  if (queryIndex === -1) {
+    return { deploymentId: void 0, src };
+  }
+  const params = new URLSearchParams(src.slice(queryIndex + 1));
+  const deploymentId = params.get("dpl") || void 0;
+  if (!deploymentId) {
+    return { deploymentId: void 0, src };
+  }
+  params.delete("dpl");
+  const remaining = params.toString();
+  return {
+    deploymentId,
+    src: `${src.slice(0, queryIndex)}${remaining ? `?${remaining}` : ""}`
+  };
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  extractDeploymentIdFromSrc,
+  isNextDeploymentAssetSrc
+});
+//# sourceMappingURL=next-image-deployment-id.cjs.map

package/dist/internal/host/shared/next-image-deployment-id.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/host/shared/next-image-deployment-id.ts"],"sourcesContent":["export interface NextImageDeploymentId {\n  src: string;\n  deploymentId: string;\n}\n\nexport function isNextDeploymentAssetSrc(src: string | null): src is string {\n  return (\n    typeof src === 'string' && src.startsWith('/') && !src.startsWith('//')\n  );\n}\n\nexport function extractDeploymentIdFromSrc(src: string) {\n  const queryIndex = src.indexOf('?');\n  if (queryIndex === -1) {\n    return { deploymentId: undefined, src };\n  }\n\n  const params = new URLSearchParams(src.slice(queryIndex + 1));\n  const deploymentId = params.get('dpl') || undefined;\n  if (!deploymentId) {\n    return { deploymentId: undefined, src };\n  }\n\n  params.delete('dpl');\n  const remaining = params.toString();\n  return {\n    deploymentId,\n    src: `${src.slice(0, queryIndex)}${remaining ? `?${remaining}` : ''}`,\n  };\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAKO,SAAS,yBAAyB,KAAmC;AAC1E,SACE,OAAO,QAAQ,YAAY,IAAI,WAAW,GAAG,KAAK,CAAC,IAAI,WAAW,IAAI;AAE1E;AAEO,SAAS,2BAA2B,KAAa;AACtD,QAAM,aAAa,IAAI,QAAQ,GAAG;AAClC,MAAI,eAAe,IAAI;AACrB,WAAO,EAAE,cAAc,QAAW,IAAI;AAAA,EACxC;AAEA,QAAM,SAAS,IAAI,gBAAgB,IAAI,MAAM,aAAa,CAAC,CAAC;AAC5D,QAAM,eAAe,OAAO,IAAI,KAAK,KAAK;AAC1C,MAAI,CAAC,cAAc;AACjB,WAAO,EAAE,cAAc,QAAW,IAAI;AAAA,EACxC;AAEA,SAAO,OAAO,KAAK;AACnB,QAAM,YAAY,OAAO,SAAS;AAClC,SAAO;AAAA,IACL;AAAA,IACA,KAAK,GAAG,IAAI,MAAM,GAAG,UAAU,IAAI,YAAY,IAAI,cAAc;AAAA,EACnE;AACF;","names":[]}

package/dist/internal/host/shared/next-image-deployment-id.d.ts

@@ -0,0 +1,14 @@
+interface NextImageDeploymentId {
+    src: string;
+    deploymentId: string;
+}
+declare function isNextDeploymentAssetSrc(src: string | null): src is string;
+declare function extractDeploymentIdFromSrc(src: string): {
+    deploymentId: undefined;
+    src: string;
+} | {
+    deploymentId: string;
+    src: string;
+};
+
+export { NextImageDeploymentId, extractDeploymentIdFromSrc, isNextDeploymentAssetSrc };

package/dist/internal/host/shared/next-image-deployment-id.js

@@ -0,0 +1,25 @@
+function isNextDeploymentAssetSrc(src) {
+  return typeof src === "string" && src.startsWith("/") && !src.startsWith("//");
+}
+function extractDeploymentIdFromSrc(src) {
+  const queryIndex = src.indexOf("?");
+  if (queryIndex === -1) {
+    return { deploymentId: void 0, src };
+  }
+  const params = new URLSearchParams(src.slice(queryIndex + 1));
+  const deploymentId = params.get("dpl") || void 0;
+  if (!deploymentId) {
+    return { deploymentId: void 0, src };
+  }
+  params.delete("dpl");
+  const remaining = params.toString();
+  return {
+    deploymentId,
+    src: `${src.slice(0, queryIndex)}${remaining ? `?${remaining}` : ""}`
+  };
+}
+export {
+  extractDeploymentIdFromSrc,
+  isNextDeploymentAssetSrc
+};
+//# sourceMappingURL=next-image-deployment-id.js.map

package/dist/internal/host/shared/next-image-deployment-id.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/host/shared/next-image-deployment-id.ts"],"sourcesContent":["export interface NextImageDeploymentId {\n  src: string;\n  deploymentId: string;\n}\n\nexport function isNextDeploymentAssetSrc(src: string | null): src is string {\n  return (\n    typeof src === 'string' && src.startsWith('/') && !src.startsWith('//')\n  );\n}\n\nexport function extractDeploymentIdFromSrc(src: string) {\n  const queryIndex = src.indexOf('?');\n  if (queryIndex === -1) {\n    return { deploymentId: undefined, src };\n  }\n\n  const params = new URLSearchParams(src.slice(queryIndex + 1));\n  const deploymentId = params.get('dpl') || undefined;\n  if (!deploymentId) {\n    return { deploymentId: undefined, src };\n  }\n\n  params.delete('dpl');\n  const remaining = params.toString();\n  return {\n    deploymentId,\n    src: `${src.slice(0, queryIndex)}${remaining ? `?${remaining}` : ''}`,\n  };\n}\n"],"mappings":"AAKO,SAAS,yBAAyB,KAAmC;AAC1E,SACE,OAAO,QAAQ,YAAY,IAAI,WAAW,GAAG,KAAK,CAAC,IAAI,WAAW,IAAI;AAE1E;AAEO,SAAS,2BAA2B,KAAa;AACtD,QAAM,aAAa,IAAI,QAAQ,GAAG;AAClC,MAAI,eAAe,IAAI;AACrB,WAAO,EAAE,cAAc,QAAW,IAAI;AAAA,EACxC;AAEA,QAAM,SAAS,IAAI,gBAAgB,IAAI,MAAM,aAAa,CAAC,CAAC;AAC5D,QAAM,eAAe,OAAO,IAAI,KAAK,KAAK;AAC1C,MAAI,CAAC,cAAc;AACjB,WAAO,EAAE,cAAc,QAAW,IAAI;AAAA,EACxC;AAEA,SAAO,OAAO,KAAK;AACnB,QAAM,YAAY,OAAO,SAAS;AAClC,SAAO;AAAA,IACL;AAAA,IACA,KAAK,GAAG,IAAI,MAAM,GAAG,UAAU,IAAI,YAAY,IAAI,cAAc;AAAA,EACnE;AACF;","names":[]}

package/dist/internal/host/shared/pipeline.d.ts

@@ -2,13 +2,14 @@ import { RemoteSharedModules } from './shared-broker.js';
 import { RemoteComponentMetadata } from '../../runtime/metadata.js';
 import { ScriptDescriptor } from './asset-descriptors.js';
 import { InternalResolveClientUrl } from '../../runtime/url/resolve-client-url.js';
-import { a as ConsumeLoaderPayload } from '../../../server-handoff-9e905049.js';
+import { a as ConsumeLoaderPayload } from '../../../server-handoff-006f9cb5.js';
 import { ParsedRemoteComponent } from '../../runtime/html/parse-remote-html.js';
 import { M as MountOrUnmountFunction } from '../../../types-bd7be268.js';
 import '../../utils/logger.js';
 import 'react';
 import './config.js';
 import './fetch-interceptors.js';
+import './next-image-deployment-id.js';
 import '../server/types.js';
 import '../nextjs/dom-flight.js';
 import 'parse5/dist/tree-adapters/default';

package/dist/internal/host/shared/remote-image-loader.cjs

@@ -21,28 +21,15 @@ __export(remote_image_loader_exports, {
   createRemoteImageLoader: () => createRemoteImageLoader
 });
 module.exports = __toCommonJS(remote_image_loader_exports);
+var import_next_image_deployment_id = require("#internal/host/shared/next-image-deployment-id");
 var import_remote_scope = require("#internal/runtime/turbopack/remote-scope");
-function extractDeploymentIdFromSrc(src) {
-  if (!src.startsWith("/") || src.startsWith("//")) {
-    return { deploymentId: void 0, src };
-  }
-  const queryIndex = src.indexOf("?");
-  if (queryIndex === -1) {
-    return { deploymentId: void 0, src };
-  }
-  const params = new URLSearchParams(src.slice(queryIndex + 1));
-  const deploymentId = params.get("dpl") || void 0;
-  if (!deploymentId) {
-    return { deploymentId: void 0, src };
-  }
-  params.delete("dpl");
-  const remaining = params.toString();
-  return {
-    deploymentId,
-    src: `${src.slice(0, queryIndex)}${remaining ? `?${remaining}` : ""}`
-  };
-}
-function createRemoteImageLoader(bundle, resolveClientUrl) {
+function createRemoteImageLoader(bundle, resolveClientUrl, ssrImageDeploymentIds) {
+  const ssrImageDeploymentIdMap = ssrImageDeploymentIds ? new Map(
+    ssrImageDeploymentIds.map(({ src, deploymentId }) => [
+      src,
+      deploymentId
+    ])
+  ) : void 0;
   const loader = Object.assign(
     ({
       config,
@@ -54,8 +41,13 @@ function createRemoteImageLoader(bundle, resolveClientUrl) {
       const remoteOrigin = (0, import_remote_scope.getScope)(bundle)?.url.origin ?? "";
       const isCrossOrigin = remoteOrigin && remoteOrigin !== location.origin;
       const basePath = isCrossOrigin ? `${remoteOrigin}${config.path ?? "/_next/image"}` : config.path ?? `${remoteOrigin}/_next/image`;
-      const extracted = extractDeploymentIdFromSrc(src);
-      const deploymentParam = extracted.deploymentId ? `&dpl=${encodeURIComponent(extracted.deploymentId)}` : "";
+      if (!(0, import_next_image_deployment_id.isNextDeploymentAssetSrc)(src)) {
+        const url2 = `${basePath}?url=${encodeURIComponent(src)}&w=${width}&q=${q}`;
+        return resolveClientUrl?.(url2) ?? url2;
+      }
+      const extracted = (0, import_next_image_deployment_id.extractDeploymentIdFromSrc)(src);
+      const deploymentId = extracted.deploymentId ?? ssrImageDeploymentIdMap?.get(extracted.src);
+      const deploymentParam = deploymentId ? `&dpl=${encodeURIComponent(deploymentId)}` : "";
       const url = `${basePath}?url=${encodeURIComponent(extracted.src)}&w=${width}&q=${q}${deploymentParam}`;
       return resolveClientUrl?.(url) ?? url;
     },

package/dist/internal/host/shared/remote-image-loader.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/host/shared/remote-image-loader.ts"],"sourcesContent":["import { getScope } from '#internal/runtime/turbopack/remote-scope';\nimport type { InternalResolveClientUrl } from '#internal/runtime/url/resolve-client-url';\n\nfunction extractDeploymentIdFromSrc(src: string) {\n  if (!src.startsWith('/') || src.startsWith('//')) {\n    return { deploymentId: undefined, src };\n  }\n\n  const queryIndex = src.indexOf('?');\n  if (queryIndex === -1) {\n    return { deploymentId: undefined, src };\n  }\n\n  const params = new URLSearchParams(src.slice(queryIndex + 1));\n  const deploymentId = params.get('dpl') || undefined;\n  if (!deploymentId) {\n    return { deploymentId: undefined, src };\n  }\n\n  params.delete('dpl');\n  const remaining = params.toString();\n  return {\n    deploymentId,\n    src: `${src.slice(0, queryIndex)}${remaining ? `?${remaining}` : ''}`,\n  };\n}\n\n/**\n * Replacement for `next/dist/shared/lib/image-loader`.\n *\n * Uses `config.path` (which includes the remote's asset prefix, e.g.\n * `/vc-ap-xxx/_next/image`) to generate URLs that match the server-rendered\n * HTML and avoid hydration mismatches. Under the microfrontends proxy these\n * relative paths are routed to the correct app.\n *\n * For cross-origin deployments (standalone host on a different domain),\n * `config.path` is a relative path that would incorrectly resolve to the host\n * origin, so we prefix it with the remote origin to produce an absolute URL\n * pointing at the remote's optimizer.\n *\n * When `resolveClientUrl` is provided (deployment protection), the final URL\n * is routed through the host's proxy.\n */\nexport function createRemoteImageLoader(\n  bundle: string,\n  resolveClientUrl?: InternalResolveClientUrl,\n) {\n  const loader = Object.assign(\n    ({\n      config,\n      src,\n      width,\n      quality,\n    }: {\n      config: { path?: string };\n      src: string;\n      width: number;\n      quality?: number;\n    }) => {\n      const q = quality ?? 75;\n      const remoteOrigin = getScope(bundle)?.url.origin ?? '';\n      const isCrossOrigin = remoteOrigin && remoteOrigin !== location.origin;\n      const basePath = isCrossOrigin\n        ? `${remoteOrigin}${config.path ?? '/_next/image'}`\n        : (config.path ?? `${remoteOrigin}/_next/image`);\n      const extracted = extractDeploymentIdFromSrc(src);\n      const deploymentParam = extracted.deploymentId\n        ? `&dpl=${encodeURIComponent(extracted.deploymentId)}`\n        : '';\n      const url = `${basePath}?url=${encodeURIComponent(extracted.src)}&w=${width}&q=${q}${deploymentParam}`;\n      return resolveClientUrl?.(url) ?? url;\n    },\n    // Signals to getImgProps that this is a default loader (not a user-defined\n    // one), enabling srcSet generation with device/image sizes from the config.\n    { __next_img_default: true as const },\n  );\n  return loader;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,0BAAyB;AAGzB,SAAS,2BAA2B,KAAa;AAC/C,MAAI,CAAC,IAAI,WAAW,GAAG,KAAK,IAAI,WAAW,IAAI,GAAG;AAChD,WAAO,EAAE,cAAc,QAAW,IAAI;AAAA,EACxC;AAEA,QAAM,aAAa,IAAI,QAAQ,GAAG;AAClC,MAAI,eAAe,IAAI;AACrB,WAAO,EAAE,cAAc,QAAW,IAAI;AAAA,EACxC;AAEA,QAAM,SAAS,IAAI,gBAAgB,IAAI,MAAM,aAAa,CAAC,CAAC;AAC5D,QAAM,eAAe,OAAO,IAAI,KAAK,KAAK;AAC1C,MAAI,CAAC,cAAc;AACjB,WAAO,EAAE,cAAc,QAAW,IAAI;AAAA,EACxC;AAEA,SAAO,OAAO,KAAK;AACnB,QAAM,YAAY,OAAO,SAAS;AAClC,SAAO;AAAA,IACL;AAAA,IACA,KAAK,GAAG,IAAI,MAAM,GAAG,UAAU,IAAI,YAAY,IAAI,cAAc;AAAA,EACnE;AACF;AAkBO,SAAS,wBACd,QACA,kBACA;AACA,QAAM,SAAS,OAAO;AAAA,IACpB,CAAC;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF,MAKM;AACJ,YAAM,IAAI,WAAW;AACrB,YAAM,mBAAe,8BAAS,MAAM,GAAG,IAAI,UAAU;AACrD,YAAM,gBAAgB,gBAAgB,iBAAiB,SAAS;AAChE,YAAM,WAAW,gBACb,GAAG,eAAe,OAAO,QAAQ,mBAChC,OAAO,QAAQ,GAAG;AACvB,YAAM,YAAY,2BAA2B,GAAG;AAChD,YAAM,kBAAkB,UAAU,eAC9B,QAAQ,mBAAmB,UAAU,YAAY,MACjD;AACJ,YAAM,MAAM,GAAG,gBAAgB,mBAAmB,UAAU,GAAG,OAAO,WAAW,IAAI;AACrF,aAAO,mBAAmB,GAAG,KAAK;AAAA,IACpC;AAAA;AAAA;AAAA,IAGA,EAAE,oBAAoB,KAAc;AAAA,EACtC;AACA,SAAO;AACT;","names":[]}
+{"version":3,"sources":["../../../../src/host/shared/remote-image-loader.ts"],"sourcesContent":["import {\n  extractDeploymentIdFromSrc,\n  isNextDeploymentAssetSrc,\n  type NextImageDeploymentId,\n} from '#internal/host/shared/next-image-deployment-id';\nimport { getScope } from '#internal/runtime/turbopack/remote-scope';\nimport type { InternalResolveClientUrl } from '#internal/runtime/url/resolve-client-url';\n\n/**\n * Replacement for `next/dist/shared/lib/image-loader`.\n *\n * Uses `config.path` (which includes the remote's asset prefix, e.g.\n * `/vc-ap-xxx/_next/image`) to generate URLs that match the server-rendered\n * HTML and avoid hydration mismatches. Under the microfrontends proxy these\n * relative paths are routed to the correct app.\n *\n * For cross-origin deployments (standalone host on a different domain),\n * `config.path` is a relative path that would incorrectly resolve to the host\n * origin, so we prefix it with the remote origin to produce an absolute URL\n * pointing at the remote's optimizer.\n *\n * When `resolveClientUrl` is provided (deployment protection), the final URL\n * is routed through the host's proxy.\n */\nexport function createRemoteImageLoader(\n  bundle: string,\n  resolveClientUrl?: InternalResolveClientUrl,\n  ssrImageDeploymentIds?: readonly NextImageDeploymentId[],\n) {\n  const ssrImageDeploymentIdMap = ssrImageDeploymentIds\n    ? new Map(\n        ssrImageDeploymentIds.map(({ src, deploymentId }) => [\n          src,\n          deploymentId,\n        ]),\n      )\n    : undefined;\n  const loader = Object.assign(\n    ({\n      config,\n      src,\n      width,\n      quality,\n    }: {\n      config: { path?: string };\n      src: string;\n      width: number;\n      quality?: number;\n    }) => {\n      const q = quality ?? 75;\n      const remoteOrigin = getScope(bundle)?.url.origin ?? '';\n      const isCrossOrigin = remoteOrigin && remoteOrigin !== location.origin;\n      const basePath = isCrossOrigin\n        ? `${remoteOrigin}${config.path ?? '/_next/image'}`\n        : (config.path ?? `${remoteOrigin}/_next/image`);\n\n      if (!isNextDeploymentAssetSrc(src)) {\n        const url = `${basePath}?url=${encodeURIComponent(src)}&w=${width}&q=${q}`;\n        return resolveClientUrl?.(url) ?? url;\n      }\n\n      const extracted = extractDeploymentIdFromSrc(src);\n      const deploymentId =\n        extracted.deploymentId ?? ssrImageDeploymentIdMap?.get(extracted.src);\n      const deploymentParam = deploymentId\n        ? `&dpl=${encodeURIComponent(deploymentId)}`\n        : '';\n      const url = `${basePath}?url=${encodeURIComponent(extracted.src)}&w=${width}&q=${q}${deploymentParam}`;\n      return resolveClientUrl?.(url) ?? url;\n    },\n    // Signals to getImgProps that this is a default loader (not a user-defined\n    // one), enabling srcSet generation with device/image sizes from the config.\n    { __next_img_default: true as const },\n  );\n  return loader;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,sCAIO;AACP,0BAAyB;AAmBlB,SAAS,wBACd,QACA,kBACA,uBACA;AACA,QAAM,0BAA0B,wBAC5B,IAAI;AAAA,IACF,sBAAsB,IAAI,CAAC,EAAE,KAAK,aAAa,MAAM;AAAA,MACnD;AAAA,MACA;AAAA,IACF,CAAC;AAAA,EACH,IACA;AACJ,QAAM,SAAS,OAAO;AAAA,IACpB,CAAC;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF,MAKM;AACJ,YAAM,IAAI,WAAW;AACrB,YAAM,mBAAe,8BAAS,MAAM,GAAG,IAAI,UAAU;AACrD,YAAM,gBAAgB,gBAAgB,iBAAiB,SAAS;AAChE,YAAM,WAAW,gBACb,GAAG,eAAe,OAAO,QAAQ,mBAChC,OAAO,QAAQ,GAAG;AAEvB,UAAI,KAAC,0DAAyB,GAAG,GAAG;AAClC,cAAMA,OAAM,GAAG,gBAAgB,mBAAmB,GAAG,OAAO,WAAW;AACvE,eAAO,mBAAmBA,IAAG,KAAKA;AAAA,MACpC;AAEA,YAAM,gBAAY,4DAA2B,GAAG;AAChD,YAAM,eACJ,UAAU,gBAAgB,yBAAyB,IAAI,UAAU,GAAG;AACtE,YAAM,kBAAkB,eACpB,QAAQ,mBAAmB,YAAY,MACvC;AACJ,YAAM,MAAM,GAAG,gBAAgB,mBAAmB,UAAU,GAAG,OAAO,WAAW,IAAI;AACrF,aAAO,mBAAmB,GAAG,KAAK;AAAA,IACpC;AAAA;AAAA;AAAA,IAGA,EAAE,oBAAoB,KAAc;AAAA,EACtC;AACA,SAAO;AACT;","names":["url"]}

package/dist/internal/host/shared/remote-image-loader.d.ts

@@ -1,3 +1,4 @@
+import { NextImageDeploymentId } from './next-image-deployment-id.js';
 import { InternalResolveClientUrl } from '../../runtime/url/resolve-client-url.js';
 
 /**
@@ -16,7 +17,7 @@ import { InternalResolveClientUrl } from '../../runtime/url/resolve-client-url.j
  * When `resolveClientUrl` is provided (deployment protection), the final URL
  * is routed through the host's proxy.
  */
-declare function createRemoteImageLoader(bundle: string, resolveClientUrl?: InternalResolveClientUrl): (({ config, src, width, quality, }: {
+declare function createRemoteImageLoader(bundle: string, resolveClientUrl?: InternalResolveClientUrl, ssrImageDeploymentIds?: readonly NextImageDeploymentId[]): (({ config, src, width, quality, }: {
     config: {
         path?: string;
     };

package/dist/internal/host/shared/remote-image-loader.js

@@ -1,25 +1,15 @@
+import {
+  extractDeploymentIdFromSrc,
+  isNextDeploymentAssetSrc
+} from "#internal/host/shared/next-image-deployment-id";
 import { getScope } from "#internal/runtime/turbopack/remote-scope";
-function extractDeploymentIdFromSrc(src) {
-  if (!src.startsWith("/") || src.startsWith("//")) {
-    return { deploymentId: void 0, src };
-  }
-  const queryIndex = src.indexOf("?");
-  if (queryIndex === -1) {
-    return { deploymentId: void 0, src };
-  }
-  const params = new URLSearchParams(src.slice(queryIndex + 1));
-  const deploymentId = params.get("dpl") || void 0;
-  if (!deploymentId) {
-    return { deploymentId: void 0, src };
-  }
-  params.delete("dpl");
-  const remaining = params.toString();
-  return {
-    deploymentId,
-    src: `${src.slice(0, queryIndex)}${remaining ? `?${remaining}` : ""}`
-  };
-}
-function createRemoteImageLoader(bundle, resolveClientUrl) {
+function createRemoteImageLoader(bundle, resolveClientUrl, ssrImageDeploymentIds) {
+  const ssrImageDeploymentIdMap = ssrImageDeploymentIds ? new Map(
+    ssrImageDeploymentIds.map(({ src, deploymentId }) => [
+      src,
+      deploymentId
+    ])
+  ) : void 0;
   const loader = Object.assign(
     ({
       config,
@@ -31,8 +21,13 @@ function createRemoteImageLoader(bundle, resolveClientUrl) {
       const remoteOrigin = getScope(bundle)?.url.origin ?? "";
       const isCrossOrigin = remoteOrigin && remoteOrigin !== location.origin;
       const basePath = isCrossOrigin ? `${remoteOrigin}${config.path ?? "/_next/image"}` : config.path ?? `${remoteOrigin}/_next/image`;
+      if (!isNextDeploymentAssetSrc(src)) {
+        const url2 = `${basePath}?url=${encodeURIComponent(src)}&w=${width}&q=${q}`;
+        return resolveClientUrl?.(url2) ?? url2;
+      }
       const extracted = extractDeploymentIdFromSrc(src);
-      const deploymentParam = extracted.deploymentId ? `&dpl=${encodeURIComponent(extracted.deploymentId)}` : "";
+      const deploymentId = extracted.deploymentId ?? ssrImageDeploymentIdMap?.get(extracted.src);
+      const deploymentParam = deploymentId ? `&dpl=${encodeURIComponent(deploymentId)}` : "";
       const url = `${basePath}?url=${encodeURIComponent(extracted.src)}&w=${width}&q=${q}${deploymentParam}`;
       return resolveClientUrl?.(url) ?? url;
     },