مفاهیم SSR و Hydration در Angular
یکی از مهمترین پیشرفتهای Angular اینه که Server-Side Rendering (SSR) و Hydration حالا بهصورت جدی و رسمی در خود فریمورک پشتیبانی میشن و دیگه چیز اضافه و فرعی نیستن.
قبلاً با Angular Universal میتونستیم صفحات رو روی سرور render کنیم.
اما حالا با پشتیبانی از Hydration، Angular میتونه:
🔸اول HTML را روی سرور render کنه
🔸خیلی سریع همون HTML را برای مرورگر بفرسته
🔸به جای اینکه همه چیز رو دوباره از صفر render کنه، همون HTML رو دوباره استفاده (reuse) کنه که با bind کردن event listenerهایی که از DOM صدا زده میشه hydration اتفاق میفته و به همون render اولیه اضافه و فراخوانی میشه بدون اینکه DOM از اول ساخته بشه.
نتیجه چیه؟
🔸یک: First Contentful Paint (FCP) سریعتر میشه
🔸 دو: SEO بهتر میشه
🔸سه: Core Web Vitals بهبود پیدا میکنه (موارد LCP و FID و CLSای که برای Audit کنسول چک میکنیم برای بهبود performance و SEO)
برای داشبورد سازمانی enterprise و پلتفرمهای عمومی، این موضوع واقعاً مهم و تأثیرگذاره و
خبری هم از Blink زدن نیست
#ssr
#seo
#angularhydration
@angularcafe
یکی از مهمترین پیشرفتهای Angular اینه که Server-Side Rendering (SSR) و Hydration حالا بهصورت جدی و رسمی در خود فریمورک پشتیبانی میشن و دیگه چیز اضافه و فرعی نیستن.
قبلاً با Angular Universal میتونستیم صفحات رو روی سرور render کنیم.
اما حالا با پشتیبانی از Hydration، Angular میتونه:
🔸اول HTML را روی سرور render کنه
🔸خیلی سریع همون HTML را برای مرورگر بفرسته
🔸به جای اینکه همه چیز رو دوباره از صفر render کنه، همون HTML رو دوباره استفاده (reuse) کنه که با bind کردن event listenerهایی که از DOM صدا زده میشه hydration اتفاق میفته و به همون render اولیه اضافه و فراخوانی میشه بدون اینکه DOM از اول ساخته بشه.
نتیجه چیه؟
🔸یک: First Contentful Paint (FCP) سریعتر میشه
🔸 دو: SEO بهتر میشه
🔸سه: Core Web Vitals بهبود پیدا میکنه (موارد LCP و FID و CLSای که برای Audit کنسول چک میکنیم برای بهبود performance و SEO)
برای داشبورد سازمانی enterprise و پلتفرمهای عمومی، این موضوع واقعاً مهم و تأثیرگذاره و
خبری هم از Blink زدن نیست
#ssr
#seo
#angularhydration
@angularcafe
👍3❤1