رندر، PWA و کارایی وب
Rendering, PWAs and web performance«کدام حالت رندر؟» سؤالی است که هر پروژهٔ فرانتاند در هفتهٔ اول با آن روبهرو میشود و معمولاً بر اساس عادت جواب داده میشود، نه بر اساس نیاز. این مسیر هر حالت را با همان اپ پیاده میکند، عددهایش را اندازه میگیرد، و نشان میدهد هرکدام چه چیزی را سریع و چه چیزی را کند میکنند. مستقل از فریمورک.
پیشرفت تو
درصد هر فصل از دو چیز میآید: چقدر از بخشهایش را خواندهای (۵۵٪) و چند تمرینش را تیک زدهای (۴۵٪). همهچیز داخل مرورگر خودت میماند.
فصل
فصلها به هم وابستهاند و ترتیبشان معنا دارد. هر مسیر با پروژههای نهایی تمام میشود: ساده، متوسط، پیچیده.
نقشهٔ حالتهای رندر
CSR، SSR، SSG، ISR — با یک نمودار و یک جدول تصمیم.
در نوبت نوشتنCSR
سریعترین ناوبری، کندترین بارگذاری اول.
در نوبت نوشتنSSR
HTML آماده از سرور، و هزینهای که روی سرور میگذارد.
در نوبت نوشتنSSG و ISR
ساخت در زمان بیلد، و بازسازی تدریجی.
در نوبت نوشتنhydration و هزینهاش
چرا صفحهٔ دیدهشده هنوز کلیک نمیپذیرد.
در نوبت نوشتنمعماری جزیرهای و RSC
Astro، Server Component و resumability.
در نوبت نوشتنمعیارها
LCP، INP، CLS و TTFB — و اینکه هرکدام چه میگویند.
در نوبت نوشتناندازهگیری
Lighthouse، دادهٔ میدانی و پروفایل مرورگر.
در نوبت نوشتنراهبرد بارگذاری
preload، prefetch، lazy و مسیر بحرانی.
در نوبت نوشتنتصویر و رسانه
فرمت، اندازه، srcset و بارگذاری تنبل.
در نوبت نوشتنکش
HTTP cache، ETag، CDN و باطلسازی.
در نوبت نوشتنService Worker
رهگیری درخواست، کش آفلاین و بهروزرسانی.
در نوبت نوشتنPWA
manifest، نصبپذیری و تجربهٔ شبهبومی.
در نوبت نوشتنآفلاین و همگامسازی
صف تغییرات، تعارض و پسزمینه.
در نوبت نوشتناعلان push
Web Push، مجوز و پیادهسازی سمت سرور.
در نوبت نوشتنSEO و رندر
چه چیزی را خزنده میبیند و چه چیزی را نه.
در نوبت نوشتنپروژهٔ ۱ — یک اپ، چهار حالت رندر
همان صفحه را در CSR، SSR، SSG و ISR بساز و عدد بگیر.
در نوبت نوشتنپروژهٔ سادهپروژهٔ ۲ — تبدیل به PWA
نصبپذیر، آفلاینکار و با اعلان.
در نوبت نوشتنپروژهٔ متوسطپروژهٔ ۳ — بودجهٔ کارایی
یک سایت کند را با اندازهگیری به هدف برسان.
در نوبت نوشتنپروژهٔ پیچیده