بررسی سال 2024 | Astro

مقدمه

Astro یک چارچوب وب مناسب برای وب سایت های محتوا محور است. معماری جزایر آن به شما امکان می دهد صفحات استاتیک را با عناصر پویا ترکیب کنید و تعادلی بین عملکرد و تعامل برقرار کنید. علاوه بر این، می توانید از SSR ها، میان افزارها و نقاط پایانی برای ساخت برنامه هایی استفاده کنید که سمت سرور نیز اجرا می شوند.

به روز رسانی های اخیر به طور خاص ویژگی هایی را برای ساخت سایت های پویا برجسته کرده اند و به تکامل Astro به یک چارچوب قوی و تمام پشته اشاره می کنند. برای آشنایی بیشتر با Astro، به مقاله رسمی چرا Astro مراجعه کنید؟ اسناد

در این پست، آنچه را که به‌عنوان مهم‌ترین رویدادها در اکوسیستم Astro در سال 2024 می‌بینم، خلاصه می‌کنم. همچنین تا آنجایی که می‌دانم، به آنچه ممکن است در سال 2025 رخ دهد، اشاره خواهم کرد.

اگر علاقه مند هستید، نسخه 2023 (به زبان ژاپنی) این مقاله را نیز ارسال کرده ام. برای مشاهده پیشرفت Astro در سال 2023 می توانید آن را بررسی کنید.

شاخص های سلامت پروژه

نسخه های نسخه

از اوایل سال 2024، Astro نسخه 4.0.8 بود و در زمان نگارش این مقاله، نسخه 5.1.1 در اواخر سال منتشر شد. از جمله نسخه های بتا، در سال 2024 در مجموع 169 نسخه منتشر شد. این تقریباً برابر با تعداد انتشارات در سال 2023 است که 175 مورد بود.

در سال 2023، نسخه اصلی از 1 به 4 جهش کرد و تصور سرعت سریع افزودن ویژگی‌ها و بهبودها را ایجاد کرد. در سال 2024 نسخه اصلی فقط از 4 به 5 رسید و به نظر می رسد سرعت ضربه های نسخه تا حدودی کاهش یافته است.

برای کسانی که در مورد جزئیات هر نسخه کنجکاو هستند، می توانید لیست کامل نسخه های Astro را در GitHub بررسی کنید.

ستاره در GitHub

بر اساس تاریخچه ستاره‌های GitHub، ستاره‌های GitHub Astro در ابتدای سال 2024 حدود 37000 نفر بودند، اما در پایان سال به حدود 48000 افزایش یافتند. در حالی که این مقدار کمی کندتر از افزایش 15000 در سال 2023 است، اما همچنان جهشی بیش از 10000 برای سال است. منصفانه است که بگوییم تعداد ستاره های Astro هنوز در یک روند صعودی سالم است.

دانلودهای NPM

بر اساس روند npm، دانلودهای هفتگی Astro در اوایل سال 2024 به 185902 رسید که تا 15 دسامبر به 364201 افزایش یافت. این تقریباً دو برابر است، بنابراین Astro به وضوح در اینجا نیز با سرعت ثابتی در حال رشد است.

وضعیت جاوا اسکریپت

در دسته Meta Frameworks وضعیت جاوا اسکریپت 2024 منتشر شده در دسامبر، Astro در رتبه 1 قرار گرفت:

• علاقه (نسبت احساسات مثبت در میان پاسخ دهندگانی که نام یک مورد را شنیده اند)
• بازداشت (نسبت خلق مثبت در میان پاسخ دهندگانی که از یک آیتم استفاده کرده اند)
• مثبت بودن (سهم خلق مثبت در میان پاسخ دهندگانی که نظر خود را ابراز کردند)

این در بالای آن است استفاده (نسبت پاسخ دهندگانی که از یک آیتم استفاده کرده اند) امسال از رتبه چهارم به رتبه دوم افزایش یافت و تنها پس از Next.js:

Astro نیز به مقام پنجم صعود کرد آگاهی (نسبت پاسخ دهندگانی که در مورد یک مورد شنیده یا استفاده کرده اند).

به طور کلی، هر معیار یا “در مقایسه با سال گذشته بهبود یافته است” یا “هنوز رتبه اول را دارد”. بر اساس بررسی وضعیت جاوا اسکریپت، سال 2024 را می توان سال کلیدی پیشرفت برای Astro دانست.

ویژگی های جدید و به روز

لایه محتوا

مجموعه های محتوا در Astro 2.0 به عنوان راهی برای مدیریت ایمن محتوای محلی نوشته شده در Markdown و غیره معرفی شدند. در Astro 5.0، Content Layer API جدید اضافه شد تا نحوه تعریف محتوا را گسترش دهد و آن را حتی برای موارد استفاده مختلف انعطاف پذیرتر و قدرتمندتر کند.

پیش از این، مجموعه‌های محتوای Astro فقط می‌توانستند محتوایی مانند فایل‌های Markdown یا MDX را که به صورت محلی در ذخیره‌شده قرار دارند مدیریت کنند. src/content دایرکتوری:

