What is the difference between afterRender and afterNextRender lifecycle hooks?

import { Component, ElementRef, ViewChild, afterNextRender } from '@angular/core';

@Component({
  selector: 'app-chart-wrapper',
  standalone: true,
  template: '<div #chartHost></div>'
})
export class ChartWrapperComponent {
  @ViewChild('chartHost') host!: ElementRef;

  constructor() {
    afterNextRender(() => {
      this.initThirdPartyLibrary(this.host.nativeElement);
    });
  }

  initThirdPartyLibrary(el: HTMLElement) {
    el.innerText = 'Dynamic Canvas Rendered here';
  }
}