SSR & hydration
The directive initialises DataTables in afterNextRender (browser-only). On the server the plain table HTML is rendered; on the client it's enhanced during hydration. No isPlatformBrowser guard needed, afterNextRender never runs on the server.
Why it's safe: DataTables touches document and measures layout. Running init in afterNextRender means that code is skipped entirely during SSR, so the server renders semantic table markup and the browser upgrades it after hydration.
| ID | Name | Position | Office | Age | Start date | Salary | Status |
|---|
// Inside the directive (simplified):
constructor() {
afterNextRender(() => {
// browser-only, never runs during SSR
this.table = new DataTable(this.host.nativeElement, config);
});
}
// Server render: plain <table> markup (SEO-friendly, fast paint).
// Client hydration: afterNextRender fires → DataTables enhances it.