@lwrjs/lwc-ssr 0.11.0-alpha.9 → 0.11.0

package/build/cjs/moduleProvider/index.cjs

@@ -40,14 +40,14 @@ import ${importName} from '${service}';`;
     serviceCalls += `
 
         globalThis.trace({
-            name: '${import_instrumentation.ViewSpan.SsrBootstrapService}',
+            name: '${import_instrumentation.ViewSpan.BootstrapService}',
             attributes: {
                 specifier: '${rootSpecifier}',
                 serviceSpecifier: '${service}',
             }
         }, () => {
             try {
-                ${importName}();
+                ${importName}({ serverData });
             } catch(e) {
                 const message = e.message || e;
                 // we need to re-throw with the service specifier in the error message
@@ -60,7 +60,15 @@ import { renderComponent } from '@lwc/engine-server';
 import Ctor, * as rootComponent from '${rootSpecifier}';${serviceImports}
 
 (async () => {
-    let result, props, markup, existingTaskCount;
+    let result, props, markup, serverData = globalThis.LWR?.serverData || {}, existingTaskCount;
+    // remove the LWR global properties before any customer code is run
+    if (globalThis.LWR?.define) {
+        // AMD: support dynamic imports in getServerData
+        globalThis.LWR = Object.freeze({ define: globalThis.LWR.define });
+    } else {
+        delete globalThis.LWR; // ESM
+    }
+
     try {
         // 1. setup page data
         const context = globalThis.getContext();
@@ -80,10 +88,8 @@ import Ctor, * as rootComponent from '${rootSpecifier}';${serviceImports}
                     throw new Error('Error in "getServerData" for "${rootSpecifier}": ' + message);
                 }
             });
-
             props = data.props; // overwrite public props
-            globalThis.LWR = globalThis.LWR || { serverData: {} };
-            Object.assign(globalThis.LWR.serverData, data.props); // add props to server data
+            Object.assign(serverData, data.props); // add props to server data
             markup = data.markup;
         }${serviceCalls}
 
@@ -101,8 +107,8 @@ import Ctor, * as rootComponent from '${rootSpecifier}';${serviceImports}
 
     } catch(e) {
         const message = e.message || e;
-        // Relay the LWC rendering stack
-        
+
+        // add the LWC rendering stack
         const error = e.wcStack ? 
         'An error occurred during server-side rendering for component stack: ' + e.wcStack + '. Error was: ' + message :
         'An error occured during server-side rendering: ' + message;
@@ -114,7 +120,6 @@ import Ctor, * as rootComponent from '${rootSpecifier}';${serviceImports}
     const currentTaskCount = process.getActiveResourcesInfo
             ? process.getActiveResourcesInfo().length
             : 0;
-
     if (currentTaskCount - existingTaskCount > 0) {
         console.warn('[warn] async tasks encountered while server rendering "${rootSpecifier}"');
     }

package/build/cjs/utils/amd-utils.cjs

@@ -92,7 +92,7 @@ async function getCode(runtimeEnvironment, serverData, lwrVersion, bundleSpecifi
 }
 async function getBundle(specifier, moduleBundler, routes, runtimeEnvironment, runtimeParams) {
   if ((0, import_shared_utils.getFeatureFlags)().SSR_STATIC_BUNDLES) {
-    return buildBundle(specifier, moduleBundler, routes, runtimeEnvironment, runtimeParams);
+    return buildBundle(specifier, moduleBundler, routes, {...runtimeEnvironment, debug: false}, runtimeParams);
   }
   return bundle(specifier, moduleBundler, runtimeEnvironment, runtimeParams, {
     appendExcludes: false,
@@ -102,27 +102,38 @@ async function getBundle(specifier, moduleBundler, routes, runtimeEnvironment, r
 async function bundle(specifier, moduleBundler, runtimeEnvironment, runtimeParams, bundleConfigOverrides) {
   return await moduleBundler.getModuleBundle({specifier}, runtimeEnvironment, runtimeParams, bundleConfigOverrides);
 }
-async function bundleImports(bundleCode, imports = [], visited, moduleBundler, runtimeEnvironment, runtimeParams) {
+async function bundleImports(bundleCode, dynamicImports = [], imports = [], visited, moduleBundler, runtimeEnvironment, runtimeParams) {
   for (const {specifier} of imports) {
     if (!visited.has(specifier)) {
       visited.add(specifier);
       const {code, bundleRecord, version} = await bundle(specifier, moduleBundler, runtimeEnvironment, runtimeParams);
-      let bundledCode;
-      if (runtimeEnvironment.featureFlags?.EXPERIMENTAL_UNVERSIONED_ALIASES) {
-        const versionedSpecifier = (0, import_shared_utils.getSpecifier)({specifier, version});
-        const aliasCode = (0, import_shared_utils.createAmdAlias)(versionedSpecifier, specifier);
-        bundledCode = [code, aliasCode].filter(Boolean).join("");
-      } else {
-        bundledCode = code;
-      }
-      bundleCode = await bundleImports(bundledCode, bundleRecord.imports, visited, moduleBundler, runtimeEnvironment, runtimeParams) + bundleCode;
+      const bundledCode = getBundledCode(runtimeEnvironment, specifier, version, code);
+      bundleCode = await bundleImports(bundledCode, bundleRecord.dynamicImports, bundleRecord.imports, visited, moduleBundler, runtimeEnvironment, runtimeParams) + bundleCode;
+    }
+  }
+  for (const {specifier} of dynamicImports) {
+    if (!visited.has(specifier)) {
+      visited.add(specifier);
+      const {code, version} = await bundle(specifier, moduleBundler, runtimeEnvironment, runtimeParams);
+      bundleCode += getBundledCode(runtimeEnvironment, specifier, version, code);
     }
   }
   return bundleCode;
 }
+function getBundledCode(runtimeEnvironment, specifier, version, code) {
+  let bundledCode;
+  if (runtimeEnvironment.featureFlags?.EXPERIMENTAL_UNVERSIONED_ALIASES) {
+    const versionedSpecifier = (0, import_shared_utils.getSpecifier)({specifier, version});
+    const aliasCode = (0, import_shared_utils.createAmdAlias)(versionedSpecifier, specifier);
+    bundledCode = [code, aliasCode].filter(Boolean).join("");
+  } else {
+    bundledCode = code;
+  }
+  return bundledCode;
+}
 async function getBundleWithImports(specifier, moduleBundler, runtimeEnvironment, runtimeParams) {
   const {code, bundleRecord} = await bundle(specifier, moduleBundler, runtimeEnvironment, runtimeParams);
-  return await bundleImports(code, bundleRecord.imports, new Set(["lwc", specifier]), moduleBundler, runtimeEnvironment, runtimeParams);
+  return await bundleImports(code, bundleRecord.dynamicImports, bundleRecord.imports, new Set(["lwc", specifier]), moduleBundler, runtimeEnvironment, runtimeParams);
 }
 async function buildBundle(ssrSpecifier, moduleBundler, routes, runtimeEnvironment, runtimeParams) {
   const {rootSpecifier, route} = (0, import_identity.parseSpecifier)(ssrSpecifier, routes);

package/build/cjs/utils/sandbox-locker.cjs

@@ -28,11 +28,10 @@ __export(exports, {
 });
 var import_instrumentation = __toModule(require("@lwrjs/instrumentation"));
 var import_near_membrane_node = __toModule(require("@locker/near-membrane-node"));
-var import_node_fetch = __toModule(require("node-fetch"));
 var import_crypto = __toModule(require("crypto"));
 var import_url = __toModule(require("url"));
 var import_utils = __toModule(require("./utils.cjs"));
-function runCode(codes, context) {
+function runCode(codes, context, host) {
   return new Promise((resolve, reject) => {
     let resolver;
     const p = new Promise((r) => resolver = r);
@@ -46,9 +45,10 @@ function runCode(codes, context) {
       crypto: import_crypto.webcrypto,
       getContext,
       trace,
-      fetch: import_node_fetch.default,
+      fetch: (0, import_utils.createFetchEndowment)(host),
       resolver,
       URL: import_url.URL,
+      URLSearchParams: import_url.URLSearchParams,
       process,
       setTimeout,
       clearTimeout,

package/build/cjs/utils/sandbox-worker.cjs

@@ -31,17 +31,18 @@ var import_utils = __toModule(require("./utils.cjs"));
 var HEADER = "/* This module is generated and meant to be used in a Server context */";
 var WORKER_CODE_SANDBOX_APIS = [
   `const { parentPort, workerData } = require('worker_threads');`,
+  `globalThis.fetch = require('@lwrjs/lwc-ssr/viewTransformer').createFetchEndowment(workerData.host);`,
+  `delete workerData.host`,
   `globalThis.getContext = () => workerData;`,
-  `globalThis.fetch = require('node-fetch');`,
   `globalThis.crypto = require('crypto').webcrypto;`,
   `globalThis.resolver = (...args) => parentPort.postMessage(...args);`,
   `globalThis.trace = (id, fn) => fn()`
 ];
-function runCode(codes, workerData) {
+function runCode(codes, workerData, host) {
   const time = (0, import_utils.getWatchdogTime)();
   const workerCode = [HEADER, ...WORKER_CODE_SANDBOX_APIS, ...codes].join("\n");
   return new Promise((resolve, reject) => {
-    const worker = new import_worker_threads.Worker(workerCode, {eval: true, workerData});
+    const worker = new import_worker_threads.Worker(workerCode, {eval: true, workerData: {...workerData, host}});
     const timerId = (0, import_utils.startWatchdogTimer)(() => {
       worker.terminate();
       reject(new Error(`SSR timed out after ${time}ms`));

package/build/cjs/utils/sandbox.cjs

@@ -29,9 +29,9 @@ __export(exports, {
 var import_sandbox_worker = __toModule(require("./sandbox-worker.cjs"));
 var import_sandbox_locker = __toModule(require("./sandbox-locker.cjs"));
 var import_shared_utils = __toModule(require("@lwrjs/shared-utils"));
-function runCode(codes, context) {
+function runCode(codes, context, host) {
   if ((0, import_shared_utils.getFeatureFlags)().SSR_SANDBOX_WORKER) {
-    return (0, import_sandbox_worker.default)(codes, context);
+    return (0, import_sandbox_worker.default)(codes, context, host);
   }
-  return (0, import_sandbox_locker.default)(codes, context);
+  return (0, import_sandbox_locker.default)(codes, context, host);
 }

package/build/cjs/utils/ssr-element.cjs

@@ -29,9 +29,9 @@ __export(exports, {
 var import_amd_utils = __toModule(require("./amd-utils.cjs"));
 var import_sandbox = __toModule(require("./sandbox.cjs"));
 var import_perf_hooks = __toModule(require("perf_hooks"));
-var import_shared_utils = __toModule(require("@lwrjs/shared-utils"));
+var import_diagnostics = __toModule(require("@lwrjs/diagnostics"));
 var import_instrumentation = __toModule(require("@lwrjs/instrumentation"));
-var SSR_FLAG = "process.env.SSR = true;";
+var import_shared_utils = __toModule(require("@lwrjs/shared-utils"));
 var EMIT_WIRES = `globalThis.lwcRuntimeFlags = { ENABLE_WIRE_SYNC_EMIT: true };`;
 async function ssrElement({
   specifier,
@@ -55,9 +55,15 @@ async function ssrElement({
     url: runtimeParams.url,
     params: runtimeParams.params || {},
     query: runtimeParams.query || {},
-    locale: runtimeParams.locale || runtimeEnvironment.defaultLocale,
+    locale: runtimeParams.locale || runtimeEnvironment.i18n.defaultLocale,
     basePath: runtimeParams.basePath || runtimeEnvironment.basePath
   };
+  const environment = {
+    SSR: true,
+    ...(0, import_shared_utils.buildEnvironmentContext)(runtimeParams)
+  };
+  const environmentCode = `process.env = ${JSON.stringify(environment)}`;
+  const host = runtimeParams.host;
   const startTime = import_perf_hooks.performance.now();
   return (0, import_instrumentation.getTracer)().trace({
     name: import_instrumentation.ViewSpan.ServerSideRender,
@@ -66,14 +72,14 @@ async function ssrElement({
     }
   }, async () => {
     const {result, props, markup, cache, error} = format === "amd" ? await (0, import_sandbox.default)([
-      SSR_FLAG,
       EMIT_WIRES,
+      environmentCode,
       ...await (0, import_amd_utils.getCode)(runtimeEnvironment, serverData, version.replace(/\./g, "_"), bundleSpecifier, bundleRecord.includedModules, resourceRegistry),
       code
-    ], context) : await (0, import_sandbox.default)([SSR_FLAG, EMIT_WIRES, code], context);
+    ], context, host) : await (0, import_sandbox.default)([EMIT_WIRES, environmentCode, code], context, host);
     const endTime = import_perf_hooks.performance.now();
     const timeDiff = endTime - startTime;
-    import_shared_utils.logger.info(`[Server-side Rendering] ${specifier} in ${Math.round(timeDiff)} ms`);
+    import_diagnostics.logger.info(`[Server-side Rendering] ${specifier} in ${Math.round(timeDiff)} ms`);
     if (error)
       throw new Error(error);
     return {html: result, props, markup, cache};

package/build/cjs/utils/utils.cjs

@@ -1,17 +1,36 @@
+var __create = Object.create;
 var __defProp = Object.defineProperty;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __markAsModule = (target) => __defProp(target, "__esModule", {value: true});
 var __export = (target, all) => {
   for (var name in all)
     __defProp(target, name, {get: all[name], enumerable: true});
 };
+var __exportStar = (target, module2, desc) => {
+  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
+    for (let key of __getOwnPropNames(module2))
+      if (!__hasOwnProp.call(target, key) && key !== "default")
+        __defProp(target, key, {get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable});
+  }
+  return target;
+};
+var __toModule = (module2) => {
+  return __exportStar(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", module2 && module2.__esModule && "default" in module2 ? {get: () => module2.default, enumerable: true} : {value: module2, enumerable: true})), module2);
+};
 
 // packages/@lwrjs/lwc-ssr/src/utils/utils.ts
 __markAsModule(exports);
 __export(exports, {
+  createFetchEndowment: () => createFetchEndowment,
+  createSsrErrorMessage: () => createSsrErrorMessage,
   getWatchdogTime: () => getWatchdogTime,
   startWatchdogTimer: () => startWatchdogTimer,
   stopWatchdogTimer: () => stopWatchdogTimer
 });
+var import_node_fetch = __toModule(require("node-fetch"));
 var DEFAULT_SSR_TIMEOUT = 5e3;
 function getWatchdogTime() {
   const override = process.env.SSR_TIMEOUT;
@@ -23,3 +42,18 @@ function startWatchdogTimer(callback, time) {
 function stopWatchdogTimer(timerId) {
   clearTimeout(timerId);
 }
+function createFetchEndowment(host) {
+  if (!host) {
+    return import_node_fetch.default;
+  }
+  return (url, init) => {
+    const urlStr = typeof url === "string" ? url : url.toString();
+    if (urlStr.startsWith("/")) {
+      return (0, import_node_fetch.default)(host + url, init);
+    }
+    return (0, import_node_fetch.default)(url, init);
+  };
+}
+function createSsrErrorMessage(specifier, e) {
+  return `Server-side rendering for "${specifier}" failed. Falling back to client-side rendering. Reason: ${e.message || e}`;
+}

package/build/cjs/viewProvider/index.cjs

@@ -27,9 +27,12 @@ __export(exports, {
   default: () => viewProvider_default
 });
 var import_base_view_provider = __toModule(require("@lwrjs/base-view-provider"));
+var import_diagnostics = __toModule(require("@lwrjs/diagnostics"));
+var import_instrumentation = __toModule(require("@lwrjs/instrumentation"));
 var import_shared_utils = __toModule(require("@lwrjs/shared-utils"));
 var import_identity = __toModule(require("../identity.cjs"));
 var import_ssr_element = __toModule(require("../utils/ssr-element.cjs"));
+var import_utils = __toModule(require("../utils/utils.cjs"));
 var LwcViewProvider = class extends import_base_view_provider.default {
   constructor(pluginConfig, providerConfig) {
     super();
@@ -56,11 +59,38 @@ var LwcViewProvider = class extends import_base_view_provider.default {
       viewId,
       render: async (runtimeParams) => {
         const {moduleBundler, resourceRegistry, runtimeEnvironment} = this;
-        const {html: renderedView, props} = await (0, import_ssr_element.ssrElement)({specifier: `${import_identity.LWC_SSR_PREFIX}${viewId.id}/${specifier}`, props: {}}, moduleBundler, resourceRegistry, this.routes, {runtimeEnvironment, runtimeParams});
-        return {
-          renderedView,
-          metadata: {serverData: props, customElements: [], assetReferences: []}
-        };
+        const debug = runtimeParams.query?.debug !== void 0;
+        const element = (0, import_shared_utils.moduleSpecifierToKebabCase)(specifier);
+        return (0, import_instrumentation.getTracer)().trace({
+          name: import_instrumentation.ViewSpan.RenderPage,
+          attributes: {specifier}
+        }, async () => {
+          try {
+            const {html, props} = await (0, import_ssr_element.ssrElement)({specifier: `${import_identity.LWC_SSR_PREFIX}${viewId.id}/${specifier}`, props: {}}, moduleBundler, resourceRegistry, this.routes, {
+              runtimeEnvironment: {...runtimeEnvironment, debug},
+              runtimeParams
+            });
+            return {
+              renderedView: html.replace(`<${element}`, `<${element} lwc:external`),
+              metadata: {serverData: props, customElements: [], assetReferences: []}
+            };
+          } catch (e) {
+            if (debug || (0, import_shared_utils.getFeatureFlags)().SSR_WITH_CSR_FALLBACK) {
+              const message = (0, import_utils.createSsrErrorMessage)(specifier, e);
+              import_diagnostics.logger.warn(message, e.stack);
+              return {
+                renderedView: `<${element} ${import_shared_utils.HYDRATE_DIRECTIVE}="${import_shared_utils.HYDRATE_CLIENT_VALUE}"></${element}>`,
+                metadata: {
+                  serverDebug: {message: debug ? message : void 0},
+                  customElements: [],
+                  assetReferences: []
+                }
+              };
+            } else {
+              throw e;
+            }
+          }
+        });
       }
     };
   }

package/build/cjs/viewTransformer/index.cjs

@@ -24,11 +24,16 @@ var __toModule = (module2) => {
 // packages/@lwrjs/lwc-ssr/src/viewTransformer/index.ts
 __markAsModule(exports);
 __export(exports, {
+  createFetchEndowment: () => import_utils2.createFetchEndowment,
   default: () => lwcSsrViewTransformer
 });
+var import_diagnostics = __toModule(require("@lwrjs/diagnostics"));
+var import_instrumentation = __toModule(require("@lwrjs/instrumentation"));
 var import_shared_utils = __toModule(require("@lwrjs/shared-utils"));
 var import_identity = __toModule(require("../identity.cjs"));
 var import_ssr_element = __toModule(require("../utils/ssr-element.cjs"));
+var import_utils = __toModule(require("../utils/utils.cjs"));
+var import_utils2 = __toModule(require("../utils/utils.cjs"));
 function lwcSsrViewTransformer(options, {config, moduleBundler, resourceRegistry}) {
   const routes = [...config.routes, ...config.errorRoutes];
   return {
@@ -38,8 +43,8 @@ function lwcSsrViewTransformer(options, {config, moduleBundler, resourceRegistry
       if (!viewContext.view.bootstrap?.ssr) {
         return {};
       }
-      import_shared_utils.logger.debug("[lwcSsrViewTransformer] link");
-      import_shared_utils.logger.verbose("[lwcSsrViewTransformer] link input", stringBuilder);
+      import_diagnostics.logger.debug("[lwcSsrViewTransformer] link");
+      import_diagnostics.logger.verbose("[lwcSsrViewTransformer] link input", stringBuilder);
       if (!metadata.serverData) {
         metadata.serverData = {};
       }
@@ -54,7 +59,7 @@ function lwcSsrViewTransformer(options, {config, moduleBundler, resourceRegistry
           const {startOffset, endOffset} = location;
           stringBuilder.overwrite(startOffset, endOffset, `<${tagName}></${tagName}>`);
         }
-        if (!isCsr && location) {
+        if (!isCsr && !props?.["lwc:external"] && location) {
           const {startOffset, endOffset} = location;
           const moduleSpecifier = (0, import_shared_utils.kebabCaseToModuleSpecifier)(tagName);
           ssrModules.push({
@@ -81,41 +86,46 @@ function lwcSsrViewTransformer(options, {config, moduleBundler, resourceRegistry
         const hydrate = (0, import_shared_utils.isHydrateOnLoad)(rawProps);
         const passProps = {...rawProps};
         delete passProps[import_shared_utils.HYDRATE_DIRECTIVE];
-        return (0, import_ssr_element.ssrElement)({specifier: bootstrapSpecifier, props: passProps, serverData}, moduleBundler, resourceRegistry, routes, viewContext).then(({
-          html,
-          props = {},
-          markup: {links = []} = {links: []},
-          cache: {ttl} = {}
-        }) => {
-          pageTtl = (0, import_shared_utils.shortestTtl)(ttl, pageTtl);
-          let propsAttr = "";
-          if (hydrate) {
-            const propsId = (0, import_identity.getPropsId)();
-            propsAttr = ` ${import_identity.SSR_PROPS_ATTR}="${propsId}"`;
-            serverData[propsId] = props;
-          }
-          const [, remain] = html.split(`<${tagName}`);
-          html = [`<${tagName}`, propsAttr, remain].join("");
-          links.forEach(({href, rel, as, fetchpriority}) => {
-            const relStr = rel ? ` rel="${rel}"` : "", asStr = as ? ` as="${as}"` : "", fetchStr = fetchpriority ? ` fetchpriority="${fetchpriority}"` : "";
-            ssrLinks += `<link href="${href}"${relStr}${asStr}${fetchStr}>
+        return (0, import_instrumentation.getTracer)().trace({
+          name: import_instrumentation.ViewSpan.RenderIsland,
+          attributes: {specifier}
+        }, async () => {
+          return (0, import_ssr_element.ssrElement)({specifier: bootstrapSpecifier, props: passProps, serverData}, moduleBundler, resourceRegistry, routes, viewContext).then(({
+            html,
+            props = {},
+            markup: {links = []} = {links: []},
+            cache: {ttl} = {}
+          }) => {
+            pageTtl = (0, import_shared_utils.shortestTtl)(ttl, pageTtl);
+            let propsAttr = "";
+            if (hydrate) {
+              const propsId = (0, import_identity.getPropsId)();
+              propsAttr = ` ${import_identity.SSR_PROPS_ATTR}="${propsId}"`;
+              serverData[propsId] = props;
+            }
+            const [, remain] = html.split(`<${tagName}`);
+            html = [`<${tagName}`, propsAttr, remain].join("");
+            links.forEach(({href, rel, as, fetchpriority}) => {
+              const relStr = rel ? ` rel="${rel}"` : "", asStr = as ? ` as="${as}"` : "", fetchStr = fetchpriority ? ` fetchpriority="${fetchpriority}"` : "";
+              ssrLinks += `<link href="${href}"${relStr}${asStr}${fetchStr}>
 `;
-          });
-          stringBuilder.overwrite(startOffset, endOffset, html);
-        }).catch((err) => {
-          if (debug || (0, import_shared_utils.getFeatureFlags)().SSR_WITH_CSR_FALLBACK) {
-            customElements[index].props === void 0 ? customElements[index].props = {
-              [import_shared_utils.HYDRATE_DIRECTIVE]: import_shared_utils.HYDRATE_CLIENT_VALUE
-            } : customElements[index].props[import_shared_utils.HYDRATE_DIRECTIVE] = import_shared_utils.HYDRATE_CLIENT_VALUE;
-            const errMessage = `Server-side rendering for "${specifier}" failed. Falling back to client-side rendering. Reason: `;
-            import_shared_utils.logger.warn(errMessage, err.stack);
-            if (debug) {
-              debugMessage = `${errMessage}${err.message || err}".`;
-              serverDebug.message = debugMessage;
+            });
+            stringBuilder.overwrite(startOffset, endOffset, html);
+          }).catch((err) => {
+            if (debug || (0, import_shared_utils.getFeatureFlags)().SSR_WITH_CSR_FALLBACK) {
+              customElements[index].props === void 0 ? customElements[index].props = {
+                [import_shared_utils.HYDRATE_DIRECTIVE]: import_shared_utils.HYDRATE_CLIENT_VALUE
+              } : customElements[index].props[import_shared_utils.HYDRATE_DIRECTIVE] = import_shared_utils.HYDRATE_CLIENT_VALUE;
+              const errMessage = (0, import_utils.createSsrErrorMessage)(specifier, err);
+              import_diagnostics.logger.warn(errMessage, err.stack);
+              if (debug) {
+                debugMessage = errMessage;
+                serverDebug.message = debugMessage;
+              }
+            } else {
+              throw err;
             }
-          } else {
-            throw err;
-          }
+          });
         });
       }));
       if (ssrLinks) {
@@ -123,10 +133,10 @@ function lwcSsrViewTransformer(options, {config, moduleBundler, resourceRegistry
         if (headIndex >= 0) {
           stringBuilder.prependLeft(headIndex, ssrLinks);
         } else {
-          import_shared_utils.logger.error("Adding links during server-side rendering failed. Could not find the </head> tag.");
+          import_diagnostics.logger.error("Adding links during server-side rendering failed. Could not find the </head> tag.");
         }
       }
-      import_shared_utils.logger.verbose("lwcSsrViewTransformer response", stringBuilder);
+      import_diagnostics.logger.verbose("lwcSsrViewTransformer response", stringBuilder);
       return {cache: {ttl: pageTtl}};
     }
   };

package/build/es/moduleProvider/index.js

@@ -23,14 +23,14 @@ export function createSsrBootstrapModule(rootSpecifier, services) {
         serviceImports += `\nimport ${importName} from '${service}';`;
         serviceCalls += `\n
         globalThis.trace({
-            name: '${ViewSpan.SsrBootstrapService}',
+            name: '${ViewSpan.BootstrapService}',
             attributes: {
                 specifier: '${rootSpecifier}',
                 serviceSpecifier: '${service}',
             }
         }, () => {
             try {
-                ${importName}();
+                ${importName}({ serverData });
             } catch(e) {
                 const message = e.message || e;
                 // we need to re-throw with the service specifier in the error message
@@ -43,7 +43,15 @@ import { renderComponent } from '@lwc/engine-server';
 import Ctor, * as rootComponent from '${rootSpecifier}';${serviceImports}
 
 (async () => {
-    let result, props, markup, existingTaskCount;
+    let result, props, markup, serverData = globalThis.LWR?.serverData || {}, existingTaskCount;
+    // remove the LWR global properties before any customer code is run
+    if (globalThis.LWR?.define) {
+        // AMD: support dynamic imports in getServerData
+        globalThis.LWR = Object.freeze({ define: globalThis.LWR.define });
+    } else {
+        delete globalThis.LWR; // ESM
+    }
+
     try {
         // 1. setup page data
         const context = globalThis.getContext();
@@ -63,10 +71,8 @@ import Ctor, * as rootComponent from '${rootSpecifier}';${serviceImports}
                     throw new Error('Error in "getServerData" for "${rootSpecifier}": ' + message);
                 }
             });
-
             props = data.props; // overwrite public props
-            globalThis.LWR = globalThis.LWR || { serverData: {} };
-            Object.assign(globalThis.LWR.serverData, data.props); // add props to server data
+            Object.assign(serverData, data.props); // add props to server data
             markup = data.markup;
         }${serviceCalls}
 
@@ -84,8 +90,8 @@ import Ctor, * as rootComponent from '${rootSpecifier}';${serviceImports}
 
     } catch(e) {
         const message = e.message || e;
-        // Relay the LWC rendering stack
-        
+
+        // add the LWC rendering stack
         const error = e.wcStack ? 
         'An error occurred during server-side rendering for component stack: ' + e.wcStack + '. Error was: ' + message :
         'An error occured during server-side rendering: ' + message;
@@ -97,7 +103,6 @@ import Ctor, * as rootComponent from '${rootSpecifier}';${serviceImports}
     const currentTaskCount = process.getActiveResourcesInfo
             ? process.getActiveResourcesInfo().length
             : 0;
-
     if (currentTaskCount - existingTaskCount > 0) {
         console.warn('[warn] async tasks encountered while server rendering "${rootSpecifier}"');
     }

package/build/es/utils/amd-utils.d.ts

@@ -1,6 +1,6 @@
-import type { BundleDefinition, Json, PublicModuleBundler, PublicResourceRegistry, RuntimeEnvironment, RuntimeParams } from '@lwrjs/types';
+import type { BundleDefinition, PublicModuleBundler, PublicResourceRegistry, RuntimeEnvironment, RuntimeParams, ServerData } from '@lwrjs/types';
 import type { Route } from '../identity.js';
-export declare function getCode(runtimeEnvironment: RuntimeEnvironment, serverData: Json, lwrVersion: string, bundleSpecifier: string, includedModules: string[], resourceRegistry: PublicResourceRegistry): Promise<string[]>;
+export declare function getCode(runtimeEnvironment: RuntimeEnvironment, serverData: ServerData, lwrVersion: string, bundleSpecifier: string, includedModules: string[], resourceRegistry: PublicResourceRegistry): Promise<string[]>;
 type PartialBundleDefinition = Pick<BundleDefinition, 'bundleRecord' | 'code' | 'specifier' | 'version'>;
 export declare function getBundle(specifier: string, // e.g. "@lwrjs/lwc-ssr/home/root/component"
 moduleBundler: PublicModuleBundler, routes: Route[], runtimeEnvironment: RuntimeEnvironment, runtimeParams: RuntimeParams): Promise<PartialBundleDefinition>;

package/build/es/utils/amd-utils.js

@@ -77,7 +77,9 @@ export async function getBundle(specifier, // e.g. "@lwrjs/lwc-ssr/home/root/com
 moduleBundler, routes, runtimeEnvironment, runtimeParams) {
     if (getFeatureFlags().SSR_STATIC_BUNDLES) {
         // concatenate existing bundles SSGed at build time
-        return buildBundle(specifier, moduleBundler, routes, runtimeEnvironment, runtimeParams);
+        return buildBundle(specifier, moduleBundler, routes, 
+        // debug: false needed to force SSR to not use debug bundles
+        { ...runtimeEnvironment, debug: false }, runtimeParams);
     }
     // create a new SSR bundle
     // "lwc" is aliased as "@lwc/engine-server" in the AMD worker code
@@ -90,31 +92,45 @@ async function bundle(specifier, moduleBundler, runtimeEnvironment, runtimeParam
     return await moduleBundler.getModuleBundle({ specifier }, runtimeEnvironment, runtimeParams, bundleConfigOverrides);
 }
 // Recursively bundle the static imports of a root bundle into a single bundle
-async function bundleImports(bundleCode, imports = [], visited, moduleBundler, runtimeEnvironment, runtimeParams) {
+async function bundleImports(bundleCode, dynamicImports = [], imports = [], visited, moduleBundler, runtimeEnvironment, runtimeParams) {
     for (const { specifier } of imports) {
         if (!visited.has(specifier)) {
             visited.add(specifier);
             // eslint-disable-next-line no-await-in-loop
             const { code, bundleRecord, version } = await bundle(specifier, moduleBundler, runtimeEnvironment, runtimeParams);
-            let bundledCode;
-            if (runtimeEnvironment.featureFlags?.EXPERIMENTAL_UNVERSIONED_ALIASES) {
-                const versionedSpecifier = getSpecifier({ specifier, version });
-                const aliasCode = createAmdAlias(versionedSpecifier, specifier);
-                bundledCode = [code, aliasCode].filter(Boolean).join('');
-            }
-            else {
-                bundledCode = code;
-            }
+            const bundledCode = getBundledCode(runtimeEnvironment, specifier, version, code);
             bundleCode =
                 // eslint-disable-next-line no-await-in-loop
-                (await bundleImports(bundledCode, bundleRecord.imports, visited, moduleBundler, runtimeEnvironment, runtimeParams)) + bundleCode;
+                (await bundleImports(bundledCode, bundleRecord.dynamicImports, bundleRecord.imports, visited, moduleBundler, runtimeEnvironment, runtimeParams)) + bundleCode;
+        }
+    }
+    // Pull in one level of dynamic imports
+    for (const { specifier } of dynamicImports) {
+        if (!visited.has(specifier)) {
+            visited.add(specifier);
+            // eslint-disable-next-line no-await-in-loop
+            const { code, version } = await bundle(specifier, moduleBundler, runtimeEnvironment, runtimeParams);
+            // Add Dynamic Code
+            bundleCode += getBundledCode(runtimeEnvironment, specifier, version, code);
         }
     }
     return bundleCode;
 }
+function getBundledCode(runtimeEnvironment, specifier, version, code) {
+    let bundledCode;
+    if (runtimeEnvironment.featureFlags?.EXPERIMENTAL_UNVERSIONED_ALIASES) {
+        const versionedSpecifier = getSpecifier({ specifier, version });
+        const aliasCode = createAmdAlias(versionedSpecifier, specifier);
+        bundledCode = [code, aliasCode].filter(Boolean).join('');
+    }
+    else {
+        bundledCode = code;
+    }
+    return bundledCode;
+}
 async function getBundleWithImports(specifier, moduleBundler, runtimeEnvironment, runtimeParams) {
     const { code, bundleRecord } = await bundle(specifier, moduleBundler, runtimeEnvironment, runtimeParams);
-    return await bundleImports(code, bundleRecord.imports, new Set(['lwc', specifier]), // visited (lwc is excluded)
+    return await bundleImports(code, bundleRecord.dynamicImports, bundleRecord.imports, new Set(['lwc', specifier]), // visited (lwc is excluded)
     moduleBundler, runtimeEnvironment, runtimeParams);
 }
 // Build a SSR bundle for a root component by concatenating:

package/build/es/utils/sandbox-locker.d.ts

@@ -1,4 +1,4 @@
 import type { SsrRequestContext } from '@lwrjs/types';
 import type { SandboxResults } from './sandbox.js';
-export default function runCode(codes: string[], context: SsrRequestContext): Promise<SandboxResults>;
+export default function runCode(codes: string[], context: SsrRequestContext, host?: string): Promise<SandboxResults>;
 //# sourceMappingURL=sandbox-locker.d.ts.map

package/build/es/utils/sandbox-locker.js

@@ -1,10 +1,9 @@
 import { getTracer } from '@lwrjs/instrumentation';
 import createVirtualEnvironment from '@locker/near-membrane-node';
-import fetch from 'node-fetch';
 import { webcrypto as crypto } from 'crypto';
-import { URL } from 'url';
-import { getWatchdogTime, startWatchdogTimer, stopWatchdogTimer } from './utils.js';
-export default function runCode(codes, context) {
+import { URL, URLSearchParams } from 'url';
+import { createFetchEndowment, getWatchdogTime, startWatchdogTimer, stopWatchdogTimer } from './utils.js';
+export default function runCode(codes, context, host) {
     return new Promise((resolve, reject) => {
         let resolver;
         const p = new Promise((r) => (resolver = r));
@@ -18,9 +17,10 @@ export default function runCode(codes, context) {
             crypto,
             getContext,
             trace,
-            fetch,
+            fetch: createFetchEndowment(host),
             resolver,
             URL,
+            URLSearchParams,
             // for AMD loader ModuleRegistry
             process,
             setTimeout,

package/build/es/utils/sandbox-worker.d.ts

@@ -5,5 +5,5 @@ import type { SandboxResults } from './sandbox.js';
  * @param codes - Code strings which SSR a root component
  * @returns a promise to the SSRed code string, or an error message
  */
-export default function runCode(codes: string[], workerData: SsrRequestContext): Promise<SandboxResults>;
+export default function runCode(codes: string[], workerData: SsrRequestContext, host?: string): Promise<SandboxResults>;
 //# sourceMappingURL=sandbox-worker.d.ts.map

package/build/es/utils/sandbox-worker.js

@@ -14,8 +14,9 @@ const HEADER = '/* This module is generated and meant to be used in a Server con
  */
 const WORKER_CODE_SANDBOX_APIS = [
     `const { parentPort, workerData } = require('worker_threads');`,
+    `globalThis.fetch = require('@lwrjs/lwc-ssr/viewTransformer').createFetchEndowment(workerData.host);`,
+    `delete workerData.host`,
     `globalThis.getContext = () => workerData;`,
-    `globalThis.fetch = require('node-fetch');`,
     `globalThis.crypto = require('crypto').webcrypto;`,
     `globalThis.resolver = (...args) => parentPort.postMessage(...args);`,
     // TODO: implement tracing with worker thread
@@ -26,11 +27,11 @@ const WORKER_CODE_SANDBOX_APIS = [
  * @param codes - Code strings which SSR a root component
  * @returns a promise to the SSRed code string, or an error message
  */
-export default function runCode(codes, workerData) {
+export default function runCode(codes, workerData, host) {
     const time = getWatchdogTime();
     const workerCode = [HEADER, ...WORKER_CODE_SANDBOX_APIS, ...codes].join('\n');
     return new Promise((resolve, reject) => {
-        const worker = new Worker(workerCode, { eval: true, workerData });
+        const worker = new Worker(workerCode, { eval: true, workerData: { ...workerData, host } });
         const timerId = startWatchdogTimer(() => {
             worker.terminate();
             reject(new Error(`SSR timed out after ${time}ms`));

package/build/es/utils/sandbox.d.ts

@@ -3,5 +3,5 @@ export interface SandboxResults extends SsrDataResponse {
     result?: string;
     error?: string;
 }
-export default function runCode(codes: string[], context: SsrRequestContext): Promise<SandboxResults>;
+export default function runCode(codes: string[], context: SsrRequestContext, host?: string): Promise<SandboxResults>;
 //# sourceMappingURL=sandbox.d.ts.map

package/build/es/utils/sandbox.js

@@ -1,11 +1,11 @@
 import runCodeOnWorker from './sandbox-worker.js';
 import runCodeOnLocker from './sandbox-locker.js';
 import { getFeatureFlags } from '@lwrjs/shared-utils';
-export default function runCode(codes, context) {
+export default function runCode(codes, context, host) {
     if (getFeatureFlags().SSR_SANDBOX_WORKER) {
-        return runCodeOnWorker(codes, context);
+        return runCodeOnWorker(codes, context, host);
     }
     // Default to use locker because it works rolled up in MRT
-    return runCodeOnLocker(codes, context);
+    return runCodeOnLocker(codes, context, host);
 }
 //# sourceMappingURL=sandbox.js.map

package/build/es/utils/ssr-element.d.ts

@@ -1,4 +1,4 @@
-import type { Json, PublicModuleBundler, PublicResourceRegistry, SsrDataResponse, ViewTransformPluginContext } from '@lwrjs/types';
+import type { Json, PublicModuleBundler, PublicResourceRegistry, ServerData, SsrDataResponse, ViewTransformPluginContext } from '@lwrjs/types';
 import type { Route } from '../identity.js';
 interface SsrResults extends SsrDataResponse {
     html: string;
@@ -16,9 +16,7 @@ export declare function ssrElement({ specifier, props: templateProps, serverData
     props: {
         [prop: string]: Json;
     };
-    serverData?: {
-        [prop: string]: Json;
-    };
+    serverData?: ServerData;
 }, moduleBundler: PublicModuleBundler, resourceRegistry: PublicResourceRegistry, routes: Route[], { runtimeEnvironment, runtimeParams }: ViewTransformPluginContext): Promise<SsrResults>;
 export {};
 //# sourceMappingURL=ssr-element.d.ts.map

package/build/es/utils/ssr-element.js

@@ -1,9 +1,9 @@
 import { getBundle, getCode } from './amd-utils.js';
 import runCode from './sandbox.js';
 import { performance } from 'perf_hooks';
-import { logger } from '@lwrjs/shared-utils';
+import { logger } from '@lwrjs/diagnostics';
 import { getTracer, ViewSpan } from '@lwrjs/instrumentation';
-const SSR_FLAG = 'process.env.SSR = true;'; // Used for import.meta.env.SSR
+import { buildEnvironmentContext } from '@lwrjs/shared-utils';
 const EMIT_WIRES = `globalThis.lwcRuntimeFlags = { ENABLE_WIRE_SYNC_EMIT: true };`; // Invoke wire adapters immediately after a component is connected
 /**
  * Create a bundle for the given SSR module and run the code in a sandbox.
@@ -34,9 +34,18 @@ export async function ssrElement({ specifier, props: templateProps, serverData =
         url: runtimeParams.url,
         params: runtimeParams.params || {},
         query: runtimeParams.query || {},
-        locale: runtimeParams.locale || runtimeEnvironment.defaultLocale,
+        locale: runtimeParams.locale || runtimeEnvironment.i18n.defaultLocale,
         basePath: runtimeParams.basePath || runtimeEnvironment.basePath,
     };
+    const environment = {
+        // Used for import.meta.env.SSR
+        // Note: SSR is always true because this script is executed on the server
+        SSR: true,
+        // Used by `lwr/environment`
+        ...buildEnvironmentContext(runtimeParams),
+    };
+    const environmentCode = `process.env = ${JSON.stringify(environment)}`;
+    const host = runtimeParams.host;
     // Get the SSR string and properties bag
     const startTime = performance.now();
     return getTracer().trace({
@@ -47,12 +56,12 @@ export async function ssrElement({ specifier, props: templateProps, serverData =
     }, async () => {
         const { result, props, markup, cache, error } = format === 'amd'
             ? await runCode([
-                SSR_FLAG,
                 EMIT_WIRES,
+                environmentCode,
                 ...(await getCode(runtimeEnvironment, serverData, version.replace(/\./g, '_'), bundleSpecifier, bundleRecord.includedModules, resourceRegistry)),
                 code,
-            ], context)
-            : await runCode([SSR_FLAG, EMIT_WIRES, code], context);
+            ], context, host)
+            : await runCode([EMIT_WIRES, environmentCode, code], context, host);
         const endTime = performance.now();
         const timeDiff = endTime - startTime;
         logger.info(`[Server-side Rendering] ${specifier} in ${Math.round(timeDiff)} ms`);

package/build/es/utils/utils.d.ts

@@ -1,4 +1,7 @@
+import type { Response, RequestInfo, RequestInit } from 'node-fetch';
 export declare function getWatchdogTime(): number;
 export declare function startWatchdogTimer(callback: Function, time: number): number;
 export declare function stopWatchdogTimer(timerId: number): void;
+export declare function createFetchEndowment(host?: string): (url: RequestInfo, init?: RequestInit) => Promise<Response>;
+export declare function createSsrErrorMessage(specifier: string, e: Error): string;
 //# sourceMappingURL=utils.d.ts.map

package/build/es/utils/utils.js

@@ -1,3 +1,4 @@
+import fetch from 'node-fetch';
 const DEFAULT_SSR_TIMEOUT = 5000; // 5 seconds, override with process.env.SSR_TIMEOUT
 export function getWatchdogTime() {
     const override = process.env.SSR_TIMEOUT;
@@ -9,4 +10,23 @@ export function startWatchdogTimer(callback, time) {
 export function stopWatchdogTimer(timerId) {
     clearTimeout(timerId);
 }
+export function createFetchEndowment(host) {
+    if (!host) {
+        // never proxy relative URLs
+        return fetch;
+    }
+    return (url, init) => {
+        // handle all stringable types, eg: URL
+        const urlStr = typeof url === 'string' ? url : url.toString();
+        if (urlStr.startsWith('/')) {
+            // proxy relative URLs through the given host
+            return fetch(host + url, init);
+        }
+        // carry on
+        return fetch(url, init);
+    };
+}
+export function createSsrErrorMessage(specifier, e) {
+    return `Server-side rendering for "${specifier}" failed. Falling back to client-side rendering. Reason: ${e.message || e}`;
+}
 //# sourceMappingURL=utils.js.map

package/build/es/viewProvider/index.js

@@ -1,7 +1,10 @@
 import BaseViewProvider from '@lwrjs/base-view-provider';
-import { hashContent, isSpecifier, slugify } from '@lwrjs/shared-utils';
+import { logger } from '@lwrjs/diagnostics';
+import { ViewSpan, getTracer } from '@lwrjs/instrumentation';
+import { HYDRATE_CLIENT_VALUE, HYDRATE_DIRECTIVE, getFeatureFlags, hashContent, isSpecifier, moduleSpecifierToKebabCase, slugify, } from '@lwrjs/shared-utils';
 import { LWC_SSR_PREFIX } from '../identity.js';
 import { ssrElement } from '../utils/ssr-element.js';
+import { createSsrErrorMessage } from '../utils/utils.js';
 export default class LwcViewProvider extends BaseViewProvider {
     constructor(pluginConfig, providerConfig) {
         super();
@@ -30,11 +33,43 @@ export default class LwcViewProvider extends BaseViewProvider {
             render: async (runtimeParams) => {
                 // SSR the root component (without passing any public properties)
                 const { moduleBundler, resourceRegistry, runtimeEnvironment } = this;
-                const { html: renderedView, props } = await ssrElement({ specifier: `${LWC_SSR_PREFIX}${viewId.id}/${specifier}`, props: {} }, moduleBundler, resourceRegistry, this.routes, { runtimeEnvironment, runtimeParams });
-                return {
-                    renderedView,
-                    metadata: { serverData: props, customElements: [], assetReferences: [] },
-                };
+                const debug = runtimeParams.query?.debug !== undefined;
+                const element = moduleSpecifierToKebabCase(specifier);
+                return getTracer().trace({
+                    name: ViewSpan.RenderPage,
+                    attributes: { specifier },
+                }, async () => {
+                    try {
+                        const { html, props } = await ssrElement({ specifier: `${LWC_SSR_PREFIX}${viewId.id}/${specifier}`, props: {} }, moduleBundler, resourceRegistry, this.routes, {
+                            runtimeEnvironment: { ...runtimeEnvironment, debug },
+                            runtimeParams,
+                        });
+                        return {
+                            // add "lwc:external" to the contentTemplate component to mark it as already processed
+                            renderedView: html.replace(`<${element}`, `<${element} lwc:external`),
+                            metadata: { serverData: props, customElements: [], assetReferences: [] },
+                        };
+                    }
+                    catch (e) {
+                        if (debug || getFeatureFlags().SSR_WITH_CSR_FALLBACK) {
+                            // fallback to CSR
+                            const message = createSsrErrorMessage(specifier, e);
+                            logger.warn(message, e.stack);
+                            return {
+                                renderedView: `<${element} ${HYDRATE_DIRECTIVE}="${HYDRATE_CLIENT_VALUE}"></${element}>`,
+                                // send an error message to the client if debug mode is on
+                                metadata: {
+                                    serverDebug: { message: debug ? message : undefined },
+                                    customElements: [],
+                                    assetReferences: [],
+                                },
+                            };
+                        }
+                        else {
+                            throw e;
+                        }
+                    }
+                });
             },
         };
     }

package/build/es/viewTransformer/index.d.ts

@@ -1,4 +1,5 @@
 import type { ProviderContext, ViewTransformPlugin } from '@lwrjs/types';
+export { createFetchEndowment } from '../utils/utils.js';
 interface SsrPluginOptions {
     shareWorker?: boolean;
 }
@@ -21,5 +22,4 @@ interface SsrPluginOptions {
  * 5. During bootstrap on the client, the "lwr/init" module will hydrate ALL the custom elements on the page
  */
 export default function lwcSsrViewTransformer(options: SsrPluginOptions, { config, moduleBundler, resourceRegistry }: ProviderContext): ViewTransformPlugin;
-export {};
 //# sourceMappingURL=index.d.ts.map

package/build/es/viewTransformer/index.js

@@ -1,6 +1,10 @@
-import { HYDRATE_CLIENT_VALUE, HYDRATE_DIRECTIVE, getFeatureFlags, isCsrIsland, isHydrateOnLoad, kebabCaseToModuleSpecifier, logger, shortestTtl, } from '@lwrjs/shared-utils';
+import { logger } from '@lwrjs/diagnostics';
+import { ViewSpan, getTracer } from '@lwrjs/instrumentation';
+import { HYDRATE_CLIENT_VALUE, HYDRATE_DIRECTIVE, getFeatureFlags, isCsrIsland, isHydrateOnLoad, kebabCaseToModuleSpecifier, shortestTtl, } from '@lwrjs/shared-utils';
 import { LWC_SSR_PREFIX, SSR_PROPS_ATTR, getPropsId } from '../identity.js';
 import { ssrElement } from '../utils/ssr-element.js';
+import { createSsrErrorMessage } from '../utils/utils.js';
+export { createFetchEndowment } from '../utils/utils.js';
 /**
  * This is a view transformer run by the view registry during linking of a page document/route (configured in lwr.config.json[routes]).
  * If the "ssr" bootstrap flag is on for the route, it will server-side render (SSR) each custom element found in the page HTML.
@@ -46,7 +50,8 @@ export default function lwcSsrViewTransformer(options, { config, moduleBundler,
                     const { startOffset, endOffset } = location;
                     stringBuilder.overwrite(startOffset, endOffset, `<${tagName}></${tagName}>`);
                 }
-                if (!isCsr && location) {
+                if (!isCsr && !props?.['lwc:external'] && location) {
+                    // only SSR the custom elements which are NOT CSR islands or lwc:external
                     const { startOffset, endOffset } = location;
                     const moduleSpecifier = kebabCaseToModuleSpecifier(tagName);
                     ssrModules.push({
@@ -66,57 +71,62 @@ export default function lwcSsrViewTransformer(options, { config, moduleBundler,
                 const hydrate = isHydrateOnLoad(rawProps);
                 const passProps = { ...rawProps };
                 delete passProps[HYDRATE_DIRECTIVE];
-                return ssrElement({ specifier: bootstrapSpecifier, props: passProps, serverData }, moduleBundler, resourceRegistry, routes, viewContext)
-                    .then(({ html, props = {}, markup: { links = [] } = { links: [] }, cache: { ttl } = {}, }) => {
-                    // Keep track of the shortest TTL from all getServerData hooks
-                    pageTtl = shortestTtl(ttl, pageTtl);
-                    // Add the props id to the HTML for the custom element
-                    // eg: <some-cmp> -> <some-cmp data-lwr-props-id="1234">
-                    let propsAttr = '';
-                    if (hydrate) {
-                        // Only serialize props for custom elements that are to be hydrated
-                        const propsId = getPropsId();
-                        propsAttr = ` ${SSR_PROPS_ATTR}="${propsId}"`;
-                        serverData[propsId] = props;
-                    }
-                    const [, remain] = html.split(`<${tagName}`);
-                    html = [`<${tagName}`, propsAttr, remain].join('');
-                    // Create HTML <link> strings for each item in the links array
-                    links.forEach(({ href, rel, as, fetchpriority }) => {
-                        const relStr = rel ? ` rel="${rel}"` : '', asStr = as ? ` as="${as}"` : '', fetchStr = fetchpriority
-                            ? ` fetchpriority="${fetchpriority}"`
-                            : '';
-                        ssrLinks += `<link href="${href}"${relStr}${asStr}${fetchStr}>\n`;
-                    });
-                    // Overwrite the custom element with the SSRed component string
-                    stringBuilder.overwrite(startOffset, endOffset, html);
-                })
-                    .catch((err) => {
-                    // fallback to CSR in debug mode or if enabled
-                    if (debug || getFeatureFlags().SSR_WITH_CSR_FALLBACK) {
-                        // Fallback to CSR by adding lwr:hydrate="client-only" to the custom element
-                        // This ENSURES the component's JavaScript gets sent to the client for CSRing
-                        customElements[index].props === undefined
-                            ? (customElements[index].props = {
-                                [HYDRATE_DIRECTIVE]: HYDRATE_CLIENT_VALUE,
-                            })
-                            : // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-                                // @ts-ignore - TS thinks that props may still be undefined
-                                (customElements[index].props[HYDRATE_DIRECTIVE] =
-                                    HYDRATE_CLIENT_VALUE);
-                        const errMessage = `Server-side rendering for "${specifier}" failed. Falling back to client-side rendering. Reason: `;
-                        // log message w/ stack details
-                        logger.warn(errMessage, err.stack);
-                        // Inform the client of the failing modules w/o exposing any additional
-                        // details (such as callstack) for security reasons
-                        if (debug) {
-                            debugMessage = `${errMessage}${err.message || err}".`;
-                            serverDebug.message = debugMessage;
+                return getTracer().trace({
+                    name: ViewSpan.RenderIsland,
+                    attributes: { specifier },
+                }, async () => {
+                    return ssrElement({ specifier: bootstrapSpecifier, props: passProps, serverData }, moduleBundler, resourceRegistry, routes, viewContext)
+                        .then(({ html, props = {}, markup: { links = [] } = { links: [] }, cache: { ttl } = {}, }) => {
+                        // Keep track of the shortest TTL from all getServerData hooks
+                        pageTtl = shortestTtl(ttl, pageTtl);
+                        // Add the props id to the HTML for the custom element
+                        // eg: <some-cmp> -> <some-cmp data-lwr-props-id="1234">
+                        let propsAttr = '';
+                        if (hydrate) {
+                            // Only serialize props for custom elements that are to be hydrated
+                            const propsId = getPropsId();
+                            propsAttr = ` ${SSR_PROPS_ATTR}="${propsId}"`;
+                            serverData[propsId] = props;
+                        }
+                        const [, remain] = html.split(`<${tagName}`);
+                        html = [`<${tagName}`, propsAttr, remain].join('');
+                        // Create HTML <link> strings for each item in the links array
+                        links.forEach(({ href, rel, as, fetchpriority }) => {
+                            const relStr = rel ? ` rel="${rel}"` : '', asStr = as ? ` as="${as}"` : '', fetchStr = fetchpriority
+                                ? ` fetchpriority="${fetchpriority}"`
+                                : '';
+                            ssrLinks += `<link href="${href}"${relStr}${asStr}${fetchStr}>\n`;
+                        });
+                        // Overwrite the custom element with the SSRed component string
+                        stringBuilder.overwrite(startOffset, endOffset, html);
+                    })
+                        .catch((err) => {
+                        // fallback to CSR in debug mode or if enabled
+                        if (debug || getFeatureFlags().SSR_WITH_CSR_FALLBACK) {
+                            // Fallback to CSR by adding lwr:hydrate="client-only" to the custom element
+                            // This ENSURES the component's JavaScript gets sent to the client for CSRing
+                            customElements[index].props === undefined
+                                ? (customElements[index].props = {
+                                    [HYDRATE_DIRECTIVE]: HYDRATE_CLIENT_VALUE,
+                                })
+                                : // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+                                    // @ts-ignore - TS thinks that props may still be undefined
+                                    (customElements[index].props[HYDRATE_DIRECTIVE] =
+                                        HYDRATE_CLIENT_VALUE);
+                            const errMessage = createSsrErrorMessage(specifier, err);
+                            // log message w/ stack details
+                            logger.warn(errMessage, err.stack);
+                            // Inform the client of the failing modules w/o exposing any additional
+                            // details (such as callstack) for security reasons
+                            if (debug) {
+                                debugMessage = errMessage;
+                                serverDebug.message = debugMessage;
+                            }
                         }
-                    }
-                    else {
-                        throw err;
-                    }
+                        else {
+                            throw err;
+                        }
+                    });
                 });
             }));
             if (ssrLinks) {

package/package.json

@@ -4,7 +4,7 @@
     "publishConfig": {
         "access": "public"
     },
-    "version": "0.11.0-alpha.9",
+    "version": "0.11.0",
     "homepage": "https://developer.salesforce.com/docs/platform/lwr/overview",
     "repository": {
         "type": "git",
@@ -43,13 +43,13 @@
     ],
     "dependencies": {
         "@locker/near-membrane-node": "^0.13.3",
-        "@lwrjs/diagnostics": "0.11.0-alpha.9",
-        "@lwrjs/instrumentation": "0.11.0-alpha.9",
-        "@lwrjs/shared-utils": "0.11.0-alpha.9",
+        "@lwrjs/diagnostics": "0.11.0",
+        "@lwrjs/instrumentation": "0.11.0",
+        "@lwrjs/shared-utils": "0.11.0",
         "node-fetch": "^2.6.8"
     },
     "devDependencies": {
-        "@lwrjs/types": "0.11.0-alpha.9",
+        "@lwrjs/types": "0.11.0",
         "jest": "^26.6.3",
         "ts-jest": "^26.5.6"
     },
@@ -59,5 +59,5 @@
     "volta": {
         "extends": "../../../package.json"
     },
-    "gitHead": "bc50e3f828be56ebdd2f8206cafe8158ab722470"
+    "gitHead": "fbc883ea90a12672ce6f1adc2201144fda8762bd"
 }