Angular 17 SSR动态路由页面刷新失效及预渲染性能优化求助

Problem Summary #

After upgrading to Angular 17 and enabling SSR, dynamic routes (like /buy-car/find-a-car/:single) break on page refresh in Azure (works locally). Disabling route discovery (discoverRoutes: false) fixes routing but slows load times to 5-6 seconds. Using a static routes.txt works but is unmanageable for 1000+ CMS-managed blog routes.

Solution 1: Selective Prerendering with Excluded Dynamic Routes #

Configure prerendering to skip dynamic route patterns, letting SSR handle them while keeping static pages fast:

Update your angular.json build config:

{
  "projects": {
    "my-app": {
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:application",
          "options": {
            "prerender": {
              "discoverRoutes": true,
              "exclude": [
                "/buy-car/find-a-car/:single",
                "/buy-car/find-a-car/:province/:bodytype",
                "/blog/*" // Exclude all CMS-managed blog routes
              ]
            }
          }
        }
      }
    }
  }
}

• Static routes (like /buy-car/find-a-car) are prerendered for fast loads.
• Excluded dynamic routes are served via SSR, ensuring they work on refresh without performance degradation.

Solution 2: Automate Route File Generation for CMS Routes #

Generate routes.txt dynamically during build by fetching blog routes from your CMS API:

1. Create a generate-routes.js script:

const fs = require('fs');
const axios = require('axios');

async function generateRoutes() {
  // Fetch all blog slugs from your CMS API
  const blogResponse = await axios.get('https://your-cms-domain/api/blogs');
  const blogRoutes = blogResponse.data.map(blog => `/blog/${blog.slug}`);

  // Define static routes to prerender
  const staticRoutes = [
    '/',
    '/buy-car/find-a-car'
  ];

  // Combine and write to routes.txt
  const allRoutes = [...staticRoutes, ...blogRoutes];
  fs.writeFileSync('routes.txt', allRoutes.join('\n'));
}

generateRoutes().catch(err => console.error('Failed to generate routes:', err));

2. Add a pre-build step to package.json:

"scripts": {
  "prebuild": "node generate-routes.js",
  "build": "ng build"
}

• This auto-includes all CMS blog routes in prerendering while keeping static routes fast.
• Dynamic routes (like car search parameters) still fall back to SSR if not in the generated list.

Solution 3: Fix Azure Deployment Configuration #

Since the issue only occurs on Azure, verify these settings:

• Startup Command: Ensure Azure runs the SSR server. For Angular 17, use:

  node dist/my-app/server/server.mjs
  

• Routing Rules: Configure Azure to forward all requests to the SSR server (not just static files). In Azure App Service, go to Configuration > Path Mappings and set a catch-all route (/*) to point to the SSR server.
• CDN Caching: Disable caching for dynamic routes or set cache-control headers to prevent stale content. For SSR-rendered pages, use Cache-Control: no-cache or appropriate TTL values.

Solution 4: Ensure SSR Compatibility of Dynamic Components #

Make sure your NewBuyCarListComponent works with SSR:

• Wrap browser-specific code (e.g., window, document) with isPlatformBrowser checks:

  import { Component, OnInit, Inject, PLATFORM_ID } from '@angular/core';
  import { isPlatformBrowser } from '@angular/common';
  
  @Component({...})
  export class NewBuyCarListComponent implements OnInit {
    constructor(@Inject(PLATFORM_ID) private platformId: Object) {}
  
    ngOnInit() {
      if (isPlatformBrowser(this.platformId)) {
        // Browser-only code here
      }
    }
  }
  

• Avoid using browser APIs directly in server-rendered code to prevent errors that could break route handling.

内容的提问来源于stack exchange，提问作者Sagar