چگونه AMP می تواند ثبات را در برنامه Next.js شما تضمین کند

با مزایا و معاوضه های پشتیبانی از AMP در برنامه Next.js خود آشنا شوید

حسین جرده

AMP یک چارچوب کامپوننت وب است که بارگذاری سریع صفحه را تضمین می کند. Next.js دارای پشتیبانی داخلی از AMP است.

چه چیزی یاد خواهید گرفت؟

این راهنما ابتدا به طور خلاصه توضیح می‌دهد که چگونه AMP بارگذاری سریع صفحه را تضمین می‌کند ، سپس روش‌های مختلفی را توضیح می‌دهد که می‌توانید از AMP در برنامه Next.js پشتیبانی کنید ، سپس به شما کمک می‌کند تصمیم بگیرید کدام رویکرد برای شما بهترین است .

مخاطب مورد نظر برای این راهنما یک توسعه دهنده وب است که تصمیم گرفته از Next.js استفاده کند اما مطمئن نیست که آیا از AMP پشتیبانی می کند یا خیر.

چگونه AMP بارگذاری سریع صفحه را تضمین می کند

AMP دو استراتژی اصلی برای تضمین ثبات دارد:

  • AMP HTML : شکل محدودی از HTML که بهینه سازی های خاصی را اجباری می کند و الگوهای معماری را که منجر به کندی می شود ممنوع می کند. نحوه عملکرد AMP را برای یک نمای کلی در سطح بالا از بهینه سازی ها و محدودیت ها ببینید.
  • حافظه پنهان AMP : حافظه پنهان محتوا که توسط برخی از موتورهای جستجو مانند Google و Bing استفاده می شود و از پیش اجرا برای افزایش سرعت بارگذاری صفحات استفاده می کند. ببینید چرا حافظه پنهان AMP وجود دارد تا درباره مزایا و معاوضه‌های حافظه پنهان و نحوه ذخیره‌سازی صفحه AMP من بیشتر بدانید؟ برای درک نحوه ورود صفحات AMP شما به حافظه پنهان.

چگونه می توانید از AMP در Next.js استفاده کنید

دو روش برای استفاده از AMP در Next.js وجود دارد:

  • رویکرد Hybrid AMP به شما امکان می دهد یک نسخه AMP همراه از هر صفحه Next.js ایجاد کنید.
  • رویکرد AMP-only به شما امکان می دهد AMP را تنها گزینه برای یک صفحه قرار دهید.

اگرچه Next.js معمولاً به عنوان یک چارچوب React در نظر گرفته می‌شود، اما درک این نکته مهم است که وقتی از Next.js برای سرویس‌دهی صفحات AMP استفاده می‌کنید، دیگر نمی‌توانید مؤلفه‌های React را در سمت کلاینت اجرا کنید زیرا مؤلفه‌های React مؤلفه‌های AMP معتبر نیستند. به عبارت دیگر، Next.js دیگر یک چارچوب React نیست، بلکه یک موتور قالب سمت سرور برای تولید صفحات AMP است.

نحوه تصمیم گیری برای استفاده از رویکرد AMP هیبریدی یا فقط AMP

اگر در مورد عملکرد بارگذاری جدی هستید، یک صفحه فقط AMP می تواند راه خوبی باشد تا مطمئن شوید صفحه شما سریع می شود و سریع می ماند. اما نکته اینجاست: به منظور تضمین ثبات، AMP الگوهای معماری خاص و عناصر HTML را که اغلب منجر به کندی صفحات می‌شوند، ممنوع می‌کند. به عنوان مثال، AMP به جاوا اسکریپت همزمان سفارشی اجازه نمی‌دهد، زیرا منابع مسدودکننده رندر یکی از دلایل رایج بارگیری کند صفحه هستند.

برای اینکه بفهمید آیا رویکرد فقط AMP برای شما مناسب است یا خیر، باید بفهمید که آیا تمام کد ظاهری شما می‌تواند در AMP HTML نمایش داده شود یا خیر:

  • نحوه عملکرد AMP را بخوانید تا محدودیت‌های معماری سطح بالای AMP و بهینه‌سازی‌های اجباری را درک کنید.
  • برچسب‌های HTML را بخوانید تا ببینید AMP چه تگ‌های HTML را مجاز و ممنوع می‌کند، کاتالوگ مؤلفه‌های AMP را مرور کنید تا مؤلفه‌های سفارشی‌ای را که انجمن AMP برای حل موارد استفاده متداول ساخته است، ببینید و برای یادگیری نحوه استفاده از جاوا اسکریپت سفارشی برای پیاده‌سازی ، amp-script را بررسی کنید. ویژگی هایی که AMP در حال حاضر از آنها پشتیبانی نمی کند.

حتی اگر یک رویکرد فقط AMP برای صفحه شما کار نمی کند، ممکن است ایده خوبی باشد که در صورت امکان از AMP استفاده کنید، زیرا پایداری تضمین شده AMP HTML و حافظه پنهان AMP. رویکرد Hybrid AMP در Next.js راهی برای سرویس دادن به صفحات AMP به صورت مشروط ارائه می‌کند. با این حال، هزینه تعمیر و نگهداری بالاتری نیز ایجاد می کند زیرا شما را ملزم به نگهداری دو نسخه از هر صفحه می کند.

نتیجه

AMP تضمین می کند که سایت شما با اعمال الگوهایی که منجر به سرعت می شود و الگوهایی که منجر به کندی می شوند، سریع می شود و سریع می ماند. AMP HTML و AMP Cache دو راه اصلی هستند که AMP پایداری را تضمین می کند. اما قبل از استفاده از AMP، باید مطمئن شوید که می‌تواند تمام نیازهای سایت شما را پشتیبانی کند.