要解决Angular SSR在客户端上双重加载的问题，可以使用以下方法：

1. 检查是否在客户端运行的环境中执行渲染代码。这可以通过使用Angular的isPlatformBrowser函数来判断是否在浏览器环境中运行。例如：

import { isPlatformBrowser } from '@angular/common';
import { Component, Inject, PLATFORM_ID } from '@angular/core';

@Component({...})
export class MyComponent {
  constructor(@Inject(PLATFORM_ID) private platformId: Object) {
    if (isPlatformBrowser(this.platformId)) {
      // 在浏览器环境中运行的代码
      // 避免在服务器端和客户端上重复加载
    }
  }
}

2. 使用Angular的TransferState服务来在服务器端和客户端之间共享数据。TransferState允许在服务器端生成的数据在客户端上继续使用，而不必重新获取。例如：

在服务器端的代码中，将数据存储在TransferState中：

import { TransferState, makeStateKey } from '@angular/platform-browser';

@Component({...})
export class MyServerComponent {
  constructor(private transferState: TransferState) {
    const data = '服务器生成的数据';
    this.transferState.set(makeStateKey('myData'), data);
  }
}

在客户端的代码中，检查TransferState是否有数据，并使用它来避免重复加载：

import { TransferState, makeStateKey } from '@angular/platform-browser';
import { Component, OnInit } from '@angular/core';

@Component({...})
export class MyClientComponent implements OnInit {
  myData: string;

  constructor(private transferState: TransferState) {}

  ngOnInit() {
    const dataKey = makeStateKey('myData');
    this.myData = this.transferState.get(dataKey, '');

    if (!this.myData) {
      // 在客户端上重新加载数据的代码
    }
  }
}

通过使用上述方法，可以避免在Angular SSR中在客户端上双重加载代码。