در دو هفته گذشته وب‌سایت‌هایی را که فقط با React to Astro ساخته شده‌اند، جابه‌جا کرده‌ام. تجربه توسعه دهندگان، حتی برای یک ابزار جدید با ادغام آلفا/بتا، فوق العاده بود.
بیایید بررسی کنیم که Astro در توسعه وب چه کاری برای شما انجام می دهد:
Astro شبیه به یک مولد سایت استاتیک است. می توانید فایل ها و قالب های علامت گذاری ایجاد کنید. که برای وب سایت هایی مانند مجلات خبری، وبلاگ ها و غیره بسیار مفید است.
اما Astro فراتر از این است. این ابزاری است که به شما امکان می دهد از React، Vue، Svelte و سایر فریم ورک ها برای ایجاد آن سایت های ثابت استفاده کنید.
اگر از React یا Vue برای ایجاد لیستی از پست ها استفاده می کنید، با Astro لیست در زمان ساخت رندر می شود و به صورت HTML ایستا صادر می شود. این بدان معنی است که کاربر بلافاصله لیست پست ها را مشاهده می کند، بدون اینکه نیازی به صبر برای بارگیری جاوا اسکریپت باشد. این یک افزایش عملکرد بزرگ است.
اما اگر بخواهید از React برای رندر یک مدال یا چرخ و فلک استفاده کنید و بقیه صفحه را ثابت نگه دارید، چه؟ Astro به شما اجازه می دهد تا این نوع تعامل را با Astro Islands انجام دهید:
🏝 جزایر Astro
Astro Islands قابلیتی است که به شما امکان می دهد محتوای پویا (محتوای که از جاوا اسکریپت استفاده می کند) را در یک صفحه ثابت قرار دهید. به منظور دستیابی به این تعامل در قسمت جلو، Astro جاوا اسکریپت را فقط برای محتوای پویا درج می کند. بقیه صفحه ثابت خواهد بود. گارانتی سرعت با کاهش اندازه بسته.
Astro Islands هر کتابخانه ای را می پذیرد که بتوان در مرورگر از آن استفاده کرد!
این رویکرد همچنین اجازه می دهد تا از روش های زیادی برای بارگیری جاوا اسکریپت با دستورالعمل های مشتری استفاده کنید.
⚡️ دستورالعمل های مشتری
به طور پیش‌فرض اگر یک کامپوننت React یا Vue را در یک صفحه وارد کنید، Astro آن را در زمان ساخت رندر می‌کند و آن را به عنوان HTML ایستا صادر می‌کند. اما می توانید از Client Directive برای تغییر این رفتار استفاده کنید.
بار
این کامپوننت را با بسته جاوا اسکریپت مرتبط به محض بارگیری صفحه بارگیری می کند. این برای اجزایی که باید فوراً در صفحه شما رندر شوند مفید است.
<MyReactComponent client:load />
بیکار
هنگامی که مرورگر بارگیری صفحه و requestIdleCallback رویداد تحریک می شود. این برای اجزایی مفید است که نیازی به رندر فوری در صفحه شما ندارند، اما باید در ابتدای تعامل با کاربر حضور داشته باشند.
<Button client:load />
قابل رویت
زمانی که کامپوننت در ویوپورت قابل مشاهده باشد، کامپوننت را بارگیری می کند. این بدان معناست که وقتی کاربران مؤلفه را در صفحه می بینند.
<MyImage client:visible />
رسانه ها
بارگیری مؤلفه پس از تطبیق یک درخواست رسانه. این برای اجزایی که فقط باید در دستگاه‌ها یا اندازه‌های صفحه نمایش خاص ارائه شوند مفید است. شما باید درخواست رسانه را در دستورالعمل مشخص کنید.
<SidebarMobile client:media="(max-width: 1024px)" />
فقط
در این حالت کامپوننت در زمان ساخت رندر نمی شود. فقط در مرورگر رندر می شود. بنابراین باید کتابخانه یا چارچوب را در دستورالعمل مشخص کنید.
<SomeReactComponent client:only="react" />
<SomePreactComponent client:only="preact" />
<SomeSvelteComponent client:only="svelte" />
<SomeVueComponent client:only="vue" />
<SomeSolidComponent client:only="solid-js" />
👩💻 تجربه توسعه دهنده در Astro
یکپارچه سازی Astro با React، Vue، Svelte و سایر فریم ورک ها بسیار آسان است. شما حتی نیازی به تغییر کد خود به صورت دستی ندارید زیرا Astro CLI این کار را برای شما انجام می دهد.
در حالی که در این مقاله، من یک وب سایت کامل با Astro نمی سازم، این روش را شروع می کنید:
# Install the Astro CLI and create a new project
npm create astro@latest
از شما چند سوال می پرسد مانند نام پروژه، اگر می خواهید از یک الگو استفاده کنید، اگر می خواهید از TypeScript استفاده کنید، آیا می خواهید یک مخزن git را مقداردهی اولیه کنید و غیره:
افزودن React یا هر فریم ورکی به همین سادگی تایپ است
astro add <library/framework>
وابستگی ها را نصب می کند و اگر بخواهید فایل پیکربندی Astro را برای پذیرش کامپوننت های React تغییر می دهد.
نتیجه
اگر می خواهید یک وب سایت با عناصر تعاملی زیادی بسازید، که از جاوا اسکریپت در بسیاری از مکان ها استفاده می کند. احتمالاً نباید از Astro استفاده کنید. از آنجایی که شما را مجبور می کند جزایر Astro را در بسیاری از مؤلفه ها فعال کنید، استفاده از روش دیگری خوب است.
اما اگر می خواهید یک وب سایت مانند صفحه فرود یا یک وب سایت شخصی بسازید. چیزی که دارای تعامل صفر یا کم با جاوا اسکریپت است، Astro را امتحان کنید.
تجربه توسعه دهنده فوق العاده است. فکر میکنم عاشقش خواهی شد.
