remote-components 0.0.36 → 0.0.37

package/dist/next/host/pages-router-server.cjs

@@ -145,7 +145,7 @@ function RemoteComponent(props) {
         name: props.name,
         reset: props.reset,
         shared: shared(props.bundle ?? "default"),
-        src: props.url ?? props.src,
+        src: props.src,
         children: props.children
       }
     );
@@ -159,7 +159,7 @@ function RemoteComponent(props) {
       name: props.name,
       reset: props.reset,
       shared: shared(props.bundle ?? "default"),
-      src: props.url ?? props.src,
+      src: props.src,
       children: remoteComponent
     }
   );
@@ -171,12 +171,11 @@ async function getRemoteComponentProps(src, headers) {
     );
   }
   const {
-    metadata: { bundle, route, runtime },
+    metadata: { bundle, route },
     name,
     links,
     component,
     nextData,
-    url,
     remoteShared
   } = await (0, import_fetch_remote_component.fetchRemoteComponent)(
     src,
@@ -201,10 +200,7 @@ async function getRemoteComponentProps(src, headers) {
     src,
     bundle,
     name,
-    route,
-    runtime,
-    buildId: nextData?.buildId ?? null,
-    url: url.href
+    route
   };
   const key = getKey(props);
   if (nextData?.buildId !== "development") {

package/dist/next/host/pages-router-server.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/next/host/pages-router-server.tsx"],"sourcesContent":["import type { IncomingHttpHeaders } from 'node:http';\nimport * as Form from 'next/form';\nimport * as Image from 'next/image';\nimport * as Link from 'next/link';\nimport * as Router from 'next/router';\nimport * as Script from 'next/script';\nimport { useEffect } from 'react';\nimport { shared as _shared } from 'remote-components/shared/host/pages';\nimport { RemoteComponentsError } from '#internal/shared/client/remote-component';\nimport { fetchRemoteComponent } from '#internal/shared/ssr/fetch-remote-component';\nimport { RemoteComponent as RemoteComponentReact } from '#remote-components/react/index';\n\nconst navigationImpl = {\n  useRouter: () => Router.useRouter(),\n  useSearchParams: () => {\n    const router = Router.useRouter();\n    return {\n      get: (key: string) => router.query[key],\n      has: (key: string) => key in router.query,\n    };\n  },\n};\n\nconst sharedCache = new Map<string, Record<string, () => Promise<unknown>>>();\nconst shared = (bundle: string) => {\n  if (sharedCache.has(bundle)) {\n    return sharedCache.get(bundle);\n  }\n\n  const remoteLoader = ({ src, width, quality }: Image.ImageLoaderProps) => {\n    const self = globalThis as typeof globalThis & {\n      __remote_bundle_url__?: Record<string, URL>;\n    };\n    const { assetPrefix } =\n      /^(?<assetPrefix>.*?)\\/_next\\//.exec(src)?.groups ?? {};\n    return `${self.__remote_bundle_url__?.[bundle]?.origin ?? ''}${assetPrefix}/_next/image?url=${encodeURIComponent(src)}&w=${width}&q=${quality || 75}`;\n  };\n\n  const imageImpl = (ImageComponent: typeof Image.default) => {\n    function RemoteImage(props: Image.ImageProps) {\n      return <ImageComponent loader={remoteLoader} {...props} />;\n    }\n    RemoteImage.default = RemoteImage;\n    RemoteImage.getImageProps = Image.getImageProps;\n    return RemoteImage;\n  };\n\n  return {\n    // polyfill Next.js App Router client API (minimal)\n    // some API methods are not available when using a Next.js Pages Router application as host\n    'next/navigation': () =>\n      Promise.resolve(navigationImpl) as Promise<unknown>,\n    'next/dist/client/components/navigation': () =>\n      Promise.resolve(navigationImpl) as Promise<unknown>,\n    'next/dist/client/app-dir/link': () =>\n      Promise.resolve(Link.default) as Promise<unknown>,\n    'next/link': () => Promise.resolve(Link.default) as Promise<unknown>,\n    'next/dist/client/app-dir/form': () =>\n      Promise.resolve(Form.default) as Promise<unknown>,\n    'next/form': () => Promise.resolve(Form.default) as Promise<unknown>,\n    'next/dist/client/script': () =>\n      Promise.resolve(Script.default) as Promise<unknown>,\n    'next/script': () => Promise.resolve(Script.default) as Promise<unknown>,\n    'next/dist/client/image-component': () =>\n      Promise.resolve({\n        // @ts-expect-error default.default\n        // eslint-disable-next-line\n        Image: imageImpl(Image.default.default ?? Image.default),\n      }) as Promise<unknown>,\n    'next/dist/api/image': () =>\n      Promise.resolve({\n        // @ts-expect-error default.default\n        // eslint-disable-next-line\n        default: imageImpl(Image.default.default ?? Image.default),\n        getImageProps: Image.getImageProps,\n      }) as Promise<unknown>,\n    'next/router': () => Promise.resolve(Router) as Promise<unknown>,\n    ..._shared,\n    // always override next/image to use the remote loader\n    'next/image': () =>\n      Promise.resolve(\n        // @ts-expect-error default.default\n        // eslint-disable-next-line\n        imageImpl(Image.default.default ?? Image.default),\n      ) as Promise<unknown>,\n  };\n};\n\n// internal symbols to access global store\nconst REMOTE_COMPONENT_STORE = Symbol('REMOTE_COMPONENT_STORE');\nconst REMOTE_COMPONENT_KEY = '__REMOTE_COMPONENT_KEY__';\n\n// temporary global store for remote component HTML\n// the store is used to save the HTML of remote components for SSR without sending the content to the client\nconst self = globalThis as typeof globalThis & {\n  [REMOTE_COMPONENT_STORE]?: Map<string, React.ReactNode>;\n};\n\nfunction getKey({\n  bundle,\n  route,\n  name,\n}: {\n  bundle?: string;\n  route?: string;\n  name?: string;\n}): string {\n  return `${bundle ?? '__next'}:${route ?? '/'}:${name ?? '__vercel_remote_component'}__${crypto.randomUUID()}`;\n}\n\nfunction setComponent(key: string, component: React.ReactNode): void {\n  if (!self[REMOTE_COMPONENT_STORE]) {\n    self[REMOTE_COMPONENT_STORE] = new Map();\n  }\n  self[REMOTE_COMPONENT_STORE].set(key, component);\n}\n\nfunction getComponent(key: string): React.ReactNode | undefined {\n  const component = self[REMOTE_COMPONENT_STORE]?.get(key);\n  // remove the component from the store after retrieving it to prevent memory leaks\n  // storing the HTML in the global store is only needed for SSR and it's temporary only used for a single render\n  self[REMOTE_COMPONENT_STORE]?.delete(key);\n  return component;\n}\n\nexport interface RemoteComponentProps {\n  src: string;\n  url?: string | URL;\n  bundle?: string;\n  route?: string;\n  name?: string;\n  isolate?: boolean;\n  mode?: 'open' | 'closed';\n  reset?: boolean;\n  additionalHeaders?: Headers | Record<string, string>;\n  [REMOTE_COMPONENT_KEY]?: string;\n  children?: React.ReactNode;\n}\n\n/**\n * This component handles the rendering of remote microfrontends.\n *\n * @param props - The properties for the remote component.\n * @returns A React component that renders the remote component.\n */\nexport function RemoteComponent(props: RemoteComponentProps) {\n  const remoteComponent =\n    typeof document !== 'undefined'\n      ? null\n      : // retrieve the HTML from the global store\n        getComponent(\n          props[REMOTE_COMPONENT_KEY] ?? '__vercel_remote_component',\n        );\n\n  useEffect(() => {\n    const clientSelf = globalThis as typeof globalThis & {\n      __remote_component_shared__?: Record<string, () => Promise<unknown>>;\n    };\n    // eslint-disable-next-line camelcase\n    clientSelf.__remote_component_shared__ = shared(props.bundle ?? 'default');\n  }, [props.bundle]);\n\n  if (!props[REMOTE_COMPONENT_KEY]) {\n    return (\n      <RemoteComponentReact\n        additionalHeaders={props.additionalHeaders}\n        isolate={props.isolate}\n        mode={props.mode}\n        name={props.name}\n        reset={props.reset}\n        shared={shared(props.bundle ?? 'default')}\n        src={props.url ?? props.src}\n      >\n        {props.children}\n      </RemoteComponentReact>\n    );\n  }\n\n  return (\n    <RemoteComponentReact\n      additionalHeaders={props.additionalHeaders}\n      isolate={props.isolate}\n      mode={props.mode}\n      name={props.name}\n      reset={props.reset}\n      shared={shared(props.bundle ?? 'default')}\n      src={props.url ?? props.src}\n    >\n      {remoteComponent}\n    </RemoteComponentReact>\n  );\n}\n\n/**\n * Fetches the remote component properties from the server. You need to pass these properties to the `<RemoteComponent>` component to render the fetched remote component.\n *\n * @param src - The source URL of the remote component. When using the Vercel Microfrontends solution, you can use relative paths, e.g. `/nextjs-app-remote/components/header`. Absolute URLs are also supported.\n * @param headers - The HTTP headers used for supporting the Vercel Microfrontends proxy.\n * @returns The properties of the remote component.\n *\n * @example\n *\n * ```tsx\n * import { getRemoteComponentProps } from 'remote-components/next/host/pages';\n * import type { GetServerSideProps } from 'next';\n *\n * export const getServerSideProps: GetServerSideProps<PageProps> = async function getServerSideProps({ req }) {\n *   const myRemoteComponent = await getRemoteComponentProps(\n *     '/nextjs-app-remote/components/header',\n *     req.headers,\n *   );\n *   return {\n *     props: {\n *       remoteComponents: {\n *         myRemoteComponent,\n *       },\n *     },\n *   };\n * }\n * ```\n */\nexport async function getRemoteComponentProps(\n  src: string,\n  headers: IncomingHttpHeaders,\n): Promise<RemoteComponentProps> {\n  if (typeof document !== 'undefined') {\n    throw new RemoteComponentsError(\n      '`getRemoteComponentProps()` can only be used on the server side.',\n    );\n  }\n\n  const {\n    metadata: { bundle, route, runtime },\n    name,\n    links,\n    component,\n    nextData,\n    url,\n    remoteShared,\n  } = await fetchRemoteComponent(\n    src,\n    headers instanceof Headers\n      ? headers\n      : // convert IncomingHttpHeaders to web standard Headers\n        Object.entries(headers).reduce((acc, [key, value]) => {\n          if (value) {\n            if (Array.isArray(value)) {\n              value.forEach((v) => acc.append(key, v));\n            } else {\n              acc.append(key, value);\n            }\n          }\n          return acc;\n        }, new Headers()),\n    {\n      rsc: true,\n    },\n  );\n\n  const props = {\n    src,\n    bundle,\n    name,\n    route,\n    runtime,\n    buildId: nextData?.buildId ?? null,\n    url: url.href,\n  };\n\n  const key = getKey(props);\n\n  // do not render the HTML in development mode when remote is using Next.js Pages Router\n  // this behavior is emulating the Next.js Pages Router FOUC as the styles are only applied on the client when running in development mode\n  if (nextData?.buildId !== 'development') {\n    // store the HTML in a global store\n    setComponent(\n      key,\n      <>\n        <script\n          data-remote-components-shared=\"\"\n          id={`${name}_shared`}\n          type=\"application/json\"\n        >\n          {JSON.stringify(remoteShared)}\n        </script>\n        {links.map((link) => (\n          <link\n            key={`${link.as}_${link.href}`}\n            {...link}\n            precedence={undefined}\n          />\n        ))}\n        {component}\n      </>,\n    );\n  }\n\n  return {\n    ...props,\n    // add remote component key to the props\n    [REMOTE_COMPONENT_KEY]: key,\n  };\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAwCa;AAvCb,WAAsB;AACtB,YAAuB;AACvB,WAAsB;AACtB,aAAwB;AACxB,aAAwB;AACxB,mBAA0B;AAC1B,mBAAkC;AAClC,8BAAsC;AACtC,oCAAqC;AACrC,IAAAA,gBAAwD;AAExD,MAAM,iBAAiB;AAAA,EACrB,WAAW,MAAM,OAAO,UAAU;AAAA,EAClC,iBAAiB,MAAM;AACrB,UAAM,SAAS,OAAO,UAAU;AAChC,WAAO;AAAA,MACL,KAAK,CAAC,QAAgB,OAAO,MAAM,GAAG;AAAA,MACtC,KAAK,CAAC,QAAgB,OAAO,OAAO;AAAA,IACtC;AAAA,EACF;AACF;AAEA,MAAM,cAAc,oBAAI,IAAoD;AAC5E,MAAM,SAAS,CAAC,WAAmB;AACjC,MAAI,YAAY,IAAI,MAAM,GAAG;AAC3B,WAAO,YAAY,IAAI,MAAM;AAAA,EAC/B;AAEA,QAAM,eAAe,CAAC,EAAE,KAAK,OAAO,QAAQ,MAA8B;AACxE,UAAMC,QAAO;AAGb,UAAM,EAAE,YAAY,IAClB,gCAAgC,KAAK,GAAG,GAAG,UAAU,CAAC;AACxD,WAAO,GAAGA,MAAK,wBAAwB,MAAM,GAAG,UAAU,KAAK,+BAA+B,mBAAmB,GAAG,OAAO,WAAW,WAAW;AAAA,EACnJ;AAEA,QAAM,YAAY,CAAC,mBAAyC;AAC1D,aAAS,YAAY,OAAyB;AAC5C,aAAO,4CAAC,kBAAe,QAAQ,cAAe,GAAG,OAAO;AAAA,IAC1D;AACA,gBAAY,UAAU;AACtB,gBAAY,gBAAgB,MAAM;AAClC,WAAO;AAAA,EACT;AAEA,SAAO;AAAA;AAAA;AAAA,IAGL,mBAAmB,MACjB,QAAQ,QAAQ,cAAc;AAAA,IAChC,0CAA0C,MACxC,QAAQ,QAAQ,cAAc;AAAA,IAChC,iCAAiC,MAC/B,QAAQ,QAAQ,KAAK,OAAO;AAAA,IAC9B,aAAa,MAAM,QAAQ,QAAQ,KAAK,OAAO;AAAA,IAC/C,iCAAiC,MAC/B,QAAQ,QAAQ,KAAK,OAAO;AAAA,IAC9B,aAAa,MAAM,QAAQ,QAAQ,KAAK,OAAO;AAAA,IAC/C,2BAA2B,MACzB,QAAQ,QAAQ,OAAO,OAAO;AAAA,IAChC,eAAe,MAAM,QAAQ,QAAQ,OAAO,OAAO;AAAA,IACnD,oCAAoC,MAClC,QAAQ,QAAQ;AAAA;AAAA;AAAA,MAGd,OAAO,UAAU,MAAM,QAAQ,WAAW,MAAM,OAAO;AAAA,IACzD,CAAC;AAAA,IACH,uBAAuB,MACrB,QAAQ,QAAQ;AAAA;AAAA;AAAA,MAGd,SAAS,UAAU,MAAM,QAAQ,WAAW,MAAM,OAAO;AAAA,MACzD,eAAe,MAAM;AAAA,IACvB,CAAC;AAAA,IACH,eAAe,MAAM,QAAQ,QAAQ,MAAM;AAAA,IAC3C,GAAG,aAAAC;AAAA;AAAA,IAEH,cAAc,MACZ,QAAQ;AAAA;AAAA;AAAA,MAGN,UAAU,MAAM,QAAQ,WAAW,MAAM,OAAO;AAAA,IAClD;AAAA,EACJ;AACF;AAGA,MAAM,yBAAyB,OAAO,wBAAwB;AAC9D,MAAM,uBAAuB;AAI7B,MAAM,OAAO;AAIb,SAAS,OAAO;AAAA,EACd;AAAA,EACA;AAAA,EACA;AACF,GAIW;AACT,SAAO,GAAG,UAAU,YAAY,SAAS,OAAO,QAAQ,gCAAgC,OAAO,WAAW;AAC5G;AAEA,SAAS,aAAa,KAAa,WAAkC;AACnE,MAAI,CAAC,KAAK,sBAAsB,GAAG;AACjC,SAAK,sBAAsB,IAAI,oBAAI,IAAI;AAAA,EACzC;AACA,OAAK,sBAAsB,EAAE,IAAI,KAAK,SAAS;AACjD;AAEA,SAAS,aAAa,KAA0C;AAC9D,QAAM,YAAY,KAAK,sBAAsB,GAAG,IAAI,GAAG;AAGvD,OAAK,sBAAsB,GAAG,OAAO,GAAG;AACxC,SAAO;AACT;AAsBO,SAAS,gBAAgB,OAA6B;AAC3D,QAAM,kBACJ,OAAO,aAAa,cAChB;AAAA;AAAA,IAEA;AAAA,MACE,MAAM,oBAAoB,KAAK;AAAA,IACjC;AAAA;AAEN,8BAAU,MAAM;AACd,UAAM,aAAa;AAInB,eAAW,8BAA8B,OAAO,MAAM,UAAU,SAAS;AAAA,EAC3E,GAAG,CAAC,MAAM,MAAM,CAAC;AAEjB,MAAI,CAAC,MAAM,oBAAoB,GAAG;AAChC,WACE;AAAA,MAAC,cAAAC;AAAA,MAAA;AAAA,QACC,mBAAmB,MAAM;AAAA,QACzB,SAAS,MAAM;AAAA,QACf,MAAM,MAAM;AAAA,QACZ,MAAM,MAAM;AAAA,QACZ,OAAO,MAAM;AAAA,QACb,QAAQ,OAAO,MAAM,UAAU,SAAS;AAAA,QACxC,KAAK,MAAM,OAAO,MAAM;AAAA,QAEvB,gBAAM;AAAA;AAAA,IACT;AAAA,EAEJ;AAEA,SACE;AAAA,IAAC,cAAAA;AAAA,IAAA;AAAA,MACC,mBAAmB,MAAM;AAAA,MACzB,SAAS,MAAM;AAAA,MACf,MAAM,MAAM;AAAA,MACZ,MAAM,MAAM;AAAA,MACZ,OAAO,MAAM;AAAA,MACb,QAAQ,OAAO,MAAM,UAAU,SAAS;AAAA,MACxC,KAAK,MAAM,OAAO,MAAM;AAAA,MAEvB;AAAA;AAAA,EACH;AAEJ;AA8BA,eAAsB,wBACpB,KACA,SAC+B;AAC/B,MAAI,OAAO,aAAa,aAAa;AACnC,UAAM,IAAI;AAAA,MACR;AAAA,IACF;AAAA,EACF;AAEA,QAAM;AAAA,IACJ,UAAU,EAAE,QAAQ,OAAO,QAAQ;AAAA,IACnC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,UAAM;AAAA,IACR;AAAA,IACA,mBAAmB,UACf;AAAA;AAAA,MAEA,OAAO,QAAQ,OAAO,EAAE,OAAO,CAAC,KAAK,CAACC,MAAK,KAAK,MAAM;AACpD,YAAI,OAAO;AACT,cAAI,MAAM,QAAQ,KAAK,GAAG;AACxB,kBAAM,QAAQ,CAAC,MAAM,IAAI,OAAOA,MAAK,CAAC,CAAC;AAAA,UACzC,OAAO;AACL,gBAAI,OAAOA,MAAK,KAAK;AAAA,UACvB;AAAA,QACF;AACA,eAAO;AAAA,MACT,GAAG,IAAI,QAAQ,CAAC;AAAA;AAAA,IACpB;AAAA,MACE,KAAK;AAAA,IACP;AAAA,EACF;AAEA,QAAM,QAAQ;AAAA,IACZ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,SAAS,UAAU,WAAW;AAAA,IAC9B,KAAK,IAAI;AAAA,EACX;AAEA,QAAM,MAAM,OAAO,KAAK;AAIxB,MAAI,UAAU,YAAY,eAAe;AAEvC;AAAA,MACE;AAAA,MACA,4EACE;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,iCAA8B;AAAA,YAC9B,IAAI,GAAG;AAAA,YACP,MAAK;AAAA,YAEJ,eAAK,UAAU,YAAY;AAAA;AAAA,QAC9B;AAAA,QACC,MAAM,IAAI,CAAC,SACV;AAAA,UAAC;AAAA;AAAA,YAEE,GAAG;AAAA,YACJ,YAAY;AAAA;AAAA,UAFP,GAAG,KAAK,MAAM,KAAK;AAAA,QAG1B,CACD;AAAA,QACA;AAAA,SACH;AAAA,IACF;AAAA,EACF;AAEA,SAAO;AAAA,IACL,GAAG;AAAA;AAAA,IAEH,CAAC,oBAAoB,GAAG;AAAA,EAC1B;AACF;","names":["import_react","self","_shared","RemoteComponentReact","key"]}
+{"version":3,"sources":["../../../src/next/host/pages-router-server.tsx"],"sourcesContent":["import type { IncomingHttpHeaders } from 'node:http';\nimport * as Form from 'next/form';\nimport * as Image from 'next/image';\nimport * as Link from 'next/link';\nimport * as Router from 'next/router';\nimport * as Script from 'next/script';\nimport { useEffect } from 'react';\nimport { shared as _shared } from 'remote-components/shared/host/pages';\nimport { RemoteComponentsError } from '#internal/shared/client/remote-component';\nimport { fetchRemoteComponent } from '#internal/shared/ssr/fetch-remote-component';\nimport { RemoteComponent as RemoteComponentReact } from '#remote-components/react/index';\n\nconst navigationImpl = {\n  useRouter: () => Router.useRouter(),\n  useSearchParams: () => {\n    const router = Router.useRouter();\n    return {\n      get: (key: string) => router.query[key],\n      has: (key: string) => key in router.query,\n    };\n  },\n};\n\nconst sharedCache = new Map<string, Record<string, () => Promise<unknown>>>();\nconst shared = (bundle: string) => {\n  if (sharedCache.has(bundle)) {\n    return sharedCache.get(bundle);\n  }\n\n  const remoteLoader = ({ src, width, quality }: Image.ImageLoaderProps) => {\n    const self = globalThis as typeof globalThis & {\n      __remote_bundle_url__?: Record<string, URL>;\n    };\n    const { assetPrefix } =\n      /^(?<assetPrefix>.*?)\\/_next\\//.exec(src)?.groups ?? {};\n    return `${\n      self.__remote_bundle_url__?.[bundle]?.origin ?? ''\n    }${assetPrefix}/_next/image?url=${encodeURIComponent(src)}&w=${width}&q=${\n      quality || 75\n    }`;\n  };\n\n  const imageImpl = (ImageComponent: typeof Image.default) => {\n    function RemoteImage(props: Image.ImageProps) {\n      return <ImageComponent loader={remoteLoader} {...props} />;\n    }\n    RemoteImage.default = RemoteImage;\n    RemoteImage.getImageProps = Image.getImageProps;\n    return RemoteImage;\n  };\n\n  return {\n    // polyfill Next.js App Router client API (minimal)\n    // some API methods are not available when using a Next.js Pages Router application as host\n    'next/navigation': () =>\n      Promise.resolve(navigationImpl) as Promise<unknown>,\n    'next/dist/client/components/navigation': () =>\n      Promise.resolve(navigationImpl) as Promise<unknown>,\n    'next/dist/client/app-dir/link': () =>\n      Promise.resolve(Link.default) as Promise<unknown>,\n    'next/link': () => Promise.resolve(Link.default) as Promise<unknown>,\n    'next/dist/client/app-dir/form': () =>\n      Promise.resolve(Form.default) as Promise<unknown>,\n    'next/form': () => Promise.resolve(Form.default) as Promise<unknown>,\n    'next/dist/client/script': () =>\n      Promise.resolve(Script.default) as Promise<unknown>,\n    'next/script': () => Promise.resolve(Script.default) as Promise<unknown>,\n    'next/dist/client/image-component': () =>\n      Promise.resolve({\n        // @ts-expect-error default.default\n        // eslint-disable-next-line\n        Image: imageImpl(Image.default.default ?? Image.default),\n      }) as Promise<unknown>,\n    'next/dist/api/image': () =>\n      Promise.resolve({\n        // @ts-expect-error default.default\n        // eslint-disable-next-line\n        default: imageImpl(Image.default.default ?? Image.default),\n        getImageProps: Image.getImageProps,\n      }) as Promise<unknown>,\n    'next/router': () => Promise.resolve(Router) as Promise<unknown>,\n    ..._shared,\n    // always override next/image to use the remote loader\n    'next/image': () =>\n      Promise.resolve(\n        // @ts-expect-error default.default\n        // eslint-disable-next-line\n        imageImpl(Image.default.default ?? Image.default),\n      ) as Promise<unknown>,\n  };\n};\n\n// internal symbols to access global store\nconst REMOTE_COMPONENT_STORE = Symbol('REMOTE_COMPONENT_STORE');\nconst REMOTE_COMPONENT_KEY = '__REMOTE_COMPONENT_KEY__';\n\n// temporary global store for remote component HTML\n// the store is used to save the HTML of remote components for SSR without sending the content to the client\nconst self = globalThis as typeof globalThis & {\n  [REMOTE_COMPONENT_STORE]?: Map<string, React.ReactNode>;\n};\n\nfunction getKey({\n  bundle,\n  route,\n  name,\n}: {\n  bundle?: string;\n  route?: string;\n  name?: string;\n}): string {\n  return `${bundle ?? '__next'}:${route ?? '/'}:${\n    name ?? '__vercel_remote_component'\n  }__${crypto.randomUUID()}`;\n}\n\nfunction setComponent(key: string, component: React.ReactNode): void {\n  if (!self[REMOTE_COMPONENT_STORE]) {\n    self[REMOTE_COMPONENT_STORE] = new Map();\n  }\n  self[REMOTE_COMPONENT_STORE].set(key, component);\n}\n\nfunction getComponent(key: string): React.ReactNode | undefined {\n  const component = self[REMOTE_COMPONENT_STORE]?.get(key);\n  // remove the component from the store after retrieving it to prevent memory leaks\n  // storing the HTML in the global store is only needed for SSR and it's temporary only used for a single render\n  self[REMOTE_COMPONENT_STORE]?.delete(key);\n  return component;\n}\n\nexport interface RemoteComponentProps {\n  src: string;\n  bundle?: string;\n  route?: string;\n  name?: string;\n  isolate?: boolean;\n  mode?: 'open' | 'closed';\n  reset?: boolean;\n  additionalHeaders?: Headers | Record<string, string>;\n  [REMOTE_COMPONENT_KEY]?: string;\n  children?: React.ReactNode;\n}\n\n/**\n * This component handles the rendering of remote microfrontends.\n *\n * @param props - The properties for the remote component.\n * @returns A React component that renders the remote component.\n */\nexport function RemoteComponent(props: RemoteComponentProps) {\n  const remoteComponent =\n    typeof document !== 'undefined'\n      ? null\n      : // retrieve the HTML from the global store\n        getComponent(\n          props[REMOTE_COMPONENT_KEY] ?? '__vercel_remote_component',\n        );\n\n  useEffect(() => {\n    const clientSelf = globalThis as typeof globalThis & {\n      __remote_component_shared__?: Record<string, () => Promise<unknown>>;\n    };\n    // eslint-disable-next-line camelcase\n    clientSelf.__remote_component_shared__ = shared(props.bundle ?? 'default');\n  }, [props.bundle]);\n\n  if (!props[REMOTE_COMPONENT_KEY]) {\n    return (\n      <RemoteComponentReact\n        additionalHeaders={props.additionalHeaders}\n        isolate={props.isolate}\n        mode={props.mode}\n        name={props.name}\n        reset={props.reset}\n        shared={shared(props.bundle ?? 'default')}\n        src={props.src}\n      >\n        {props.children}\n      </RemoteComponentReact>\n    );\n  }\n\n  return (\n    <RemoteComponentReact\n      additionalHeaders={props.additionalHeaders}\n      isolate={props.isolate}\n      mode={props.mode}\n      name={props.name}\n      reset={props.reset}\n      shared={shared(props.bundle ?? 'default')}\n      src={props.src}\n    >\n      {remoteComponent}\n    </RemoteComponentReact>\n  );\n}\n\n/**\n * Fetches the remote component properties from the server. You need to pass these properties to the `<RemoteComponent>` component to render the fetched remote component.\n *\n * @param src - The source URL of the remote component. When using the Vercel Microfrontends solution, you can use relative paths, e.g. `/nextjs-app-remote/components/header`. Absolute URLs are also supported.\n * @param headers - The HTTP headers used for supporting the Vercel Microfrontends proxy.\n * @returns The properties of the remote component.\n *\n * @example\n *\n * ```tsx\n * import { getRemoteComponentProps } from 'remote-components/next/host/pages';\n * import type { GetServerSideProps } from 'next';\n *\n * export const getServerSideProps: GetServerSideProps<PageProps> = async function getServerSideProps({ req }) {\n *   const myRemoteComponent = await getRemoteComponentProps(\n *     '/nextjs-app-remote/components/header',\n *     req.headers,\n *   );\n *   return {\n *     props: {\n *       remoteComponents: {\n *         myRemoteComponent,\n *       },\n *     },\n *   };\n * }\n * ```\n */\nexport async function getRemoteComponentProps(\n  src: string,\n  headers: IncomingHttpHeaders,\n): Promise<RemoteComponentProps> {\n  if (typeof document !== 'undefined') {\n    throw new RemoteComponentsError(\n      '`getRemoteComponentProps()` can only be used on the server side.',\n    );\n  }\n\n  const {\n    metadata: { bundle, route },\n    name,\n    links,\n    component,\n    nextData,\n    remoteShared,\n  } = await fetchRemoteComponent(\n    src,\n    headers instanceof Headers\n      ? headers\n      : // convert IncomingHttpHeaders to web standard Headers\n        Object.entries(headers).reduce((acc, [key, value]) => {\n          if (value) {\n            if (Array.isArray(value)) {\n              value.forEach((v) => acc.append(key, v));\n            } else {\n              acc.append(key, value);\n            }\n          }\n          return acc;\n        }, new Headers()),\n    {\n      rsc: true,\n    },\n  );\n\n  const props: RemoteComponentProps = {\n    src,\n    bundle,\n    name,\n    route,\n  };\n\n  const key = getKey(props);\n\n  // do not render the HTML in development mode when remote is using Next.js Pages Router\n  // this behavior is emulating the Next.js Pages Router FOUC as the styles are only applied on the client when running in development mode\n  if (nextData?.buildId !== 'development') {\n    // store the HTML in a global store\n    setComponent(\n      key,\n      <>\n        <script\n          data-remote-components-shared=\"\"\n          id={`${name}_shared`}\n          type=\"application/json\"\n        >\n          {JSON.stringify(remoteShared)}\n        </script>\n        {links.map((link) => (\n          <link\n            key={`${link.as}_${link.href}`}\n            {...link}\n            precedence={undefined}\n          />\n        ))}\n        {component}\n      </>,\n    );\n  }\n\n  return {\n    ...props,\n    // add remote component key to the props\n    [REMOTE_COMPONENT_KEY]: key,\n  };\n}\n"],"mappings":"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","names":["import_react","self","_shared","RemoteComponentReact","key"]}

package/dist/next/host/pages-router-server.d.ts

@@ -4,7 +4,6 @@ import { IncomingHttpHeaders } from 'node:http';
 declare const REMOTE_COMPONENT_KEY = "__REMOTE_COMPONENT_KEY__";
 interface RemoteComponentProps {
     src: string;
-    url?: string | URL;
     bundle?: string;
     route?: string;
     name?: string;

package/dist/next/host/pages-router-server.js

@@ -111,7 +111,7 @@ function RemoteComponent(props) {
         name: props.name,
         reset: props.reset,
         shared: shared(props.bundle ?? "default"),
-        src: props.url ?? props.src,
+        src: props.src,
         children: props.children
       }
     );
@@ -125,7 +125,7 @@ function RemoteComponent(props) {
       name: props.name,
       reset: props.reset,
       shared: shared(props.bundle ?? "default"),
-      src: props.url ?? props.src,
+      src: props.src,
       children: remoteComponent
     }
   );
@@ -137,12 +137,11 @@ async function getRemoteComponentProps(src, headers) {
     );
   }
   const {
-    metadata: { bundle, route, runtime },
+    metadata: { bundle, route },
     name,
     links,
     component,
     nextData,
-    url,
     remoteShared
   } = await fetchRemoteComponent(
     src,
@@ -167,10 +166,7 @@ async function getRemoteComponentProps(src, headers) {
     src,
     bundle,
     name,
-    route,
-    runtime,
-    buildId: nextData?.buildId ?? null,
-    url: url.href
+    route
   };
   const key = getKey(props);
   if (nextData?.buildId !== "development") {

package/dist/next/host/pages-router-server.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/next/host/pages-router-server.tsx"],"sourcesContent":["import type { IncomingHttpHeaders } from 'node:http';\nimport * as Form from 'next/form';\nimport * as Image from 'next/image';\nimport * as Link from 'next/link';\nimport * as Router from 'next/router';\nimport * as Script from 'next/script';\nimport { useEffect } from 'react';\nimport { shared as _shared } from 'remote-components/shared/host/pages';\nimport { RemoteComponentsError } from '#internal/shared/client/remote-component';\nimport { fetchRemoteComponent } from '#internal/shared/ssr/fetch-remote-component';\nimport { RemoteComponent as RemoteComponentReact } from '#remote-components/react/index';\n\nconst navigationImpl = {\n  useRouter: () => Router.useRouter(),\n  useSearchParams: () => {\n    const router = Router.useRouter();\n    return {\n      get: (key: string) => router.query[key],\n      has: (key: string) => key in router.query,\n    };\n  },\n};\n\nconst sharedCache = new Map<string, Record<string, () => Promise<unknown>>>();\nconst shared = (bundle: string) => {\n  if (sharedCache.has(bundle)) {\n    return sharedCache.get(bundle);\n  }\n\n  const remoteLoader = ({ src, width, quality }: Image.ImageLoaderProps) => {\n    const self = globalThis as typeof globalThis & {\n      __remote_bundle_url__?: Record<string, URL>;\n    };\n    const { assetPrefix } =\n      /^(?<assetPrefix>.*?)\\/_next\\//.exec(src)?.groups ?? {};\n    return `${self.__remote_bundle_url__?.[bundle]?.origin ?? ''}${assetPrefix}/_next/image?url=${encodeURIComponent(src)}&w=${width}&q=${quality || 75}`;\n  };\n\n  const imageImpl = (ImageComponent: typeof Image.default) => {\n    function RemoteImage(props: Image.ImageProps) {\n      return <ImageComponent loader={remoteLoader} {...props} />;\n    }\n    RemoteImage.default = RemoteImage;\n    RemoteImage.getImageProps = Image.getImageProps;\n    return RemoteImage;\n  };\n\n  return {\n    // polyfill Next.js App Router client API (minimal)\n    // some API methods are not available when using a Next.js Pages Router application as host\n    'next/navigation': () =>\n      Promise.resolve(navigationImpl) as Promise<unknown>,\n    'next/dist/client/components/navigation': () =>\n      Promise.resolve(navigationImpl) as Promise<unknown>,\n    'next/dist/client/app-dir/link': () =>\n      Promise.resolve(Link.default) as Promise<unknown>,\n    'next/link': () => Promise.resolve(Link.default) as Promise<unknown>,\n    'next/dist/client/app-dir/form': () =>\n      Promise.resolve(Form.default) as Promise<unknown>,\n    'next/form': () => Promise.resolve(Form.default) as Promise<unknown>,\n    'next/dist/client/script': () =>\n      Promise.resolve(Script.default) as Promise<unknown>,\n    'next/script': () => Promise.resolve(Script.default) as Promise<unknown>,\n    'next/dist/client/image-component': () =>\n      Promise.resolve({\n        // @ts-expect-error default.default\n        // eslint-disable-next-line\n        Image: imageImpl(Image.default.default ?? Image.default),\n      }) as Promise<unknown>,\n    'next/dist/api/image': () =>\n      Promise.resolve({\n        // @ts-expect-error default.default\n        // eslint-disable-next-line\n        default: imageImpl(Image.default.default ?? Image.default),\n        getImageProps: Image.getImageProps,\n      }) as Promise<unknown>,\n    'next/router': () => Promise.resolve(Router) as Promise<unknown>,\n    ..._shared,\n    // always override next/image to use the remote loader\n    'next/image': () =>\n      Promise.resolve(\n        // @ts-expect-error default.default\n        // eslint-disable-next-line\n        imageImpl(Image.default.default ?? Image.default),\n      ) as Promise<unknown>,\n  };\n};\n\n// internal symbols to access global store\nconst REMOTE_COMPONENT_STORE = Symbol('REMOTE_COMPONENT_STORE');\nconst REMOTE_COMPONENT_KEY = '__REMOTE_COMPONENT_KEY__';\n\n// temporary global store for remote component HTML\n// the store is used to save the HTML of remote components for SSR without sending the content to the client\nconst self = globalThis as typeof globalThis & {\n  [REMOTE_COMPONENT_STORE]?: Map<string, React.ReactNode>;\n};\n\nfunction getKey({\n  bundle,\n  route,\n  name,\n}: {\n  bundle?: string;\n  route?: string;\n  name?: string;\n}): string {\n  return `${bundle ?? '__next'}:${route ?? '/'}:${name ?? '__vercel_remote_component'}__${crypto.randomUUID()}`;\n}\n\nfunction setComponent(key: string, component: React.ReactNode): void {\n  if (!self[REMOTE_COMPONENT_STORE]) {\n    self[REMOTE_COMPONENT_STORE] = new Map();\n  }\n  self[REMOTE_COMPONENT_STORE].set(key, component);\n}\n\nfunction getComponent(key: string): React.ReactNode | undefined {\n  const component = self[REMOTE_COMPONENT_STORE]?.get(key);\n  // remove the component from the store after retrieving it to prevent memory leaks\n  // storing the HTML in the global store is only needed for SSR and it's temporary only used for a single render\n  self[REMOTE_COMPONENT_STORE]?.delete(key);\n  return component;\n}\n\nexport interface RemoteComponentProps {\n  src: string;\n  url?: string | URL;\n  bundle?: string;\n  route?: string;\n  name?: string;\n  isolate?: boolean;\n  mode?: 'open' | 'closed';\n  reset?: boolean;\n  additionalHeaders?: Headers | Record<string, string>;\n  [REMOTE_COMPONENT_KEY]?: string;\n  children?: React.ReactNode;\n}\n\n/**\n * This component handles the rendering of remote microfrontends.\n *\n * @param props - The properties for the remote component.\n * @returns A React component that renders the remote component.\n */\nexport function RemoteComponent(props: RemoteComponentProps) {\n  const remoteComponent =\n    typeof document !== 'undefined'\n      ? null\n      : // retrieve the HTML from the global store\n        getComponent(\n          props[REMOTE_COMPONENT_KEY] ?? '__vercel_remote_component',\n        );\n\n  useEffect(() => {\n    const clientSelf = globalThis as typeof globalThis & {\n      __remote_component_shared__?: Record<string, () => Promise<unknown>>;\n    };\n    // eslint-disable-next-line camelcase\n    clientSelf.__remote_component_shared__ = shared(props.bundle ?? 'default');\n  }, [props.bundle]);\n\n  if (!props[REMOTE_COMPONENT_KEY]) {\n    return (\n      <RemoteComponentReact\n        additionalHeaders={props.additionalHeaders}\n        isolate={props.isolate}\n        mode={props.mode}\n        name={props.name}\n        reset={props.reset}\n        shared={shared(props.bundle ?? 'default')}\n        src={props.url ?? props.src}\n      >\n        {props.children}\n      </RemoteComponentReact>\n    );\n  }\n\n  return (\n    <RemoteComponentReact\n      additionalHeaders={props.additionalHeaders}\n      isolate={props.isolate}\n      mode={props.mode}\n      name={props.name}\n      reset={props.reset}\n      shared={shared(props.bundle ?? 'default')}\n      src={props.url ?? props.src}\n    >\n      {remoteComponent}\n    </RemoteComponentReact>\n  );\n}\n\n/**\n * Fetches the remote component properties from the server. You need to pass these properties to the `<RemoteComponent>` component to render the fetched remote component.\n *\n * @param src - The source URL of the remote component. When using the Vercel Microfrontends solution, you can use relative paths, e.g. `/nextjs-app-remote/components/header`. Absolute URLs are also supported.\n * @param headers - The HTTP headers used for supporting the Vercel Microfrontends proxy.\n * @returns The properties of the remote component.\n *\n * @example\n *\n * ```tsx\n * import { getRemoteComponentProps } from 'remote-components/next/host/pages';\n * import type { GetServerSideProps } from 'next';\n *\n * export const getServerSideProps: GetServerSideProps<PageProps> = async function getServerSideProps({ req }) {\n *   const myRemoteComponent = await getRemoteComponentProps(\n *     '/nextjs-app-remote/components/header',\n *     req.headers,\n *   );\n *   return {\n *     props: {\n *       remoteComponents: {\n *         myRemoteComponent,\n *       },\n *     },\n *   };\n * }\n * ```\n */\nexport async function getRemoteComponentProps(\n  src: string,\n  headers: IncomingHttpHeaders,\n): Promise<RemoteComponentProps> {\n  if (typeof document !== 'undefined') {\n    throw new RemoteComponentsError(\n      '`getRemoteComponentProps()` can only be used on the server side.',\n    );\n  }\n\n  const {\n    metadata: { bundle, route, runtime },\n    name,\n    links,\n    component,\n    nextData,\n    url,\n    remoteShared,\n  } = await fetchRemoteComponent(\n    src,\n    headers instanceof Headers\n      ? headers\n      : // convert IncomingHttpHeaders to web standard Headers\n        Object.entries(headers).reduce((acc, [key, value]) => {\n          if (value) {\n            if (Array.isArray(value)) {\n              value.forEach((v) => acc.append(key, v));\n            } else {\n              acc.append(key, value);\n            }\n          }\n          return acc;\n        }, new Headers()),\n    {\n      rsc: true,\n    },\n  );\n\n  const props = {\n    src,\n    bundle,\n    name,\n    route,\n    runtime,\n    buildId: nextData?.buildId ?? null,\n    url: url.href,\n  };\n\n  const key = getKey(props);\n\n  // do not render the HTML in development mode when remote is using Next.js Pages Router\n  // this behavior is emulating the Next.js Pages Router FOUC as the styles are only applied on the client when running in development mode\n  if (nextData?.buildId !== 'development') {\n    // store the HTML in a global store\n    setComponent(\n      key,\n      <>\n        <script\n          data-remote-components-shared=\"\"\n          id={`${name}_shared`}\n          type=\"application/json\"\n        >\n          {JSON.stringify(remoteShared)}\n        </script>\n        {links.map((link) => (\n          <link\n            key={`${link.as}_${link.href}`}\n            {...link}\n            precedence={undefined}\n          />\n        ))}\n        {component}\n      </>,\n    );\n  }\n\n  return {\n    ...props,\n    // add remote component key to the props\n    [REMOTE_COMPONENT_KEY]: key,\n  };\n}\n"],"mappings":"AAwCa,SA6OP,UA7OO,KA6OP,YA7OO;AAvCb,YAAY,UAAU;AACtB,YAAY,WAAW;AACvB,YAAY,UAAU;AACtB,YAAY,YAAY;AACxB,YAAY,YAAY;AACxB,SAAS,iBAAiB;AAC1B,SAAS,UAAU,eAAe;AAClC,SAAS,6BAA6B;AACtC,SAAS,4BAA4B;AACrC,SAAS,mBAAmB,4BAA4B;AAExD,MAAM,iBAAiB;AAAA,EACrB,WAAW,MAAM,OAAO,UAAU;AAAA,EAClC,iBAAiB,MAAM;AACrB,UAAM,SAAS,OAAO,UAAU;AAChC,WAAO;AAAA,MACL,KAAK,CAAC,QAAgB,OAAO,MAAM,GAAG;AAAA,MACtC,KAAK,CAAC,QAAgB,OAAO,OAAO;AAAA,IACtC;AAAA,EACF;AACF;AAEA,MAAM,cAAc,oBAAI,IAAoD;AAC5E,MAAM,SAAS,CAAC,WAAmB;AACjC,MAAI,YAAY,IAAI,MAAM,GAAG;AAC3B,WAAO,YAAY,IAAI,MAAM;AAAA,EAC/B;AAEA,QAAM,eAAe,CAAC,EAAE,KAAK,OAAO,QAAQ,MAA8B;AACxE,UAAMA,QAAO;AAGb,UAAM,EAAE,YAAY,IAClB,gCAAgC,KAAK,GAAG,GAAG,UAAU,CAAC;AACxD,WAAO,GAAGA,MAAK,wBAAwB,MAAM,GAAG,UAAU,KAAK,+BAA+B,mBAAmB,GAAG,OAAO,WAAW,WAAW;AAAA,EACnJ;AAEA,QAAM,YAAY,CAAC,mBAAyC;AAC1D,aAAS,YAAY,OAAyB;AAC5C,aAAO,oBAAC,kBAAe,QAAQ,cAAe,GAAG,OAAO;AAAA,IAC1D;AACA,gBAAY,UAAU;AACtB,gBAAY,gBAAgB,MAAM;AAClC,WAAO;AAAA,EACT;AAEA,SAAO;AAAA;AAAA;AAAA,IAGL,mBAAmB,MACjB,QAAQ,QAAQ,cAAc;AAAA,IAChC,0CAA0C,MACxC,QAAQ,QAAQ,cAAc;AAAA,IAChC,iCAAiC,MAC/B,QAAQ,QAAQ,KAAK,OAAO;AAAA,IAC9B,aAAa,MAAM,QAAQ,QAAQ,KAAK,OAAO;AAAA,IAC/C,iCAAiC,MAC/B,QAAQ,QAAQ,KAAK,OAAO;AAAA,IAC9B,aAAa,MAAM,QAAQ,QAAQ,KAAK,OAAO;AAAA,IAC/C,2BAA2B,MACzB,QAAQ,QAAQ,OAAO,OAAO;AAAA,IAChC,eAAe,MAAM,QAAQ,QAAQ,OAAO,OAAO;AAAA,IACnD,oCAAoC,MAClC,QAAQ,QAAQ;AAAA;AAAA;AAAA,MAGd,OAAO,UAAU,MAAM,QAAQ,WAAW,MAAM,OAAO;AAAA,IACzD,CAAC;AAAA,IACH,uBAAuB,MACrB,QAAQ,QAAQ;AAAA;AAAA;AAAA,MAGd,SAAS,UAAU,MAAM,QAAQ,WAAW,MAAM,OAAO;AAAA,MACzD,eAAe,MAAM;AAAA,IACvB,CAAC;AAAA,IACH,eAAe,MAAM,QAAQ,QAAQ,MAAM;AAAA,IAC3C,GAAG;AAAA;AAAA,IAEH,cAAc,MACZ,QAAQ;AAAA;AAAA;AAAA,MAGN,UAAU,MAAM,QAAQ,WAAW,MAAM,OAAO;AAAA,IAClD;AAAA,EACJ;AACF;AAGA,MAAM,yBAAyB,OAAO,wBAAwB;AAC9D,MAAM,uBAAuB;AAI7B,MAAM,OAAO;AAIb,SAAS,OAAO;AAAA,EACd;AAAA,EACA;AAAA,EACA;AACF,GAIW;AACT,SAAO,GAAG,UAAU,YAAY,SAAS,OAAO,QAAQ,gCAAgC,OAAO,WAAW;AAC5G;AAEA,SAAS,aAAa,KAAa,WAAkC;AACnE,MAAI,CAAC,KAAK,sBAAsB,GAAG;AACjC,SAAK,sBAAsB,IAAI,oBAAI,IAAI;AAAA,EACzC;AACA,OAAK,sBAAsB,EAAE,IAAI,KAAK,SAAS;AACjD;AAEA,SAAS,aAAa,KAA0C;AAC9D,QAAM,YAAY,KAAK,sBAAsB,GAAG,IAAI,GAAG;AAGvD,OAAK,sBAAsB,GAAG,OAAO,GAAG;AACxC,SAAO;AACT;AAsBO,SAAS,gBAAgB,OAA6B;AAC3D,QAAM,kBACJ,OAAO,aAAa,cAChB;AAAA;AAAA,IAEA;AAAA,MACE,MAAM,oBAAoB,KAAK;AAAA,IACjC;AAAA;AAEN,YAAU,MAAM;AACd,UAAM,aAAa;AAInB,eAAW,8BAA8B,OAAO,MAAM,UAAU,SAAS;AAAA,EAC3E,GAAG,CAAC,MAAM,MAAM,CAAC;AAEjB,MAAI,CAAC,MAAM,oBAAoB,GAAG;AAChC,WACE;AAAA,MAAC;AAAA;AAAA,QACC,mBAAmB,MAAM;AAAA,QACzB,SAAS,MAAM;AAAA,QACf,MAAM,MAAM;AAAA,QACZ,MAAM,MAAM;AAAA,QACZ,OAAO,MAAM;AAAA,QACb,QAAQ,OAAO,MAAM,UAAU,SAAS;AAAA,QACxC,KAAK,MAAM,OAAO,MAAM;AAAA,QAEvB,gBAAM;AAAA;AAAA,IACT;AAAA,EAEJ;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,mBAAmB,MAAM;AAAA,MACzB,SAAS,MAAM;AAAA,MACf,MAAM,MAAM;AAAA,MACZ,MAAM,MAAM;AAAA,MACZ,OAAO,MAAM;AAAA,MACb,QAAQ,OAAO,MAAM,UAAU,SAAS;AAAA,MACxC,KAAK,MAAM,OAAO,MAAM;AAAA,MAEvB;AAAA;AAAA,EACH;AAEJ;AA8BA,eAAsB,wBACpB,KACA,SAC+B;AAC/B,MAAI,OAAO,aAAa,aAAa;AACnC,UAAM,IAAI;AAAA,MACR;AAAA,IACF;AAAA,EACF;AAEA,QAAM;AAAA,IACJ,UAAU,EAAE,QAAQ,OAAO,QAAQ;AAAA,IACnC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,MAAM;AAAA,IACR;AAAA,IACA,mBAAmB,UACf;AAAA;AAAA,MAEA,OAAO,QAAQ,OAAO,EAAE,OAAO,CAAC,KAAK,CAACC,MAAK,KAAK,MAAM;AACpD,YAAI,OAAO;AACT,cAAI,MAAM,QAAQ,KAAK,GAAG;AACxB,kBAAM,QAAQ,CAAC,MAAM,IAAI,OAAOA,MAAK,CAAC,CAAC;AAAA,UACzC,OAAO;AACL,gBAAI,OAAOA,MAAK,KAAK;AAAA,UACvB;AAAA,QACF;AACA,eAAO;AAAA,MACT,GAAG,IAAI,QAAQ,CAAC;AAAA;AAAA,IACpB;AAAA,MACE,KAAK;AAAA,IACP;AAAA,EACF;AAEA,QAAM,QAAQ;AAAA,IACZ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,SAAS,UAAU,WAAW;AAAA,IAC9B,KAAK,IAAI;AAAA,EACX;AAEA,QAAM,MAAM,OAAO,KAAK;AAIxB,MAAI,UAAU,YAAY,eAAe;AAEvC;AAAA,MACE;AAAA,MACA,iCACE;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,iCAA8B;AAAA,YAC9B,IAAI,GAAG;AAAA,YACP,MAAK;AAAA,YAEJ,eAAK,UAAU,YAAY;AAAA;AAAA,QAC9B;AAAA,QACC,MAAM,IAAI,CAAC,SACV;AAAA,UAAC;AAAA;AAAA,YAEE,GAAG;AAAA,YACJ,YAAY;AAAA;AAAA,UAFP,GAAG,KAAK,MAAM,KAAK;AAAA,QAG1B,CACD;AAAA,QACA;AAAA,SACH;AAAA,IACF;AAAA,EACF;AAEA,SAAO;AAAA,IACL,GAAG;AAAA;AAAA,IAEH,CAAC,oBAAoB,GAAG;AAAA,EAC1B;AACF;","names":["self","key"]}
+{"version":3,"sources":["../../../src/next/host/pages-router-server.tsx"],"sourcesContent":["import type { IncomingHttpHeaders } from 'node:http';\nimport * as Form from 'next/form';\nimport * as Image from 'next/image';\nimport * as Link from 'next/link';\nimport * as Router from 'next/router';\nimport * as Script from 'next/script';\nimport { useEffect } from 'react';\nimport { shared as _shared } from 'remote-components/shared/host/pages';\nimport { RemoteComponentsError } from '#internal/shared/client/remote-component';\nimport { fetchRemoteComponent } from '#internal/shared/ssr/fetch-remote-component';\nimport { RemoteComponent as RemoteComponentReact } from '#remote-components/react/index';\n\nconst navigationImpl = {\n  useRouter: () => Router.useRouter(),\n  useSearchParams: () => {\n    const router = Router.useRouter();\n    return {\n      get: (key: string) => router.query[key],\n      has: (key: string) => key in router.query,\n    };\n  },\n};\n\nconst sharedCache = new Map<string, Record<string, () => Promise<unknown>>>();\nconst shared = (bundle: string) => {\n  if (sharedCache.has(bundle)) {\n    return sharedCache.get(bundle);\n  }\n\n  const remoteLoader = ({ src, width, quality }: Image.ImageLoaderProps) => {\n    const self = globalThis as typeof globalThis & {\n      __remote_bundle_url__?: Record<string, URL>;\n    };\n    const { assetPrefix } =\n      /^(?<assetPrefix>.*?)\\/_next\\//.exec(src)?.groups ?? {};\n    return `${\n      self.__remote_bundle_url__?.[bundle]?.origin ?? ''\n    }${assetPrefix}/_next/image?url=${encodeURIComponent(src)}&w=${width}&q=${\n      quality || 75\n    }`;\n  };\n\n  const imageImpl = (ImageComponent: typeof Image.default) => {\n    function RemoteImage(props: Image.ImageProps) {\n      return <ImageComponent loader={remoteLoader} {...props} />;\n    }\n    RemoteImage.default = RemoteImage;\n    RemoteImage.getImageProps = Image.getImageProps;\n    return RemoteImage;\n  };\n\n  return {\n    // polyfill Next.js App Router client API (minimal)\n    // some API methods are not available when using a Next.js Pages Router application as host\n    'next/navigation': () =>\n      Promise.resolve(navigationImpl) as Promise<unknown>,\n    'next/dist/client/components/navigation': () =>\n      Promise.resolve(navigationImpl) as Promise<unknown>,\n    'next/dist/client/app-dir/link': () =>\n      Promise.resolve(Link.default) as Promise<unknown>,\n    'next/link': () => Promise.resolve(Link.default) as Promise<unknown>,\n    'next/dist/client/app-dir/form': () =>\n      Promise.resolve(Form.default) as Promise<unknown>,\n    'next/form': () => Promise.resolve(Form.default) as Promise<unknown>,\n    'next/dist/client/script': () =>\n      Promise.resolve(Script.default) as Promise<unknown>,\n    'next/script': () => Promise.resolve(Script.default) as Promise<unknown>,\n    'next/dist/client/image-component': () =>\n      Promise.resolve({\n        // @ts-expect-error default.default\n        // eslint-disable-next-line\n        Image: imageImpl(Image.default.default ?? Image.default),\n      }) as Promise<unknown>,\n    'next/dist/api/image': () =>\n      Promise.resolve({\n        // @ts-expect-error default.default\n        // eslint-disable-next-line\n        default: imageImpl(Image.default.default ?? Image.default),\n        getImageProps: Image.getImageProps,\n      }) as Promise<unknown>,\n    'next/router': () => Promise.resolve(Router) as Promise<unknown>,\n    ..._shared,\n    // always override next/image to use the remote loader\n    'next/image': () =>\n      Promise.resolve(\n        // @ts-expect-error default.default\n        // eslint-disable-next-line\n        imageImpl(Image.default.default ?? Image.default),\n      ) as Promise<unknown>,\n  };\n};\n\n// internal symbols to access global store\nconst REMOTE_COMPONENT_STORE = Symbol('REMOTE_COMPONENT_STORE');\nconst REMOTE_COMPONENT_KEY = '__REMOTE_COMPONENT_KEY__';\n\n// temporary global store for remote component HTML\n// the store is used to save the HTML of remote components for SSR without sending the content to the client\nconst self = globalThis as typeof globalThis & {\n  [REMOTE_COMPONENT_STORE]?: Map<string, React.ReactNode>;\n};\n\nfunction getKey({\n  bundle,\n  route,\n  name,\n}: {\n  bundle?: string;\n  route?: string;\n  name?: string;\n}): string {\n  return `${bundle ?? '__next'}:${route ?? '/'}:${\n    name ?? '__vercel_remote_component'\n  }__${crypto.randomUUID()}`;\n}\n\nfunction setComponent(key: string, component: React.ReactNode): void {\n  if (!self[REMOTE_COMPONENT_STORE]) {\n    self[REMOTE_COMPONENT_STORE] = new Map();\n  }\n  self[REMOTE_COMPONENT_STORE].set(key, component);\n}\n\nfunction getComponent(key: string): React.ReactNode | undefined {\n  const component = self[REMOTE_COMPONENT_STORE]?.get(key);\n  // remove the component from the store after retrieving it to prevent memory leaks\n  // storing the HTML in the global store is only needed for SSR and it's temporary only used for a single render\n  self[REMOTE_COMPONENT_STORE]?.delete(key);\n  return component;\n}\n\nexport interface RemoteComponentProps {\n  src: string;\n  bundle?: string;\n  route?: string;\n  name?: string;\n  isolate?: boolean;\n  mode?: 'open' | 'closed';\n  reset?: boolean;\n  additionalHeaders?: Headers | Record<string, string>;\n  [REMOTE_COMPONENT_KEY]?: string;\n  children?: React.ReactNode;\n}\n\n/**\n * This component handles the rendering of remote microfrontends.\n *\n * @param props - The properties for the remote component.\n * @returns A React component that renders the remote component.\n */\nexport function RemoteComponent(props: RemoteComponentProps) {\n  const remoteComponent =\n    typeof document !== 'undefined'\n      ? null\n      : // retrieve the HTML from the global store\n        getComponent(\n          props[REMOTE_COMPONENT_KEY] ?? '__vercel_remote_component',\n        );\n\n  useEffect(() => {\n    const clientSelf = globalThis as typeof globalThis & {\n      __remote_component_shared__?: Record<string, () => Promise<unknown>>;\n    };\n    // eslint-disable-next-line camelcase\n    clientSelf.__remote_component_shared__ = shared(props.bundle ?? 'default');\n  }, [props.bundle]);\n\n  if (!props[REMOTE_COMPONENT_KEY]) {\n    return (\n      <RemoteComponentReact\n        additionalHeaders={props.additionalHeaders}\n        isolate={props.isolate}\n        mode={props.mode}\n        name={props.name}\n        reset={props.reset}\n        shared={shared(props.bundle ?? 'default')}\n        src={props.src}\n      >\n        {props.children}\n      </RemoteComponentReact>\n    );\n  }\n\n  return (\n    <RemoteComponentReact\n      additionalHeaders={props.additionalHeaders}\n      isolate={props.isolate}\n      mode={props.mode}\n      name={props.name}\n      reset={props.reset}\n      shared={shared(props.bundle ?? 'default')}\n      src={props.src}\n    >\n      {remoteComponent}\n    </RemoteComponentReact>\n  );\n}\n\n/**\n * Fetches the remote component properties from the server. You need to pass these properties to the `<RemoteComponent>` component to render the fetched remote component.\n *\n * @param src - The source URL of the remote component. When using the Vercel Microfrontends solution, you can use relative paths, e.g. `/nextjs-app-remote/components/header`. Absolute URLs are also supported.\n * @param headers - The HTTP headers used for supporting the Vercel Microfrontends proxy.\n * @returns The properties of the remote component.\n *\n * @example\n *\n * ```tsx\n * import { getRemoteComponentProps } from 'remote-components/next/host/pages';\n * import type { GetServerSideProps } from 'next';\n *\n * export const getServerSideProps: GetServerSideProps<PageProps> = async function getServerSideProps({ req }) {\n *   const myRemoteComponent = await getRemoteComponentProps(\n *     '/nextjs-app-remote/components/header',\n *     req.headers,\n *   );\n *   return {\n *     props: {\n *       remoteComponents: {\n *         myRemoteComponent,\n *       },\n *     },\n *   };\n * }\n * ```\n */\nexport async function getRemoteComponentProps(\n  src: string,\n  headers: IncomingHttpHeaders,\n): Promise<RemoteComponentProps> {\n  if (typeof document !== 'undefined') {\n    throw new RemoteComponentsError(\n      '`getRemoteComponentProps()` can only be used on the server side.',\n    );\n  }\n\n  const {\n    metadata: { bundle, route },\n    name,\n    links,\n    component,\n    nextData,\n    remoteShared,\n  } = await fetchRemoteComponent(\n    src,\n    headers instanceof Headers\n      ? headers\n      : // convert IncomingHttpHeaders to web standard Headers\n        Object.entries(headers).reduce((acc, [key, value]) => {\n          if (value) {\n            if (Array.isArray(value)) {\n              value.forEach((v) => acc.append(key, v));\n            } else {\n              acc.append(key, value);\n            }\n          }\n          return acc;\n        }, new Headers()),\n    {\n      rsc: true,\n    },\n  );\n\n  const props: RemoteComponentProps = {\n    src,\n    bundle,\n    name,\n    route,\n  };\n\n  const key = getKey(props);\n\n  // do not render the HTML in development mode when remote is using Next.js Pages Router\n  // this behavior is emulating the Next.js Pages Router FOUC as the styles are only applied on the client when running in development mode\n  if (nextData?.buildId !== 'development') {\n    // store the HTML in a global store\n    setComponent(\n      key,\n      <>\n        <script\n          data-remote-components-shared=\"\"\n          id={`${name}_shared`}\n          type=\"application/json\"\n        >\n          {JSON.stringify(remoteShared)}\n        </script>\n        {links.map((link) => (\n          <link\n            key={`${link.as}_${link.href}`}\n            {...link}\n            precedence={undefined}\n          />\n        ))}\n        {component}\n      </>,\n    );\n  }\n\n  return {\n    ...props,\n    // add remote component key to the props\n    [REMOTE_COMPONENT_KEY]: key,\n  };\n}\n"],"mappings":"AA4Ca,SA0OP,UA1OO,KA0OP,YA1OO;AA3Cb,YAAY,UAAU;AACtB,YAAY,WAAW;AACvB,YAAY,UAAU;AACtB,YAAY,YAAY;AACxB,YAAY,YAAY;AACxB,SAAS,iBAAiB;AAC1B,SAAS,UAAU,eAAe;AAClC,SAAS,6BAA6B;AACtC,SAAS,4BAA4B;AACrC,SAAS,mBAAmB,4BAA4B;AAExD,MAAM,iBAAiB;AAAA,EACrB,WAAW,MAAM,OAAO,UAAU;AAAA,EAClC,iBAAiB,MAAM;AACrB,UAAM,SAAS,OAAO,UAAU;AAChC,WAAO;AAAA,MACL,KAAK,CAAC,QAAgB,OAAO,MAAM,GAAG;AAAA,MACtC,KAAK,CAAC,QAAgB,OAAO,OAAO;AAAA,IACtC;AAAA,EACF;AACF;AAEA,MAAM,cAAc,oBAAI,IAAoD;AAC5E,MAAM,SAAS,CAAC,WAAmB;AACjC,MAAI,YAAY,IAAI,MAAM,GAAG;AAC3B,WAAO,YAAY,IAAI,MAAM;AAAA,EAC/B;AAEA,QAAM,eAAe,CAAC,EAAE,KAAK,OAAO,QAAQ,MAA8B;AACxE,UAAMA,QAAO;AAGb,UAAM,EAAE,YAAY,IAClB,gCAAgC,KAAK,GAAG,GAAG,UAAU,CAAC;AACxD,WAAO,GACLA,MAAK,wBAAwB,MAAM,GAAG,UAAU,KAC/C,+BAA+B,mBAAmB,GAAG,OAAO,WAC7D,WAAW;AAAA,EAEf;AAEA,QAAM,YAAY,CAAC,mBAAyC;AAC1D,aAAS,YAAY,OAAyB;AAC5C,aAAO,oBAAC,kBAAe,QAAQ,cAAe,GAAG,OAAO;AAAA,IAC1D;AACA,gBAAY,UAAU;AACtB,gBAAY,gBAAgB,MAAM;AAClC,WAAO;AAAA,EACT;AAEA,SAAO;AAAA;AAAA;AAAA,IAGL,mBAAmB,MACjB,QAAQ,QAAQ,cAAc;AAAA,IAChC,0CAA0C,MACxC,QAAQ,QAAQ,cAAc;AAAA,IAChC,iCAAiC,MAC/B,QAAQ,QAAQ,KAAK,OAAO;AAAA,IAC9B,aAAa,MAAM,QAAQ,QAAQ,KAAK,OAAO;AAAA,IAC/C,iCAAiC,MAC/B,QAAQ,QAAQ,KAAK,OAAO;AAAA,IAC9B,aAAa,MAAM,QAAQ,QAAQ,KAAK,OAAO;AAAA,IAC/C,2BAA2B,MACzB,QAAQ,QAAQ,OAAO,OAAO;AAAA,IAChC,eAAe,MAAM,QAAQ,QAAQ,OAAO,OAAO;AAAA,IACnD,oCAAoC,MAClC,QAAQ,QAAQ;AAAA;AAAA;AAAA,MAGd,OAAO,UAAU,MAAM,QAAQ,WAAW,MAAM,OAAO;AAAA,IACzD,CAAC;AAAA,IACH,uBAAuB,MACrB,QAAQ,QAAQ;AAAA;AAAA;AAAA,MAGd,SAAS,UAAU,MAAM,QAAQ,WAAW,MAAM,OAAO;AAAA,MACzD,eAAe,MAAM;AAAA,IACvB,CAAC;AAAA,IACH,eAAe,MAAM,QAAQ,QAAQ,MAAM;AAAA,IAC3C,GAAG;AAAA;AAAA,IAEH,cAAc,MACZ,QAAQ;AAAA;AAAA;AAAA,MAGN,UAAU,MAAM,QAAQ,WAAW,MAAM,OAAO;AAAA,IAClD;AAAA,EACJ;AACF;AAGA,MAAM,yBAAyB,OAAO,wBAAwB;AAC9D,MAAM,uBAAuB;AAI7B,MAAM,OAAO;AAIb,SAAS,OAAO;AAAA,EACd;AAAA,EACA;AAAA,EACA;AACF,GAIW;AACT,SAAO,GAAG,UAAU,YAAY,SAAS,OACvC,QAAQ,gCACL,OAAO,WAAW;AACzB;AAEA,SAAS,aAAa,KAAa,WAAkC;AACnE,MAAI,CAAC,KAAK,sBAAsB,GAAG;AACjC,SAAK,sBAAsB,IAAI,oBAAI,IAAI;AAAA,EACzC;AACA,OAAK,sBAAsB,EAAE,IAAI,KAAK,SAAS;AACjD;AAEA,SAAS,aAAa,KAA0C;AAC9D,QAAM,YAAY,KAAK,sBAAsB,GAAG,IAAI,GAAG;AAGvD,OAAK,sBAAsB,GAAG,OAAO,GAAG;AACxC,SAAO;AACT;AAqBO,SAAS,gBAAgB,OAA6B;AAC3D,QAAM,kBACJ,OAAO,aAAa,cAChB;AAAA;AAAA,IAEA;AAAA,MACE,MAAM,oBAAoB,KAAK;AAAA,IACjC;AAAA;AAEN,YAAU,MAAM;AACd,UAAM,aAAa;AAInB,eAAW,8BAA8B,OAAO,MAAM,UAAU,SAAS;AAAA,EAC3E,GAAG,CAAC,MAAM,MAAM,CAAC;AAEjB,MAAI,CAAC,MAAM,oBAAoB,GAAG;AAChC,WACE;AAAA,MAAC;AAAA;AAAA,QACC,mBAAmB,MAAM;AAAA,QACzB,SAAS,MAAM;AAAA,QACf,MAAM,MAAM;AAAA,QACZ,MAAM,MAAM;AAAA,QACZ,OAAO,MAAM;AAAA,QACb,QAAQ,OAAO,MAAM,UAAU,SAAS;AAAA,QACxC,KAAK,MAAM;AAAA,QAEV,gBAAM;AAAA;AAAA,IACT;AAAA,EAEJ;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,mBAAmB,MAAM;AAAA,MACzB,SAAS,MAAM;AAAA,MACf,MAAM,MAAM;AAAA,MACZ,MAAM,MAAM;AAAA,MACZ,OAAO,MAAM;AAAA,MACb,QAAQ,OAAO,MAAM,UAAU,SAAS;AAAA,MACxC,KAAK,MAAM;AAAA,MAEV;AAAA;AAAA,EACH;AAEJ;AA8BA,eAAsB,wBACpB,KACA,SAC+B;AAC/B,MAAI,OAAO,aAAa,aAAa;AACnC,UAAM,IAAI;AAAA,MACR;AAAA,IACF;AAAA,EACF;AAEA,QAAM;AAAA,IACJ,UAAU,EAAE,QAAQ,MAAM;AAAA,IAC1B;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,MAAM;AAAA,IACR;AAAA,IACA,mBAAmB,UACf;AAAA;AAAA,MAEA,OAAO,QAAQ,OAAO,EAAE,OAAO,CAAC,KAAK,CAACC,MAAK,KAAK,MAAM;AACpD,YAAI,OAAO;AACT,cAAI,MAAM,QAAQ,KAAK,GAAG;AACxB,kBAAM,QAAQ,CAAC,MAAM,IAAI,OAAOA,MAAK,CAAC,CAAC;AAAA,UACzC,OAAO;AACL,gBAAI,OAAOA,MAAK,KAAK;AAAA,UACvB;AAAA,QACF;AACA,eAAO;AAAA,MACT,GAAG,IAAI,QAAQ,CAAC;AAAA;AAAA,IACpB;AAAA,MACE,KAAK;AAAA,IACP;AAAA,EACF;AAEA,QAAM,QAA8B;AAAA,IAClC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AAEA,QAAM,MAAM,OAAO,KAAK;AAIxB,MAAI,UAAU,YAAY,eAAe;AAEvC;AAAA,MACE;AAAA,MACA,iCACE;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,iCAA8B;AAAA,YAC9B,IAAI,GAAG;AAAA,YACP,MAAK;AAAA,YAEJ,eAAK,UAAU,YAAY;AAAA;AAAA,QAC9B;AAAA,QACC,MAAM,IAAI,CAAC,SACV;AAAA,UAAC;AAAA;AAAA,YAEE,GAAG;AAAA,YACJ,YAAY;AAAA;AAAA,UAFP,GAAG,KAAK,MAAM,KAAK;AAAA,QAG1B,CACD;AAAA,QACA;AAAA,SACH;AAAA,IACF;AAAA,EACF;AAEA,SAAO;AAAA,IACL,GAAG;AAAA;AAAA,IAEH,CAAC,oBAAoB,GAAG;AAAA,EAC1B;AACF;","names":["self","key"]}

package/dist/react/index.cjs

@@ -33,6 +33,7 @@ var import_polyfill = require("#internal/shared/client/polyfill");
 var import_remote_component = require("#internal/shared/client/remote-component");
 var import_error = require("#internal/shared/error");
 var import_fetch_headers = require("#internal/shared/ssr/fetch-headers");
+var import_get_client_or_server_url = require("#internal/shared/ssr/get-client-or-server-url");
 var import_utils = require("#internal/shared/utils");
 function getRemoteComponentHtml(html) {
   if (typeof document === "undefined")
@@ -53,6 +54,7 @@ function getRemoteComponentHtml(html) {
   }
   return "";
 }
+const DUMMY_FALLBACK = "http://remote-components-dummy-fallback";
 function RemoteComponent({
   src,
   isolate,
@@ -68,7 +70,7 @@ function RemoteComponent({
     if (typeof src === "string") {
       const url2 = new URL(
         src,
-        typeof document !== "undefined" ? location.href : "http://localhost"
+        typeof document !== "undefined" ? location.href : DUMMY_FALLBACK
       );
       if (url2.hash) {
         return url2.hash.slice(1);
@@ -79,20 +81,23 @@ function RemoteComponent({
     return nameProp;
   }, [src, nameProp]);
   const [data, setData] = (0, import_react2.useState)(null);
+  const url = (0, import_react2.useMemo)(() => (0, import_get_client_or_server_url.getClientOrServerUrl)(src, DUMMY_FALLBACK), [src]);
+  const id = url.origin === (typeof location !== "undefined" ? location.origin : DUMMY_FALLBACK) ? url.pathname : url.href;
+  const keySuffix = `${(0, import_utils.escapeString)(id)}_${(0, import_utils.escapeString)(data?.name ?? name)}`;
   const [remoteComponent, setRemoteComponent] = (0, import_react2.useState)(null);
   const shadowRootContainerRef = (0, import_react2.useRef)(null);
   const [shadowRoot, setShadowRoot] = (0, import_react2.useState)(() => {
     const self = globalThis;
-    const shadowRootKey = `__remote_components_shadowroot_${src ? (0, import_utils.escapeString)(new URL(src, typeof location !== "undefined" ? location.origin : "http://localhost").href) : ""}_${(0, import_utils.escapeString)(data?.name ?? name)}`;
+    const shadowRootKey = `__remote_components_shadowroot_${keySuffix}`;
     const ssrShadowRoot = typeof document !== "undefined" ? document.querySelector(
-      `[data-remote-component-id="shadowroot_${src ? (0, import_utils.escapeString)(new URL(src, typeof location !== "undefined" ? location.origin : "http://localhost").href) : ""}_${(0, import_utils.escapeString)(data?.name ?? name)}"]`
+      `[data-remote-component-id="shadowroot_${keySuffix}"]`
     )?.shadowRoot ?? self[shadowRootKey] ?? null : null;
     self[shadowRootKey] = null;
     return ssrShadowRoot;
   });
   const htmlRef = (0, import_react2.useRef)(
     typeof document !== "undefined" ? document.querySelector(
-      `[data-remote-component-id="shadowroot_${src ? (0, import_utils.escapeString)(new URL(src, typeof location !== "undefined" ? location.origin : "http://localhost").href) : ""}_${(0, import_utils.escapeString)(data?.name ?? name)}"]`
+      `[data-remote-component-id="shadowroot_${keySuffix}"]`
     )?.shadowRoot?.innerHTML ?? document.getElementById(`__REMOTE_COMPONENT${name}`)?.innerHTML ?? document.querySelector(`div[data-bundle][data-route][id^="${name}"]`)?.innerHTML ?? document.querySelector("div[data-bundle][data-route]")?.innerHTML : null
   );
   const endTemplateRef = (0, import_react2.useRef)(null);
@@ -124,10 +129,10 @@ function RemoteComponent({
     }
     if (isolate !== false && typeof document !== "undefined" && !shadowRoot) {
       const self = globalThis;
-      const shadowRootKey = `__remote_components_shadowroot_${src ? (0, import_utils.escapeString)(new URL(src, typeof location !== "undefined" ? location.origin : "http://localhost").href) : ""}_${(0, import_utils.escapeString)(data?.name ?? name)}`;
+      const shadowRootKey = `__remote_components_shadowroot_${keySuffix}`;
       let shadowRootElement = null;
       const element = document.querySelector(
-        `[data-remote-component-id="shadowroot_${src ? (0, import_utils.escapeString)(new URL(src, typeof location !== "undefined" ? location.origin : "http://localhost").href) : ""}_${(0, import_utils.escapeString)(data?.name ?? name)}"]`
+        `[data-remote-component-id="shadowroot_${keySuffix}"]`
       );
       shadowRootElement = self[shadowRootKey] ?? element?.shadowRoot ?? null;
       if (!shadowRootElement && element) {
@@ -144,7 +149,7 @@ function RemoteComponent({
         setShadowRoot(shadowRootElement);
       }
     }
-  }, [name, isolate, shadowRoot, remoteComponent, mode, src, data]);
+  }, [isolate, shadowRoot, remoteComponent, mode, keySuffix]);
   (0, import_react2.useLayoutEffect)(() => {
     if (shadowRoot && remoteComponent) {
       const resetStyles = shadowRoot.querySelectorAll(
@@ -168,17 +173,6 @@ function RemoteComponent({
       }
     }
   }, [shadowRoot, remoteComponent, name]);
-  const url = (0, import_react2.useMemo)(() => {
-    if (typeof src !== "string")
-      return new URL(
-        typeof document !== "undefined" ? location.href : "http://localhost"
-      );
-    try {
-      return typeof document !== "undefined" ? new URL(src, location.href) : new URL(src);
-    } catch {
-      return new URL(src, "http://localhost");
-    }
-  }, [src]);
   (0, import_react2.useEffect)(() => {
     if (src && src !== prevSrcRef.current) {
       prevSrcRef.current = src;
@@ -353,7 +347,9 @@ function RemoteComponent({
           }
           let rscName;
           if (rsc) {
-            rscName = `__remote_component_rsc_${(0, import_utils.escapeString)(url.href)}_${(0, import_utils.escapeString)(remoteName)}`;
+            rscName = `__remote_component_rsc_${(0, import_utils.escapeString)(
+              id
+            )}_${(0, import_utils.escapeString)(remoteName)}`;
             rsc.textContent = rsc.textContent?.replace(
               new RegExp(`self\\["${remoteName}"\\]`, "g"),
               `self["${rscName}"]`
@@ -364,14 +360,13 @@ function RemoteComponent({
             ...metadata,
             links,
             remoteShared,
-            url: url.href,
+            src: typeof src === "string" ? src : src.href,
+            serverUrl: url.href,
             data: rsc ? (rsc.textContent || "").split("\n").filter(Boolean) : []
           };
           componentHydrationHtml.current = `${Array.from(
             doc.querySelectorAll("link,style")
-          ).map((link) => link.outerHTML).join(
-            ""
-          )}${reset ? `<style data-remote-components-reset="">:host { all: initial; }</style>` : ""}${component.innerHTML}`;
+          ).map((link) => link.outerHTML).join("")}${reset ? `<style data-remote-components-reset="">:host { all: initial; }</style>` : ""}${component.innerHTML}`;
           const userShared = await shared;
           if ("__remote_components_missing_shared__" in userShared) {
             userShared.__remote_components_missing_shared__().catch((e) => {
@@ -422,7 +417,7 @@ function RemoteComponent({
             }
           } else {
             const result = await (0, import_remote_component.loadRemoteComponent)({
-              url: new URL(url, location.origin),
+              url,
               name: remoteName,
               rscName,
               bundle,
@@ -479,7 +474,8 @@ function RemoteComponent({
     shared,
     shadowRoot,
     additionalHeaders,
-    reset
+    reset,
+    id
   ]);
   if (remoteComponent instanceof Error) {
     throw remoteComponent;
@@ -536,7 +532,7 @@ function RemoteComponent({
       /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
         "div",
         {
-          "data-remote-component-id": `shadowroot_${src ? (0, import_utils.escapeString)(new URL(src, typeof location !== "undefined" ? location.origin : "http://localhost").href) : ""}_${(0, import_utils.escapeString)(data?.name ?? name)}`,
+          "data-remote-component-id": `shadowroot_${keySuffix}`,
           id: `shadowroot_${data?.name ?? name}`,
           ref: shadowRootContainerRef,
           children: [
@@ -552,7 +548,7 @@ function RemoteComponent({
       src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw=="
       onload="(function(el){
         const root = el.getRootNode();
-        globalThis.__remote_components_shadowroot_${src ? (0, import_utils.escapeString)(new URL(src, typeof location !== "undefined" ? location.origin : "http://localhost").href) : ""}_${(0, import_utils.escapeString)(data?.name ?? name)} = root;
+        globalThis.__remote_components_shadowroot_${keySuffix} = root;
         el.parentElement.remove();
       })(this)"
     />`