Transferring State to the Client

TransferState caches server-side data in the rendered HTML to avoid duplicate client requests during hydration.

How TransferState Works

1. Server fetches data and stores it in TransferState
2. TransferState serializes data into the HTML (as a script tag)
3. Client reads the data from TransferState during hydration
4. Client uses cached data instead of making a duplicate request

Using TransferState

import { TransferState, makeStateKey } from '@angular/core';
import { isPlatformServer } from '@angular/common';

const USERS_KEY = makeStateKey<User[]>('users');

@Injectable({ providedIn: 'root' })
export class UserService {
  private http = inject(HttpClient);
  private transferState = inject(TransferState);
  private platformId = inject(PLATFORM_ID);

  getUsers(): Observable<User[]> {
    // Check if data was transferred from server
    if (this.transferState.hasKey(USERS_KEY)) {
      const users = this.transferState.get(USERS_KEY, [] as User[]);
      this.transferState.remove(USERS_KEY);
      return of(users);
    }

    // Fetch from API
    return this.http.get<User[]>('/api/users').pipe(
      tap(users => {
        // Store in TransferState on server
        if (isPlatformServer(this.platformId)) {
          this.transferState.set(USERS_KEY, users);
        }
      })
    );
  }
}

makeStateKey

const USERS_KEY = makeStateKey<User[]>('users');
const CONFIG_KEY = makeStateKey<AppConfig>('config');

makeStateKey creates a typed key for reading and writing TransferState.

TransferState Methods

TransferState is most useful for read-only API data that both server and client need.

Server-Side Data Fetching

// On the server, fetch data before rendering
@Component({
  selector: 'app-product-list',
  template: `<p *ngFor="let product of products">{{ product.name }}</p>`,
})
export class ProductListComponent implements OnInit {
  products: Product[] = [];

  constructor(
    private productService: ProductService,
    private transferState: TransferState,
    @Inject(PLATFORM_ID) private platformId: Object,
  ) {}

  ngOnInit(): void {
    this.productService.getProducts().subscribe(products => {
      this.products = products;

      if (isPlatformServer(this.platformId)) {
        this.transferState.set(PRODUCTS_KEY, products);
      }
    });
  }
}

Benefits of TransferState

1. No duplicate requests — Client uses server-fetched data
2. Faster perceived load — Data is already in the HTML
3. Reduced server load — Fewer API calls from the client
4. Consistent state — Server and client see the same data

When to Use TransferState

• Read-only API data needed on both server and client
• Configuration data
• User profile data
• Product catalog data

When NOT to Use TransferState

• Data that changes frequently
• User-specific mutable data
• Real-time data (WebSockets)