Angular+ASP.NET Core加载完成后如何从SSR切换为CSR？

这个问题我之前帮不少开发者解决过，结合Angular + ASP.NET Core SSR的特性，咱们可以分几步来实现“初始SSR加载，后续纯CSR导航”的需求：

1. 确保Angular客户端路由完全接管导航 #

首先要保证应用启动后，所有内部链接都通过Angular Router处理，而不是触发浏览器的默认刷新行为：

• 优先使用routerLink指令：把所有内部锚链接替换成Angular的routerLink，比如把 <a href="/about">About</a> 改成 <a [routerLink]="['/about']">About</a>，这是最直接的方式，routerLink会自动触发客户端路由。
• 初始化客户端路由：在AppComponent中，利用isPlatformBrowser判断是否处于客户端环境，确保路由完成初始化并接管导航：

  import { Component, OnInit, PLATFORM_ID, Inject } from '@angular/core';
  import { isPlatformBrowser } from '@angular/common';
  import { Router } from '@angular/router';
  
  @Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
  })
  export class AppComponent implements OnInit {
    constructor(
      @Inject(PLATFORM_ID) private platformId: Object,
      private router: Router
    ) {}
  
    ngOnInit(): void {
      if (isPlatformBrowser(this.platformId)) {
        // 强制触发客户端路由初始化，接管所有导航
        this.router.initialNavigation();
      }
    }
  }
  

• 拦截原生锚链接点击（可选）：如果有无法替换的原生<a>标签，添加全局点击事件拦截，将其转为客户端路由导航：

  ngOnInit(): void {
    if (isPlatformBrowser(this.platformId)) {
      document.addEventListener('click', (event) => {
        const anchor = (event.target as HTMLElement).closest('a');
        if (anchor && anchor.getAttribute('href')?.startsWith('/')) {
          event.preventDefault();
          this.router.navigateByUrl(anchor.getAttribute('href')!);
        }
      });
    }
  }
  

2. 配置ASP.NET Core，避免后续请求触发SSR #

初始加载用SSR，之后的请求直接返回index.html让客户端路由处理，我们可以通过Cookie标记客户端是否已加载Angular应用：

步骤1：在Angular中设置标记Cookie #

在AppComponent的ngOnInit中，当客户端初始化完成后，添加一个Cookie标记：

ngOnInit(): void {
  if (isPlatformBrowser(this.platformId)) {
    // 设置Cookie标记应用已加载，有效期1天
    document.cookie = "AngularAppLoaded=true; path=/; max-age=86400";
    this.router.initialNavigation();
  }
}

步骤2：修改ASP.NET Core的Fallback逻辑 #

在.NET 6+的Program.cs中，调整Fallback路由，检查Cookie判断是否返回静态index.html还是执行SSR：

var app = builder.Build();

// ...其他中间件配置

// 先处理已加载应用的请求，直接返回index.html
app.MapFallback(async (context) => {
  if (context.Request.Cookies.ContainsKey("AngularAppLoaded")) {
    await context.Response.SendFileAsync(Path.Combine(env.WebRootPath, "index.html"));
    return;
  }
  // 未加载应用时，走SSR逻辑
  await context.Response.Redirect("/ssr-fallback");
});

// 原有的SSR fallback路由
app.MapFallbackToAngularCliServer(n => n.ServeAngularApp());

3. 验证效果 #

启动应用后：

• 首次加载页面时，查看网络请求，确认是SSR返回的渲染后的HTML；
• 点击内部链接，观察网络请求，应该没有页面刷新的请求，路由完全在客户端处理；
• 刷新页面时，因为Cookie存在，服务器会直接返回index.html，由客户端路由加载对应页面，不再触发SSR。

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