تجربه‌ من از استفاده کتابخانه نمودار ApexCharts در نکست جی اس

در یکی از پروژه های ری اکت و نکست جی اس نیاز به چارت‌های تعاملی 📊 داشتم؛

zoom، tooltip، theme هماهنگ با متریال یو ای و در عین حال سازگار با معماری نکست جی اس 13 به بالا.

ApexCharts از نظر قابلیت‌ها عالی بود،

اما خیلی زود با واقعیت رندرینگ سمت سرور SSR برخورد کردم:

❌ window is not defined


راه‌حل نهایی:

- جداسازی دقیق کامپوننتهای سروری و کلاینتی

- dynamic import با ssr: false

- انتقال کامل منطق چارت به کلاینت کامپوننتی

- یک Wrapper مشترک (ParentCard) برای کنترل رابط کاربری و نگهداری ساختار


نتیجه؟

✔️ معماری تمیز

✔️ چارت‌های قابل توسعه

✔️ بدون آلودگی لایه‌ی صفحه به منطق تعاملی

درس مهم:

در نکست جی اس، انتخاب کتابخانه کافی نیست؛

نحوه‌ی قرار دادن آن در معماری مهم‌تر است.

اگر شما هم تجربه‌ای مشابه با کتابخانه های نمودار و چارت در رندرینگ سمت سرور دارید،

خوشحال می‌شم بشنوم 👇