سپس طرح پیکربندی محتوای شما می‌تواند قسمت جلویی هر فایل Markdown را تأیید کند، هنگام کار با داده‌های محتوای استخراج‌شده از ویرایشگر، تکمیل خودکار را ارائه کند. getCollection عملکرد و غیره

با API لایه محتوای جدید معرفی شده در نسخه 5.0، می توانید مزایای اعتبارسنجی و تکمیل خودکار را حفظ کنید و در عین حال تعاریف محتوای خود را گسترش دهید. برای مثال، اکنون می‌توانید داده‌های API خارجی را به‌عنوان یک مجموعه با داده‌های جدید «بارگیری» کنید loader دارایی:

import { defineCollection, z } from "astro:content";
const countries = defineCollection({
  loader: () => fetch("https://api.example.com/countries").then(res => res.json()),
  schema: z.object({ /* schema definition here */ }),
export const collections = { countries };

تحت این لایه جدید محتوا، type (که قبلا در اختیار شما قرار داده اید defineCollection) قبلاً ارث محسوب می شود، الف loader جایی است که شما نحوه بارگیری داده ها را تعریف می کنید و مدیریت هر نوع منبع داده را ممکن می کند، نه فقط فایل های محلی.

در نسخه 5 شما دو لودر داخلی برای محتوای محلی خود دریافت می کنید، glob() و file()، که انجام کارهایی مانند:

const blog = defineCollection({
  loader: glob({ pattern: "**/*.md", base: "./src/data/blog" }),
  schema: z.object({ /* schema definition here */ }),

این مجموعه وبلاگ مشابه روش قدیمی مبتنی بر فایل محلی عمل می کند. در ضمن چون loader می‌تواند هر عملکردی باشد، همچنین می‌توانید داده‌ها را از API یا پایگاه‌های اطلاعاتی خارجی بکشید یا حتی محتوا را در لحظه تولید کنید.

بنابراین، لایه محتوای جدید، نحوه مدیریت محتوا در Astro را در بر می گیرد و همچنین به شما این امکان را می دهد که آزادانه بارگذارهای داده سفارشی را تعریف و توزیع کنید، و به میزان زیادی قابلیت های Astro را در مورد محتوا گسترش می دهد. API بارگذار محتوا برای ایجاد بارگذارهای سفارشی نیز با ویژگی های مفیدی مانند meta ذخیره کلید ارزش برای ذخیره متادیتا در مورد محتوای شما و rendered فیلد برای ذخیره خروجی رندر شده

با مجموعه‌های محتوای تازه‌سازی‌شده‌ای که توسط API لایه محتوا پشتیبانی می‌شوند، ادامه دهید و لودر خود را بسازید – اگر خوب بود، آن را به‌عنوان یک بسته npm منتشر کنید و آن را با انجمن Astro در دسته بارکننده‌های محتوا در کتابخانه ادغام‌ها به اشتراک بگذارید! به عنوان مثال، Storyblok، Cloudinary، و Hygraph قبلاً لودرهای خود را منتشر کرده اند، بنابراین شما می توانید داده ها را از این سرویس ها بدون نیاز به نوشتن لودر خود از ابتدا استخراج کنید.

برای اطلاعات بیشتر درباره مجموعه‌های محتوا، به اسناد رسمی مراجعه کنید.

اقدامات Astro

Astro اکنون نقاط پایانی را برای رسیدگی به درخواست های HTTP سمت سرور ارائه می دهد. اما در نسخه 4.15، Astro Actions معرفی شد تا تماس با سرویس‌های باطنی که کمتر از نوع دیگ بخار و ایمن‌تر هستند را آسان‌تر کند. برخی از مزایای Astro Actions عبارتند از:

• اعتبار سنجی ورودی خودکار با استفاده از Zod
• به طور خودکار توابع ایمن نوع ایجاد کنید که اقدامات شما را فراخوانی می کند
• مدیریت خطای استاندارد از طریق ActionError نوع و isInputError تابع

در اینجا مثالی است از اینکه چگونه می توانید یک عمل را در آن تعریف کنید src/actions/index.ts:

import { defineAction } from "astro:actions";
import { z } from "astro:schema";
  // Define an action that takes a name and returns a greeting
  getGreeting: defineAction({
    // The schema for the input sent to this action
    // The server-side handler for this action
    handler: async (input) => {
      return `Hello, ${input.name}!`; // input is validated and can be accessed type-safely

توجه داشته باشید که کد تأیید نمی‌بینید Content-Type، اعتبار سنجی ورودی و غیره را انجام دهید. Astro Actions این الگو را مدیریت می کند تا بتوانید روی منطق اصلی کسب و کار تمرکز کنید.

سپس در سمت مشتری:

button>Get greetingbutton>
// Import the `actions` object that contains the `getGreeting` action
import { actions } from "astro:actions";
const button = document.querySelector("button");
button?.addEventListener("click", async () => {
  // Call the `getGreeting` action
  const { data, error } = await actions.getGreeting({ name: "Actions" });
  // Show the result in an alert if there's no error

از طریق واردات actions از astro:actions، یک تابع برای فراخوانی دریافت می کنید getGreeting اقدام با تشکر از مدار ارائه شده توسط شما، می توانید تماس بگیرید getGreeting نوع ایمن و البته، می‌توانید ماوس را روی اکشن در ویرایشگر خود نگه دارید تا انواع ورودی و برگشتی را ببینید یا cmd+click برای پرش به تعریف آن

همچنین می توانید استفاده کنید isInputError عملکردی برای بررسی اینکه آیا error یک خطای اعتبارسنجی یا پرتاب است ActionError برای تنظیم کدهای وضعیت HTTP خاص و غیره در کنترلر اقدام خود.

با توجه به نامش، اکشن های Astro تحت تأثیر عملکردهای سرور React هستند. هر دو سعی می‌کنند مشکلات مشابهی را حل کنند، اما به نظر می‌رسد Astro Action با اعتبارسنجی خارج از جعبه و مدیریت خطای ساختاری یک گام فراتر می‌رود. ممکن است در پروژه Astro نیازی به ارتباط گسترده سمت سرور نداشته باشید، اما در صورت لزوم می توانید Actions را اضافه کنید – برای مثال، یک تابع مانند به یک پست وبلاگ اضافه کنید.

برای کسب اطلاعات بیشتر در مورد Astro Actions، اسناد رسمی را بررسی کنید.

جزایر سرور

Astro 5.0 یک رویکرد رندر جدید به نام جزیره سرور را معرفی کرد. معماری جزیره‌های Astro همیشه اجازه هیدراتاسیون انتخابی بخش‌های خاصی از صفحه را می‌دهد، اما اکنون Server Islands این مفهوم را گسترش می‌دهد تا به شما امکان پیش‌نمایش بخش‌هایی از صفحه خود را در سرور بدهد. در زیر تصویر به اشتراک گذاشته شده در اطلاعیه اصلی جزیره سرور آمده است:

همانطور که نشان داده شده است، می توانید محتوای ارائه شده توسط سرور را در یک صفحه ثابت جاسازی کنید. قطعات استاتیک را می توان توسط CDN کش کرد، در حالی که قطعات رندر شده توسط سرور پس از بارگیری اولیه صفحه، با تنبلی واکشی می شوند و سرعت بارگذاری اولیه سریع را حفظ می کنند و در عین حال انعطاف پذیری محتوا را افزایش می دهند. این رویکرد به سطحی از عملکرد دست می یابد که با SSR سنتی امکان پذیر نبود.

برای فعال کردن جزایر سرور، به سادگی اضافه کنید server:defer دستورالعمل به اجزای Astro شما. به عنوان مثال، فرض کنید یک مؤلفه دارید که آواتار کاربر را از سمت سرور بازیابی می کند:

import { getUserAvatar } from "../sessions";
const userSession = Astro.cookies.get("session");
const avatarURL = await getUserAvatar(userSession);
img alt="User avatar" src={avatarURL} />

در صفحه ای که از این کامپوننت استفاده می کند، به سادگی اضافه می کنید server:defer بخشنامه:

import Avatar from "../components/Avatar.astro";

و بس! در حالی که صفحه به صورت ایستا تولید می شود Avatar کامپوننت در صورت تقاضا توسط سرور ارائه می شود. علاوه بر این، شما همچنین می توانید محتوای بازگشتی را مشخص کنید که در هنگام بارگیری جزیره سرور نمایش داده شود، مشابه React’s Suspense:

import Avatar from "../components/Avatar.astro";
import GenericAvatar from "../components/GenericAvatar.astro";
  GenericAvatar slot="fallback" />

اگر می‌خواهید توضیح عمیق‌تری در مورد تفاوت جزیره‌های سرور با رندر پیش از رندر یا رندر درخواستی Astro ارائه دهید، به مقاله من (به زبان ژاپنی) مراجعه کنید. این روش‌های رندر Next.js و جزیره‌های سرور Astro را مقایسه می‌کند و به شما درک وسیع‌تری از تکنیک‌های رندر مدرن می‌دهد.

برای کسب اطلاعات بیشتر در مورد جزایر سرور، اسناد رسمی را بررسی کنید.

Astro DB

در مارس 2024، Astro ارائه کرد @astrojs/db بسته مدیریت پایگاه داده در نسخه اول، محیط های تولید برای اتصال به یک سرویس پایگاه داده مدیریت شده به نام Astro Studio در نظر گرفته شده بود. در حال حاضر می توانید به هر سرور libSQL متصل شوید. برای اطلاعات بیشتر در مورد Astro Studio، به پروژه های مرتبط مراجعه کنید.

برای استفاده از Astro DB ابتدا باید طرح جدول خود را تعریف کنید db/config.ts فایل:

import { defineTable, column } from "astro:db";
const Author = defineTable({
    id: column.number({ primaryKey: true }),
const Comment = defineTable({
    authorId: column.number({ references: () => Author.columns.id }),
export default defineDb({
  tables: { Author, Comment },

پس از آن، در db/seed.ts، تابعی را صادر کنید که پایگاه داده شما را بارگیری می کند:

import { db, Comment, Author } from "astro:db";
export default async function() {
  await db.insert(Author).values([
    { id: 1, name: "Kasim" },
  await db.insert(Comment).values([
    { authorId: 1, body: "Hope you like Astro DB!" },
    { authorId: 2, body: "Enjoy!"},

هنگامی که سرور توسعه را چرخانده اید، پایگاه داده به طور خودکار ایجاد و بارگذاری می شود.

پرس و جوهای پایگاه داده از طریق سرویس گیرنده Drizzle انجام می شود. را db مشتری وارد شده از astro:db به طور خودکار خود را برای اتصال به پایگاه داده صحیح پیکربندی می کند، بنابراین می توانید بلافاصله شروع به ایجاد پرس و جو کنید:

import { db, Comment } from "astro:db";
const comments = await db.select().from(Comment);
  comments.map(({ author, body }) => (

با Astro DB، می توانید سادگی راه اندازی Astro را با قابلیت های جستجوی قدرتمند Drizzle برای مدیریت پایگاه های داده در پروژه های Astro خود ترکیب کنید. اگرچه به نظر می رسد هنوز در مراحل اولیه خود است، Astro DB در حال حاضر عملکرد بیش از اندازه کافی برای توابع کوچکتر نیاز به پایگاه داده ارائه می دهد. حتما در پروژه بعدی خود تست آن را در نظر بگیرید!

برای جزئیات بیشتر در مورد Astro DB به اسناد رسمی مراجعه کنید.

astro:circ

Astro 5.0 معرفی شد astro:env، روشی جدید برای مدیریت ایمن متغیرهای محیطی. با astro:env، شما می توانید:

• یک زمینه استفاده (مشتری یا سرور) را مشخص کنید تا مشخص شود که چگونه / کجا می توان از متغیرها استفاده کرد.
• متغیرها را به‌عنوان مخفی علامت‌گذاری کنید تا در معرض مشتریان قرار نگیرند یا در ساخت سرور تعبیه نشده باشند
• مشخص کنید که آیا یک متغیر مورد نیاز است یا اختیاری و بررسی کنید که متغیرهای مورد نیاز هنگام راه اندازی سرور تنظیم شده باشند
• انواع متغیرها را تعریف کنید و نیازی به تبدیل نوع دستی در برنامه خود نداشته باشید

شما طرح متغیر محیطی خود را در فایل پیکربندی Astro خود تعریف می کنید:

import { defineConfig } from "astro/config";
export default defineConfig({

سپس استفاده کنید envField کمک کننده تعریف میدان:

import { defineConfig, envField } from "astro/config";
export default defineConfig({
      API_URL: envField.string({ context: "client", access: "public", optional: true }),
      PORT: envField.number({ context: "server", access: "public", default: 4321 }),
      API_SECRET: envField.string({ context: "server", access: "secret" }),

در اینجا ما از گزینه هایی مانند context، access، و optional برای مشخص کردن ویژگی هایی مانند زمینه ای که در آن متغیر می توان به آن دسترسی داشت، مخفی بودن و اختیاری بودن آن. انواع متغیرها توسط توابع کمکی مانند اعلان می شوند envField.string یا envField.number.

سپس می توانید این متغیرها را وارد کرده و از آن استفاده کنید astro:env/*:

import { API_URL } from "astro:env/client";
import { PORT } from "astro:env/server";
import { API_SECRET } from "astro:env/server";

اگرچه به نظر یک ویژگی کوچک است، متغیرهای محیطی اغلب منبع سردرد در توسعه برنامه هستند، بنابراین داشتن یک رویکرد داخلی و ایمن بسیار مفید است.

اسناد رسمی را برای تنظیم متغیرهای محیطی ایمن از نظر نوع بررسی کنید.

بازنویسی درخواست

Astro 4.13 Rewriting Request را معرفی کرد، قابلیتی که به شما امکان می دهد مسیری متفاوت را بدون هدایت مشتری به صفحه جدید ارائه دهید. این بدان معنی است که URL مرورگر یکسان می ماند در حالی که سرور درخواست را به مسیر دیگری در پشت صحنه هدایت می کند و نتیجه را طوری برمی گرداند که گویی پاسخ به درخواست اصلی است. این ویژگی به ویژه برای سناریوهایی مفید است، مانند زمانی که می‌خواهید یک محتوا را از طریق چندین مسیر بدون نگهداری فایل‌های منبع مختلف ارائه دهید.

با تماس می توانید از بازنویسی ها استفاده کنید Astro.rewrite ویژگی در اجزای Astro شما:

return Astro.rewrite("/login")

یا در یک فایل میان افزار:

import type { APIContext } from "astro";
export function GET({ rewrite }: APIContext) {
  return rewrite("/login");

برای جزئیات بیشتر در مورد بازنویسی پرس و جو، به اسناد رسمی مراجعه کنید:

Container API

Container API که در مرحله 2 نقشه راه پروژه Astro در سال 2023 قرار داشت، به عنوان یک ویژگی آزمایشی در Astro 4.9 پیاده سازی شد. این ویژگی به شما این امکان را می‌دهد که اجزای Astro را مستقل از زمینه برنامه، شبیه به روش‌های مختلف ارائه شده توسط رندر کنید react-dom/server در React اگر علاقه مند به کسب اطلاعات بیشتر در مورد پس زمینه Container API هستید، مقاله سال گذشته من را برای جزئیات بیشتر بررسی کنید.

برای استفاده از Container API، ابتدا باید یک کانتینر (محیطی که کامپوننت در آن رندر می شود) ایجاد کنید و روش هایی مانند فراخوانی کنید. renderToString یا renderToResponse:

import { experimental_AstroContainer } from "astro/container";
import Card from "../src/components/Card.astro";
const container = await experimental_AstroContainer.create();
const result = await container.renderToString(Card);

result حاوی HTML رندر شده خواهد بود Card مؤلفه‌ای که می‌توانید برای مقاصد آزمایشی استفاده کنید، مانند بررسی اینکه آیا رشته مورد انتظار خاصی در آن وجود دارد یا خیر. برای مرجعی در مورد نحوه نوشتن تست با Container API، به نمونه پروژه رسمی که نحوه استفاده از Container API با Vitest را نشان می دهد، مراجعه کنید.

علاوه بر این renderToString، نیز وجود دارد renderToResponse روش و شما می توانید داده های strut یا اسلات را از طریق گزینه های مختلف منتقل کنید. برای جزئیات بیشتر در مورد کانتینر API، به اسناد رسمی مراجعه کنید.

در Astro Together، یک نسخه ی نمایشی توسط متیو فیلیپس وجود داشت که نشان می داد چگونه می توان از کانتینر API برای جاسازی اجزای Astro (با جزیره ها!) در یک پروژه PHP استفاده کرد که بسیار چشمگیر بود. حتما آن را نیز بررسی کنید!

استودیو Astro

استودیو Astro به عنوان اولین سرویس مدیریت شده Astro در اوایل سال 2024 راه اندازی شد، اما متأسفانه تعطیلی آن را در سپتامبر اعلام کرد. این پست توضیح می‌دهد که استودیو Astro قصد دارد:

1. به همه توسعه دهندگان Astro یک راه حل ذخیره سازی داده SQL با کارایی بالا و مقرون به صرفه ارائه دهید که استفاده آسان است و به طور یکپارچه با Astro ادغام می شود.
2. برای حمایت از توسعه و رشد مستمر Astro، یک مدل کسب و کار پایدار بسازید

متأسفانه نکته دوم آنطور که ما انتظار داشتیم موفق نبود و منجر به تصمیم به تعطیلی استودیو Astro شد.

در مورد برنامه خاموشی، به شرح زیر است:

• دعوت‌نامه‌ها به استودیوی Astro بسته خواهند ماند.
• کاربران موجود دیگر نمی توانند پس از 1 اکتبر 2024 پایگاه داده جدیدی ایجاد کنند.
• پایگاه داده های موجود پس از 1 مارس 2025 دیگر در دسترس نخواهند بود.
• همه پایگاه‌های داده باقیمانده در ۱ مارس ۲۰۲۵ یا اندکی پس از آن حذف خواهند شد.

اگر از Astro Studio استفاده می کنید، حتماً از قبل برای مهاجرت خود به سرویس پایگاه داده دیگری برنامه ریزی کنید.

در همین حال، Astro DB همچنان برای استفاده در پروژه های Astro شما در دسترس خواهد بود. در نسخه 4.15، Astro DB پشتیبانی از اتصال به هر سرور libSQL را معرفی کرد، بنابراین می توانید یک سرور libSQL را میزبانی کنید یا از یک سرویس مدیریت شده مانند Turso برای ادامه استفاده از Astro DB استفاده کنید.

فروشگاه Astro

Astro Storefront یک پروژه سایت تجارت الکترونیک است که بسیاری از ویژگی های جدیدتر Astro را که در بالا ذکر شد، از جمله اقدامات و astro:env. این وضعیت فعلی قابلیت های Astro را ارائه می دهد و مرجع عالی برای ساخت پروژه های Astro خود شما است. کد منبع Storefront به صورت عمومی در GitHub در دسترس است، و از همان کد در تولید برای تقویت فروشگاه Astro Swag استفاده می شود، جایی که می توانید کالاهای Astro را خریداری کنید.

Astro زندگی خود را به عنوان یک تولید کننده سایت ایستا آغاز کرد، اما در سال های اخیر به طور فعال عملکرد سمت سرور خود را گسترش داده است، اکنون قادر به ایجاد سایت هایی با محتوای پویا مانند سایت های تجارت الکترونیک بدون قربانی کردن UX است. Astro Storefront نمونه ای از این روند است و در مارس 2024 یک راهنمای تجارت الکترونیک نیز منتشر شد تا به شما کمک کند تا سایت تجارت الکترونیک خود را با Astro بسازید.

پروژه README از Astro Storefront تصمیمات طراحی و موارد دیگر را پوشش می دهد، بنابراین همراه با خود کد، راهی عالی برای یادگیری تکنیک های توسعه Astro به صورت عملی است. اگر در حال برنامه ریزی یک پروژه جدی Astro هستید، حتما آن را بررسی کنید!

Astro Ecosystem CI

Ecosystem CI مکانیزمی برای حفظ کیفیت کلی اکوسیستم نرم افزاری است. این از جامعه Vite سرچشمه می گیرد که عمدتا توسط dominikg رهبری می شود:

اکوسیستم Vite بسیار بزرگ است، با کتابخانه ها و ابزارهای جدید همیشه در حال ظهور است. نکته منفی این است که هر تغییر غیرمنتظره ای در Vite می تواند یک اثر موج دار بزرگ داشته باشد. Ecosystem CI با بررسی مداوم بسته‌های اکوسیستم اصلی برای هر تغییر Vite، به حداقل رساندن این خطر کمک می‌کند، و اطمینان حاصل می‌کند که چیزها به طور غیرمنتظره خراب نمی‌شوند – یا اگر خراب شوند، می‌توانند فوراً با همکاری نگهبانان بسته برطرف شوند.

Ecosystem CI فراتر از Vite به پروژه های دیگری مانند:

و اکنون Astro با اجرای خود از Ecosystem CI که در withastro/astro-ecosystem-ci موجود است به این روند پیوسته است.

می‌توانید نتایج بررسی‌های CI را در https://github.com/withastro/astro-ecosystem-ci/actions ببینید. هر گردش کار دارای وظایفی برای بسته‌های موجود در اکوسیستم است (مثلاً Starlight) و ساخت، اجرا و غیره را برای اطمینان از سازگاری با بسته withastro/astro آزمایش می‌کنند.

Ecosystem CI کم و بیش توسعه دهندگان بسته را هدف قرار داده است، بنابراین اگر به سادگی از Astro استفاده می کنید، این چیزی نیست که لازم باشد نگران آن باشید. گفته می‌شود، اگر بسته‌ای در اکوسیستم به طور ناگهانی شکسته شود، Ecosystem CI می‌تواند بینش مفیدی در مورد آنچه در حال وقوع است ارائه دهد. حتی اگر مستقیماً در توسعه منبع باز مشارکت نداشته باشید، درک مفهوم اکوسیستم CI می تواند به شما کمک کند تا در بسته های توسعه یافته داخلی، مانند بسته هایی که در سیستم های شرکت شما استفاده می شود، ثبات داشته باشید.

نور ستاره

Starlight یک تم مستند است که در سال 2023 منتشر شد و اکنون اولین سالگرد آن را پشت سر گذاشته است. نسخه آن در ابتدای سال 2024 v0.15.2 بود و اکنون در نسخه 0.30.3 است که نشان دهنده سرعت ثابت به روز رسانی است. به عنوان مثال v0.21.0 معرفی شد جزء برای نمایش درختان دایرکتوری و جزء برای نمایش توالی مراحل و v0.27.0 پشتیبانی از رندر سمت سرور اضافه شده است.

استفاده از Starlight در سال گذشته با پروژه‌های معروفی مانند Biome و Knip به شدت افزایش یافت و همچنان شاهد افزایش استفاده در سال 2024 هستیم. برخی از نمونه‌ها عبارتند از:

رابط کاربری Starlight دارای پشتیبانی چند زبانه است، که آن را برای سایت هایی با اسناد به هر زبانی عالی می کند. اگر نیاز به ساخت یک سایت مستندات دارید، قطعا Starlight را به عنوان یک کاندید در نظر بگیرید.

کلاک و بمب

در ژوئن 2024، نیت مور، یکی از خالقان Astro، اعلام کرد که تیم اصلی را ترک خواهد کرد:

او اشاره کرد که اکنون بر روی Clack تمرکز خواهد کرد، چارچوبی برای ساخت ابزارهای تعاملی CLI. سپس در ماه اکتبر، او Bombshell را معرفی کرد که میزبان پروژه های او در آینده است، از جمله Clack:

Clack اجزای CLI مانند ورودی متن، چند انتخاب، توابع چرخشی و موارد دیگر را فراهم می کند و به شما امکان می دهد به راحتی برنامه های CLI تعاملی ایجاد کنید. برای آگاهی از قابلیت‌های آن، می‌توانید یک نسخه آزمایشی را در https://www.clack.cc/ بررسی کنید:

مستندات هنوز در دست توسعه است، اما Clack در حال حاضر توسط پروژه‌های با مشخصات بالا استفاده می‌شود، از جمله:

در وب سایت Bombshell درباره Bombshell و Clack بیشتر بیاموزید و اگر می خواهید درگیر شوید به سرور Discord آنها بپیوندید.

موضوعات دیگر

Astro Together

در 28 می 2024، اولین جلسه آفلاین Astro Together در مونترال، کانادا برگزار شد. یک پست وبلاگ با خلاصه و عکس هایی از این رویداد وجود دارد.

گفتگوهای این رویداد در فهرست پخش YouTube در دسترس است. این جریان می‌گوید: Fred K. Schott درباره وضعیت فعلی و آینده Astro، بن هولمز در حال نمایش Astro در عمل، متیو فیلیپس توضیح می‌دهد که چه چیزی در Astro 4.10 تغییر کرده است، و Sarah Reinsberger درباره Docs، Starlight و جامعه Astro صحبت می‌کند.

چندین پست وبلاگ نیز پیرامون این رویداد منتشر شد:

بلوز

Astro اکنون حساب Bluesky خود را دارد. Bluesky قابلیتی به نام Starter Packs را ارائه می دهد که چندین حساب مرتبط را در یک رشته جمع می کند تا بتوانید همه آنها را به یکباره دنبال کنید. Astro بسته شروع رسمی خود را دارد که ردیابی افراد مرتبط با Astro را آسان می کند. با خیال راحت آن را بررسی کنید!

Netlify به عنوان شریک رسمی استقرار

نتلیفای شریک رسمی استقرار Astro شده است. این بدان معناست که نتلیفای اکنون 12500 دلار در ماه برای پشتیبانی از توسعه Astro کمک می کند. از آن اعلامیه، Netlify نیز به عنوان کمک به توسعه جزیره سرور ذکر شد. Netlify یک انتخاب محبوب برای استقرار پروژه‌های Astro است، بنابراین دیدن پشتیبانی از توسعه Astro بسیار خوب است.

Netlify همچنین از Astro برای تقویت سایت پلتفرم توسعه دهنده خود استفاده می کند که نمونه عالی دیگری از Astro در عمل است.

Google IDX به عنوان شریک رسمی ویرایشگر آنلاین

Google IDX اکنون شریک رسمی ویرایشگر آنلاین Astro است.

Project IDX (Google IDX) یک محیط توسعه آنلاین شبیه به StackBlitz است. از آنجایی که توسط گوگل ارائه شده است، می تواند با Gemini و Google Cloud ادغام شود. دیوید ایست، که DevRel را در این پروژه رهبری می‌کند، از روزهای حضورش در Firebase با Astro ارتباط دارد، از جمله پروژه سال گذشته برای بازسازی وبلاگ Firebase با Astro.

از طریق این مشارکت، Google IDX هر ماه 10000 دلار برای حمایت از توسعه Astro حمایت مالی می کند.

Biome نسخه 1.6.0

Biome – یک فرمت‌کننده و لاینتر برای جاوا اسکریپت، JSON، CSS و موارد دیگر – پشتیبانی جزئی از Astro را در نسخه 1.6 خود اضافه کرد. نسخه 1.6 همچنین پشتیبانی جزئی از Vue و Svelte را معرفی کرد. برای Astro، فقط بخشی از اسکریپت در داخل حصارهای کد (---) تاکنون پشتیبانی می شود. برای جزئیات بیشتر به صفحه پشتیبانی زبان Biome مراجعه کنید.

Astro Storefront همچنین از Biome استفاده می‌کند، بنابراین می‌توانید آن را برای نمونه‌ای در دنیای واقعی بررسی کنید.

Clerk Astro SDK

Clerk، پلتفرم و کتابخانه ای از اجزای احراز هویت کاربر، یک SDK برای Astro در جولای 2024 منتشر کرد.

من هنوز از آن استفاده نکرده ام، اما طبق اعلام، اجزای ورود Astro را به علاوه ارائه می دهد clerkMiddleware ویژگی بررسی احراز هویت میان‌افزار و غیره. لوسیا یکی دیگر از کتابخانه‌های احراز هویت شناخته شده برای استفاده با Astro است، اما Clerk بیشتر یک راه‌حل انتها به انتها است. داشتن چندین گزینه احراز هویت برای اکوسیستم خوب است.

اگر علاقه مند به افزودن احراز هویت و مجوز به پروژه Astro خود هستید، اسناد Clerk را برای Astro SDK بررسی کنید.

کیت آموزشی

TutorialKit یک ابزار سازنده آموزشی است که توسط StackBlitz توسعه یافته است که از Astro در زیر هود با استفاده از WebContainer API استفاده می کند. این به شما امکان می دهد آموزش های کاملاً تعاملی ایجاد کنید که به طور کامل در مرورگر اجرا شوند. نسخه ی نمایشی TutorialKit را بررسی کنید تا ببینید چه کاری می تواند انجام دهد.

می‌توانید درباره TutorialKit در اسناد رسمی آن اطلاعات بیشتری کسب کنید. این یک ابزار عالی برای ایجاد آموزش است، بنابراین اگر قصد نوشتن آن را دارید، حتما آن را امتحان کنید!

IKEA، پورشه

Astro اکنون توسط بسیاری از وب سایت ها، از جمله نام های بزرگ مانند IKEA و Porsche استفاده می شود:

سایت IKEA از View Transitions استفاده موثری می کند و ناوبری را بسیار سرگرم کننده می کند. در همین حال، سایت پورشه Astro’s Vue را اجرا می کند و از معماری جزایر به خوبی استفاده می کند.

اینها فقط دو نمونه از نمونه های زیاد هستند، و من مطمئن هستم که بسیاری از سایت های خارق العاده Astro وجود دارند که من درباره آنها اطلاعاتی ندارم. اگر سایت‌های عالی Astro را می‌شناسید، لطفاً با افزودن آنها به شرکت‌ها و وب‌سایت‌های با استفاده از Astro، آنها را با انجمن Astro به اشتراک بگذارید!

به سال 2025 نگاه می کنیم

Astro یک نقشه راه پروژه عمومی دارد که در آن برنامه های توسعه آینده مورد بحث قرار می گیرد. نقشه راه پیشنهادات را در چهار مرحله دنبال می کند:

بنابراین اگر می‌خواهید ببینید چه چیزی در Astro در حال آمدن است، ببینید چه چیزی در مرحله 2 و 3 است.

پیشنهادات خاص را می توانید در پروژه «نقشه راه عمومی» مشاهده کنید. در زمان نگارش، پنج پیشنهاد زیر در مرحله 3 قرار دارند:

بیایید نگاهی به برخی از این پیشنهادات در زیر بیاندازیم.

جلسات

جلسات مکانیزمی برای ذخیره موقت داده های خاص کاربر، مانند وضعیت ورود به سیستم یا سبد خرید هستند. تا به حال، شما باید به طور مستقیم کوکی ها یا ذخیره سازی محلی را مدیریت می کردید. پیشنهاد جدید به شما امکان می دهد جلسات را در Astro مدیریت کنید. داده ها در سمت سرور ذخیره می شوند و فقط شناسه جلسه به عنوان یک کوکی برای مشتری ارسال می شود که باید به امنیت کمک کند.

اکنون Session ها به صورت آزمایشی در Astro 5.1 معرفی شده اند. برای کار با جلسات، از آن استفاده خواهید کرد Astro.session شی get و set روش ها Session ها در بسیاری از زمینه ها، از جمله صفحات، مؤلفه ها، نقاط پایانی، اقدامات یا میان افزار در دسترس هستند. در اینجا نمونه‌ای از مقاله آمده است که نحوه بازیابی و به‌روزرسانی داده‌های سبد خرید را در یک جلسه نشان می‌دهد:

export const prerender = false;
const cart = await Astro.session.get("cart");
a href="/cart">🛒 {cart?.length ?? 0} itemsa>

import { defineAction } from "astro:actions";
import { z } from "astro:schema";
  addToCart: defineAction({
    input: z.object({ productId: z.string() }),
    handler: async (input, context) => {
      const cart = await context.session.get("cart");
      cart.push(input.productId);
      await context.session.set("cart", cart);

از آنجایی که جلسات هنوز آزمایشی هستند، باید به صراحت مشخص کنید که کجا این داده ها را با استفاده از آن ذخیره کنید driver تنظیم به عنوان مثال، در اینجا نحوه تعیین درایور سیستم فایل هنگام استقرار در یک محیط Node.js آمده است:

  adapter: node({ mode: "standalone" }),

اینکه کدام درایور در دسترس است بستگی به محیط تولید شما دارد. به عنوان مثال، می توانید از درایورهای Cloudflare KV یا Redis نیز استفاده کنید. برای لیست کامل درایورها، به اسناد بدون فروشگاه (که Astro Sessions به صورت داخلی استفاده می کند) مراجعه کنید.

وقتی جلسات از وضعیت آزمایشی خارج می شوند، برنامه این است که خود آداپتورها به طور خودکار درایور صحیح را انتخاب کنند، بنابراین در آینده نیازی به پیکربندی دستی آن نخواهید داشت. اگر بعد از امتحان متوجه مشکلی شدید یا پیشنهاداتی برای بهبود دارید، حتماً بازخورد خود را با روابط عمومی پیشنهاد در میان بگذارید.

تصاویر واکنش گرا

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

این پیشنهاد با هدف معرفی الف layout دارایی که تولید را خودکار می کند srcset و sizes، به توسعه دهندگان این امکان را می دهد تا به راحتی بهترین شیوه های تصویربرداری را دنبال کنند.

اکنون به عنوان یک ویژگی آزمایشی در Astro 5.0 در دسترس است و برای جزئیات بیشتر می توانید اسناد تصویربرداری پاسخگوی آزمایشی را بررسی کنید.

فونت ها

فونت ها برای طراحی وب سایت اساسی هستند، اما Astro در حال حاضر یک رویکرد داخلی برای کار با آنها ارائه نمی دهد. راهنمای رسمی فونت می‌تواند به شما در شروع کار کمک کند، اما هنوز بسیاری از تصمیم‌ها، مانند مکان میزبانی فونت‌ها، نحوه بارگیری آنها و غیره را به توسعه‌دهنده واگذار می‌کند. هدف این پیشنهاد گنجاندن بهترین شیوه های فونت در Astro است و کار با فونت ها را در پروژه های شما آسان تر می کند.

جزئیات پیاده‌سازی هنوز در حال بحث است، اما می‌توانید Astro Fonts RFC را با نمونه‌هایی از شکل ظاهری پیکربندی پیدا کنید.

افکار نهایی

این پایان بررسی شخصی من از ویژگی ها و رویدادهای جدیدی است که امسال در اکوسیستم Astro رخ داده است. در سال 2024، شاهد بهبودهای بیشتر مبتنی بر برنامه مانند Actions و Server Islands بودیم، اگرچه مشخص نیست که آیا این مسیر ادامه خواهد داشت یا خیر. ویژگی‌های آزمایشی آینده پیرامون تصاویر، فونت‌ها و نمادها ممکن است نشان‌دهنده تعهد بیشتر به تجربه توسعه‌دهنده از وظایف اساسی اما اغلب دشوار مدیریت سایت‌های متمرکز بر محتوا باشد. من مشتاقانه منتظرم ببینم آنها در آینده چه می کنند.

امیدوارم این مقاله الهام بخش شما باشد تا ویژگی‌های جدید Astro را کشف کنید و سعی کنید آنچه را که ممکن است آزمایش کنید. خیلی ممنون که تا اینجا خواندید!