Define server routes and rendering types.

Author: dimeloper

angular.json

@@ -52,7 +52,7 @@
               "budgets": [
                 {
                   "type": "initial",
-                  "maximumWarning": "500kB",
+                  "maximumWarning": "620kB",
                   "maximumError": "1MB"
                 },
                 {

src/app/app.config.server.ts

@@ -3,10 +3,13 @@ import { provideServerRendering } from '@angular/platform-server';
 import { appConfig } from './app.config';
 import { UniversalDeviceDetectorService } from './services/universal-device-detector.service';
 import { DeviceDetectorService } from 'ngx-device-detector';
+import { provideServerRoutesConfig } from '@angular/ssr';
+import { serverRoutes } from './app.routes.server';
 
 const serverConfig: ApplicationConfig = {
   providers: [
     provideServerRendering(),
+    provideServerRoutesConfig(serverRoutes),
     {
       provide: DeviceDetectorService,
       useClass: UniversalDeviceDetectorService,

src/app/app.routes.server.ts

@@ -0,0 +1,20 @@
+import { RenderMode, ServerRoute } from '@angular/ssr';
+
+export const serverRoutes: ServerRoute[] = [
+  {
+    path: '', // This page is static, so we prerender it (SSG)
+    renderMode: RenderMode.Prerender,
+  },
+  {
+    path: 'pokedex-bad', // This renders the "/pokedex-bad" route on the server (SSR)
+    renderMode: RenderMode.Server,
+  },
+  {
+    path: 'pokedex-optimized', // This renders the "/pokedex-optimized" route on the server (SSR)
+    renderMode: RenderMode.Server,
+  },
+  {
+    path: '**', // All other routes - like the individual pokemon pages - will be rendered on the client (CSR)
+    renderMode: RenderMode.Client,
+  },
+];

src/app/app.routes.ts

@@ -2,7 +2,7 @@ import { Routes } from '@angular/router';
 
 export const routes: Routes = [
   {
-    path: 'pokedex',
+    path: '',
     loadComponent: () =>
       import('./components/intro/intro.component').then(m => m.IntroComponent),
   },
@@ -34,5 +34,5 @@ export const routes: Routes = [
         m => m.DetailsOptimizedPageComponent
       ),
   },
-  { path: '', redirectTo: '/pokedex', pathMatch: 'full' },
+  { path: '**', redirectTo: '/', pathMatch: 'full' },
 ];