Component dùng thư viện chart bị lỗi `window is not defined` khi build. `dynamic(..., { ssr: false })` giải quyết thế nào, và có mặt trái gì?

Lỗi xảy ra vì Next.js render component đó trên server (Node), nơi không có window/document.

Thư viện chart, editor, map thường chạm vào DOM ngay khi import.

'use client'
import dynamic from 'next/dynamic'

const Chart = dynamic(() => import('./revenue-chart'), {
  ssr: false,
  loading: () => <div className="h-64 animate-pulse" />,
})

ssr: false bảo Next.js bỏ qua component này trong lần render server, chỉ mount ở client. Kèm theo đó, code của nó bị tách thành chunk riêng và chỉ tải khi cần.

Mặt trái:
- Nội dung không có trong HTML ban đầu → bot không đọc được. Không dùng cho nội dung cần index.
- Người dùng thấy một khoảng trống rồi mới thấy component → nếu nó nằm trên màn hình đầu, LCP xấu đi. Luôn đặt loading với đúng chiều cao của component thật để không gây layout shift.
- Trong App Router, ssr: false chỉ dùng được trong Client Component; đặt trong Server Component sẽ báo lỗi.

Trước khi dùng, kiểm tra xem có cách nhẹ hơn không: nhiều thư viện chỉ chạm window bên trong useEffect — khi đó chỉ cần chuyển lời gọi vào useEffect là đủ, không cần tắt SSR.