docs: revise and consolidate server rendering guides

This commit updates the server rendering documentation and merges the prerendering, hybrid, and SSR sections for better clarity and organization.

Closes angular#52884 and angular#60079.

Author: alan-agius4

adev/src/app/routes.ts

@@ -214,6 +214,14 @@ const REDIRECT_ROUTES: Route[] = [
     path: 'guide/components/anatomy-of-components',
     redirectTo: '/guide/components',
   },
+  {
+    path: 'guide/hybrid-rendering',
+    redirectTo: '/guide/ssr',
+  },
+  {
+    path: 'guide/prerendering',
+    redirectTo: '/guide/ssr',
+  },
   {
     path: 'guide',
     children: [

adev/src/app/sub-navigation-data.ts

@@ -427,20 +427,10 @@ const DOCS_SUB_NAVIGATION_DATA: NavigationItem[] = [
             contentPath: 'guide/performance/overview',
           },
           {
-            label: 'Server-side rendering',
+            label: 'Server-side and hybrid-rendering',
             path: 'guide/ssr',
             contentPath: 'guide/ssr',
           },
-          {
-            label: 'Build-time prerendering',
-            path: 'guide/prerendering',
-            contentPath: 'guide/prerendering',
-          },
-          {
-            label: 'Hybrid rendering with server routing',
-            path: 'guide/hybrid-rendering',
-            contentPath: 'guide/hybrid-rendering',
-          },
           {
             label: 'Hydration',
             path: 'guide/hydration',

adev/src/content/ecosystem/service-workers/app-shell.md

@@ -11,7 +11,7 @@ Do this with the following Angular CLI command:
 
 <docs-code language="shell">
 
-ng new my-app --routing
+ng new my-app
 
 </docs-code>
 

adev/src/content/examples/ssr/server.ts

@@ -1,63 +1,60 @@
 // #docplaster
 
-import {APP_BASE_HREF} from '@angular/common';
-import {CommonEngine} from '@angular/ssr/node';
+import {
+  AngularNodeAppEngine,
+  createNodeRequestHandler,
+  isMainModule,
+  writeResponseToNodeResponse,
+} from '@angular/ssr/node';
 import express from 'express';
+import {dirname, resolve} from 'node:path';
 import {fileURLToPath} from 'node:url';
-import {dirname, join, resolve} from 'node:path';
-import bootstrap from './src/main.server';
-
-// The Express app is exported so that it can be used by serverless Functions.
-export function app(): express.Express {
-  const server = express();
-  const serverDistFolder = dirname(fileURLToPath(import.meta.url));
-  const browserDistFolder = resolve(serverDistFolder, '../browser');
-  const indexHtml = join(serverDistFolder, 'index.server.html');
-  const commonEngine = new CommonEngine();
-
-  server.set('view engine', 'html');
-  server.set('views', browserDistFolder);
-
-  // TODO: implement data requests securely
-  // Serve data from URLS that begin "/api/"
-  server.get('/api/**', (req, res) => {
-    res.status(404).send('data requests are not yet supported');
-  });
-  // Serve static files from /browser
-  server.get(
-    '*.*',
-    express.static(browserDistFolder, {
-      maxAge: '1y',
-    }),
-  );
-
-  // All regular routes use the Angular engine
-  server.get('*', (req, res, next) => {
-    const {protocol, originalUrl, baseUrl, headers} = req;
-
-    commonEngine
-      .render({
-        bootstrap,
-        documentFilePath: indexHtml,
-        url: `${protocol}://${headers.host}${originalUrl}`,
-        publicPath: browserDistFolder,
-        providers: [{provide: APP_BASE_HREF, useValue: req.baseUrl}],
-      })
-      .then((html) => res.send(html))
-      .catch((err) => next(err));
-  });
 
-  return server;
-}
-
-function run(): void {
+const serverDistFolder = dirname(fileURLToPath(import.meta.url));
+const browserDistFolder = resolve(serverDistFolder, '../browser');
+
+const app = express();
+const angularApp = new AngularNodeAppEngine();
+
+/**
+ * Serve static files from /browser
+ */
+app.use(
+  express.static(browserDistFolder, {
+    maxAge: '1y',
+    index: false,
+    redirect: false,
+  }),
+);
+
+// TODO: implement data requests securely
+// Serve data from URLS that begin "/api/"
+app.get('/api/**', (req, res) => {
+  res.status(404).send('data requests are not yet supported');
+});
+
+/**
+ * Handle all other requests by rendering the Angular application.
+ */
+app.use('/**', (req, res, next) => {
+  angularApp
+    .handle(req)
+    .then((response) => (response ? writeResponseToNodeResponse(response, res) : next()))
+    .catch(next);
+});
+
+/**
+ * Start the server if this module is the main entry point.
+ * The server listens on the port defined by the `PORT` environment variable, or defaults to 4000.
+ */
+if (isMainModule(import.meta.url)) {
   const port = process.env['PORT'] || 4000;
-
-  // Start up the Node server
-  const server = app();
-  server.listen(port, () => {
+  app.listen(port, () => {
     console.log(`Node Express server listening on http://localhost:${port}`);
   });
 }
 
-run();
+/**
+ * Request handler used by the Angular CLI (for dev-server and during build) or Firebase Cloud Functions.
+ */
+export const reqHandler = createNodeRequestHandler(app);

adev/src/content/examples/ssr/src/app/app.config.server.ts

@@ -1,9 +1,11 @@
 import {mergeApplicationConfig, ApplicationConfig} from '@angular/core';
 import {provideServerRendering} from '@angular/platform-server';
+import {provideServerRouting} from '@angular/ssr';
 import {appConfig} from './app.config';
+import {serverRoutes} from './app.routes.server';
 
 const serverConfig: ApplicationConfig = {
-  providers: [provideServerRendering()],
+  providers: [provideServerRendering(), provideServerRouting(serverRoutes)],
 };
 
 export const config = mergeApplicationConfig(appConfig, serverConfig);

adev/src/content/examples/ssr/src/app/app.config.ts

@@ -1,6 +1,6 @@
 // #docplaster
 import {importProvidersFrom} from '@angular/core';
-import {provideProtractorTestingSupport} from '@angular/platform-browser';
+import {provideProtractorTestingSupport, withEventReplay} from '@angular/platform-browser';
 import {provideClientHydration} from '@angular/platform-browser';
 import {ApplicationConfig} from '@angular/core';
 import {provideRouter} from '@angular/router';
@@ -15,7 +15,7 @@ export const appConfig: ApplicationConfig = {
   providers: [
     provideRouter(routes),
     provideHttpClient(withFetch()),
-    provideClientHydration(),
+    provideClientHydration(withEventReplay()),
     provideProtractorTestingSupport(), // essential for e2e testing
 
     // TODO: Remove from production apps

adev/src/content/examples/ssr/src/app/app.routes.server.ts

@@ -0,0 +1,8 @@
+import {RenderMode, ServerRoute} from '@angular/ssr';
+
+export const serverRoutes: ServerRoute[] = [
+  {
+    path: '**',
+    renderMode: RenderMode.Prerender,
+  },
+];