refactor(@angular/ssr): remove duplicate code and streamline serve functionality

This commit cleans up duplicate code left from the previous implementations of process, serve, and render. Additionally, prerender serve now exclusively handles HEAD and GET requests, aligning with updated handling requirements. The private `renderStatic` method has been removed in favor of the `handle` method for improved maintainability.

Author: alan-agius4

packages/angular/build/src/tools/vite/middlewares/ssr-middleware.ts

@@ -47,6 +47,7 @@ export function createAngularSsrInternalMiddleware(
       const angularServerApp = ɵgetOrCreateAngularServerApp();
       // Only Add the transform hook only if it's a different instance.
       if (cachedAngularServerApp !== angularServerApp) {
+        angularServerApp.allowStaticRouteRender = true;
         angularServerApp.hooks.on('html:transform:pre', async ({ html, url }) => {
           const processedHtml = await server.transformIndexHtml(url.pathname, html);
 
@@ -96,6 +97,7 @@ export async function createAngularSsrExternalMiddleware(
         reqHandler?: unknown;
         AngularAppEngine: typeof SSRAngularAppEngine;
       };
+
       if (!isSsrNodeRequestHandler(reqHandler) && !isSsrRequestHandler(reqHandler)) {
         if (!fallbackWarningShown) {
           // eslint-disable-next-line no-console
@@ -118,6 +120,7 @@ export async function createAngularSsrExternalMiddleware(
       }
 
       if (cachedAngularAppEngine !== AngularAppEngine) {
+        AngularAppEngine.ɵallowStaticRouteRender = true;
         AngularAppEngine.ɵhooks.on('html:transform:pre', async ({ html, url }) => {
           const processedHtml = await server.transformIndexHtml(url.pathname, html);
 

packages/angular/build/src/utils/server-rendering/render-worker.ts

@@ -40,9 +40,9 @@ async function renderPage({ url }: RenderOptions): Promise<string | null> {
   const { ɵgetOrCreateAngularServerApp: getOrCreateAngularServerApp } =
     await loadEsmModuleFromMemory('./main.server.mjs');
   const angularServerApp = getOrCreateAngularServerApp();
-  const response = await angularServerApp.renderStatic(
-    new URL(url, serverURL),
-    AbortSignal.timeout(30_000),
+  angularServerApp.allowStaticRouteRender = true;
+  const response = await angularServerApp.handle(
+    new Request(new URL(url, serverURL), { signal: AbortSignal.timeout(30_000) }),
   );
 
   return response ? response.text() : null;

packages/angular/ssr/src/app-engine.ts

@@ -10,7 +10,6 @@ import type { AngularServerApp } from './app';
 import { Hooks } from './hooks';
 import { getPotentialLocaleIdFromUrl } from './i18n';
 import { EntryPointExports, getAngularAppEngineManifest } from './manifest';
-import { stripIndexHtmlFromURL, stripTrailingSlash } from './utils/url';
 
 /**
  * Angular server application engine.
@@ -24,23 +23,23 @@ import { stripIndexHtmlFromURL, stripTrailingSlash } from './utils/url';
  */
 export class AngularAppEngine {
   /**
-   * Hooks for extending or modifying the behavior of the server application.
-   * These hooks are used by the Angular CLI when running the development server and
-   * provide extensibility points for the application lifecycle.
+   * A flag to enable or disable the rendering of prerendered routes.
+   *
+   * Typically used during development to avoid prerendering all routes ahead of time,
+   * allowing them to be rendered on the fly as requested.
    *
    * @private
    */
-  static ɵhooks = /* #__PURE__*/ new Hooks();
+  static ɵallowStaticRouteRender = false;
 
   /**
-   * Provides access to the hooks for extending or modifying the server application's behavior.
-   * This allows attaching custom functionality to various server application lifecycle events.
+   * Hooks for extending or modifying the behavior of the server application.
+   * These hooks are used by the Angular CLI when running the development server and
+   * provide extensibility points for the application lifecycle.
    *
-   * @internal
+   * @private
    */
-  get hooks(): Hooks {
-    return AngularAppEngine.ɵhooks;
-  }
+  static ɵhooks = /* #__PURE__*/ new Hooks();
 
   /**
    * The manifest for the server application.
@@ -93,7 +92,8 @@ export class AngularAppEngine {
     // be located in separate bundles, making `instanceof` checks unreliable.
     // eslint-disable-next-line @typescript-eslint/no-unnecessary-type-assertion
     const serverApp = getOrCreateAngularServerApp() as AngularServerApp;
-    serverApp.hooks = this.hooks;
+    serverApp.hooks = AngularAppEngine.ɵhooks;
+    serverApp.allowStaticRouteRender = AngularAppEngine.ɵallowStaticRouteRender;
 
     return serverApp;
   }

packages/angular/ssr/src/app.ts

@@ -57,9 +57,21 @@ const SERVER_CONTEXT_VALUE: Record<RenderMode, string> = {
  * The `AngularServerApp` class handles server-side rendering and asset management for a specific locale.
  */
 export class AngularServerApp {
+  /**
+   * A flag to enable or disable the rendering of prerendered routes.
+   *
+   * Typically used during development to avoid prerendering all routes ahead of time,
+   * allowing them to be rendered on the fly as requested.
+   *
+   * @private
+   */
+  allowStaticRouteRender = false;
+
   /**
    * Hooks for extending or modifying the behavior of the server application.
    * This instance can be used to attach custom functionality to various events in the server application lifecycle.
+   *
+   s* @private
    */
   hooks = new Hooks();
 
@@ -97,21 +109,6 @@ export class AngularServerApp {
    */
   private readonly criticalCssLRUCache = new LRUCache<string, string>(MAX_INLINE_CSS_CACHE_ENTRIES);
 
-  /**
-   * Renders a page based on the provided URL via server-side rendering and returns the corresponding HTTP response.
-   * The rendering process can be interrupted by an abort signal, where the first resolved promise (either from the abort
-   * or the render process) will dictate the outcome.
-   *
-   * @param url - The full URL to be processed and rendered by the server.
-   * @param signal - (Optional) An `AbortSignal` object that allows for the cancellation of the rendering process.
-   * @returns A promise that resolves to the generated HTTP response object, or `null` if no matching route is found.
-   */
-  renderStatic(url: URL, signal?: AbortSignal): Promise<Response | null> {
-    const request = new Request(url, { signal });
-
-    return this.handleAbortableRendering(request, /** isSsrMode */ false);
-  }
-
   /**
    * Handles an incoming HTTP request by serving prerendered content, performing server-side rendering,
    * or delivering a static file for client-side rendered routes based on the `RenderMode` setting.
@@ -126,8 +123,8 @@ export class AngularServerApp {
   async handle(request: Request, requestContext?: unknown): Promise<Response | null> {
     const url = new URL(request.url);
     this.router ??= await ServerRouter.from(this.manifest, url);
-
     const matchedRoute = this.router.match(url);
+
     if (!matchedRoute) {
       // Not a known Angular route.
       return null;
@@ -140,131 +137,82 @@ export class AngularServerApp {
       }
     }
 
-    return this.handleAbortableRendering(
-      request,
-      /** isSsrMode */ true,
-      matchedRoute,
-      requestContext,
-    );
-  }
-
-  /**
-   * Retrieves the matched route for the incoming request based on the request URL.
-   *
-   * @param request - The incoming HTTP request to match against routes.
-   * @returns A promise that resolves to the matched route metadata or `undefined` if no route matches.
-   */
-  private async getMatchedRoute(request: Request): Promise<RouteTreeNodeMetadata | undefined> {
-    this.router ??= await ServerRouter.from(this.manifest, new URL(request.url));
-
-    return this.router.match(new URL(request.url));
+    return Promise.race([
+      new Promise<never>((_, reject) => {
+        request.signal.addEventListener(
+          'abort',
+          () => {
+            const abortError = new Error(
+              `Request for: ${request.url} was aborted.\n${request.signal.reason}`,
+            );
+            abortError.name = 'AbortError';
+            reject(abortError);
+          },
+          { once: true },
+        );
+      }),
+      this.handleRendering(request, matchedRoute, requestContext),
+    ]);
   }
 
   /**
    * Handles serving a prerendered static asset if available for the matched route.
    *
+   * This method only supports `GET` and `HEAD` requests.
+   *
    * @param request - The incoming HTTP request for serving a static page.
-   * @param matchedRoute - Optional parameter representing the metadata of the matched route for rendering.
+   * @param matchedRoute - The metadata of the matched route for rendering.
    * If not provided, the method attempts to find a matching route based on the request URL.
    * @returns A promise that resolves to a `Response` object if the prerendered page is found, or `null`.
    */
   private async handleServe(
     request: Request,
-    matchedRoute?: RouteTreeNodeMetadata,
+    matchedRoute: RouteTreeNodeMetadata,
   ): Promise<Response | null> {
-    matchedRoute ??= await this.getMatchedRoute(request);
-    if (!matchedRoute) {
+    const { headers, renderMode } = matchedRoute;
+    if (renderMode !== RenderMode.Prerender) {
       return null;
     }
 
-    const { headers, renderMode } = matchedRoute;
-    if (renderMode !== RenderMode.Prerender) {
+    const { url, method } = request;
+    if (method !== 'GET' && method !== 'HEAD') {
       return null;
     }
 
-    const { pathname } = stripIndexHtmlFromURL(new URL(request.url));
+    const { pathname } = stripIndexHtmlFromURL(new URL(url));
     const assetPath = stripLeadingSlash(joinUrlParts(pathname, 'index.html'));
     if (!this.assets.hasServerAsset(assetPath)) {
       return null;
     }
 
     // TODO(alanagius): handle etags
-
     const content = await this.assets.getServerAsset(assetPath);
 
     return new Response(content, {
       headers: {
         'Content-Type': 'text/html;charset=UTF-8',
-        // 30 days in seconds
         'Cache-Control': `max-age=${DEFAULT_MAX_AGE}`,
         ...headers,
       },
     });
   }
 
-  /**
-   * Handles the server-side rendering process for the given HTTP request, allowing for abortion
-   * of the rendering if the request is aborted. This method matches the request URL to a route
-   * and performs rendering if a matching route is found.
-   *
-   * @param request - The incoming HTTP request to be processed. It includes a signal to monitor
-   * for abortion events.
-   * @param isSsrMode - A boolean indicating whether the rendering is performed in server-side
-   * rendering (SSR) mode.
-   * @param matchedRoute - Optional parameter representing the metadata of the matched route for
-   * rendering. If not provided, the method attempts to find a matching route based on the request URL.
-   * @param requestContext - Optional additional context for rendering, such as request metadata.
-   *
-   * @returns A promise that resolves to the rendered response, or null if no matching route is found.
-   * If the request is aborted, the promise will reject with an `AbortError`.
-   */
-  private async handleAbortableRendering(
-    request: Request,
-    isSsrMode: boolean,
-    matchedRoute?: RouteTreeNodeMetadata,
-    requestContext?: unknown,
-  ): Promise<Response | null> {
-    return Promise.race([
-      new Promise<never>((_, reject) => {
-        request.signal.addEventListener(
-          'abort',
-          () => {
-            const abortError = new Error(
-              `Request for: ${request.url} was aborted.\n${request.signal.reason}`,
-            );
-            abortError.name = 'AbortError';
-            reject(abortError);
-          },
-          { once: true },
-        );
-      }),
-      this.handleRendering(request, isSsrMode, matchedRoute, requestContext),
-    ]);
-  }
-
   /**
    * Handles the server-side rendering process for the given HTTP request.
    * This method matches the request URL to a route and performs rendering if a matching route is found.
    *
    * @param request - The incoming HTTP request to be processed.
-   * @param isSsrMode - A boolean indicating whether the rendering is performed in server-side rendering (SSR) mode.
-   * @param matchedRoute - Optional parameter representing the metadata of the matched route for rendering.
+   * @param matchedRoute - The metadata of the matched route for rendering.
    * If not provided, the method attempts to find a matching route based on the request URL.
    * @param requestContext - Optional additional context for rendering, such as request metadata.
    *
    * @returns A promise that resolves to the rendered response, or null if no matching route is found.
    */
   private async handleRendering(
     request: Request,
-    isSsrMode: boolean,
-    matchedRoute?: RouteTreeNodeMetadata,
+    matchedRoute: RouteTreeNodeMetadata,
     requestContext?: unknown,
   ): Promise<Response | null> {
-    matchedRoute ??= await this.getMatchedRoute(request);
-    if (!matchedRoute) {
-      return null;
-    }
-
     const { redirectTo, status } = matchedRoute;
     const url = new URL(request.url);
 
@@ -276,42 +224,44 @@ export class AngularServerApp {
       return Response.redirect(new URL(redirectTo, url), (status as any) ?? 302);
     }
 
-    const { renderMode = isSsrMode ? RenderMode.Server : RenderMode.Prerender, headers } =
-      matchedRoute;
+    const { renderMode, headers } = matchedRoute;
+    if (
+      !this.allowStaticRouteRender &&
+      (renderMode === RenderMode.Prerender || renderMode === RenderMode.AppShell)
+    ) {
+      return null;
+    }
 
     const platformProviders: StaticProvider[] = [];
-    let responseInit: ResponseInit | undefined;
-
-    if (isSsrMode) {
-      // Initialize the response with status and headers if available.
-      responseInit = {
-        status,
-        headers: new Headers({
-          'Content-Type': 'text/html;charset=UTF-8',
-          ...headers,
-        }),
-      };
-
-      if (renderMode === RenderMode.Server) {
-        // Configure platform providers for request and response only for SSR.
-        platformProviders.push(
-          {
-            provide: REQUEST,
-            useValue: request,
-          },
-          {
-            provide: REQUEST_CONTEXT,
-            useValue: requestContext,
-          },
-          {
-            provide: RESPONSE_INIT,
-            useValue: responseInit,
-          },
-        );
-      } else if (renderMode === RenderMode.Client) {
-        // Serve the client-side rendered version if the route is configured for CSR.
-        return new Response(await this.assets.getServerAsset('index.csr.html'), responseInit);
-      }
+
+    // Initialize the response with status and headers if available.
+    const responseInit = {
+      status,
+      headers: new Headers({
+        'Content-Type': 'text/html;charset=UTF-8',
+        ...headers,
+      }),
+    };
+
+    if (renderMode === RenderMode.Server) {
+      // Configure platform providers for request and response only for SSR.
+      platformProviders.push(
+        {
+          provide: REQUEST,
+          useValue: request,
+        },
+        {
+          provide: REQUEST_CONTEXT,
+          useValue: requestContext,
+        },
+        {
+          provide: RESPONSE_INIT,
+          useValue: responseInit,
+        },
+      );
+    } else if (renderMode === RenderMode.Client) {
+      // Serve the client-side rendered version if the route is configured for CSR.
+      return new Response(await this.assets.getServerAsset('index.csr.html'), responseInit);
     }
 
     const {
@@ -352,7 +302,7 @@ export class AngularServerApp {
       });
 
       // TODO(alanagius): remove once Node.js version 18 is no longer supported.
-      if (isSsrMode && typeof crypto === 'undefined') {
+      if (renderMode === RenderMode.Server && typeof crypto === 'undefined') {
         // eslint-disable-next-line no-console
         console.error(
           `The global 'crypto' module is unavailable. ` +
@@ -361,7 +311,7 @@ export class AngularServerApp {
         );
       }
 
-      if (isSsrMode && typeof crypto !== 'undefined') {
+      if (renderMode === RenderMode.Server && typeof crypto !== 'undefined') {
         // Only cache if we are running in SSR Mode.
         const cacheKey = await sha256(html);
         let htmlWithCriticalCss = this.criticalCssLRUCache.get(cacheKey);