‏فرانت‌اند فقط سه مسئولیت داره

تو این مقاله اومده که تاریخ فرانت‌اند رو می‌تونی با یه سؤال دنبال کنی: state دست کیه. نویسنده می‌گه این دعوا سی سال طول کشیده ولی جوابش جلوی چشممون بوده، چون هر معماری وب سه مسئولیت داره. ناوبری، یعنی مالکیت URL و اینکه با کلیک و سابمیت فرم چه اتفاقی می‌افته، مال کلاینته. محتوا مال سروره و سرور منبع معتبرشه. افوردنس‌ها هم یعنی state محلی UI و کار نیمه‌تمام و آپدیت optimistic، که برمی‌گردن به کلاینت.

شکل همهٔ معماری‌ها یکیه: کلاینت به سرور به کلاینت. کاربر ناوبری می‌کنه یا اکشنی می‌زنه، محتوا از سرور برمی‌گرده و کلاینت جاش می‌ندازه. نکتهٔ اصلی نویسنده اینه که این جریان نامتقارنه: نوشتن‌ها از لایهٔ ناوبری رد می‌شن، با فرم و اکشن و invalidation، ولی لایهٔ محتوا هیچ‌وقت نمی‌نویسه و فقط منتشر می‌کنه. همین نامتقارنی باعث می‌شه لایه‌ها روی هم سوار شن و اگه بشکنه، دو سیستم stateful با هم می‌جنگن.

با همین عینک می‌شه ابزارها رو سر جاشون گذاشت. HTMX لایهٔ ۱ رو کم می‌کنه و بار اصلی رو با HTML روی لایهٔ ۲ می‌ذاره. LiveView پنجرهٔ خوندن رو به طول کل session می‌کشه. Astro هر سه لایه رو صریح می‌چینه و Server Components شبیه همونه با این تفاوت که state مشترک کلاینت حفظ می‌شه. SPA با JSON API لایهٔ ۳ رو تا جایی بزرگ می‌کنه که با لایهٔ ۱ یکی می‌شه. نویسنده می‌گه تفاوتشون تو قدرت بیان نیست، تو transport و ارگونومیه.

حالا ادعای اصلی. تو Solid 2.0 روتر هیچ کامپوننتی مثل نداره. کامپایلر JSX روی هر a[href] و form[action] یه claim ثبت می‌کنه و روتر همون رو می‌قاپه. یعنی مارک‌آپی که سرور رندر کرده، بدون هیچ کامپوننت کلاینتی هم تو ناوبری سمت کلاینت شریک می‌شه و قبل و بعد از hydration کار می‌کنه. فرم‌ها هم مستقیم به server functionها وصل می‌شن:

export const renameUser = action(
  async (id: string, formData: FormData) => {
    "use server";
    updateUser(id, { name: String(formData.get("name")) });
  }
);

سمت محتوا، Solid با Seroval هم دادهٔ ساده و هم Promise و async iterator رو از روی سیم می‌فرسته، و گراف واکنشی خودش هم رد می‌شه: تا وقتی ریکوئست بازه، سرور هر بار که promise ست می‌شه یا iterator مقدار می‌ده همون expression رو دوباره اجرا می‌کنه و مقدار تازه رو می‌فرسته تا مارک‌آپ سرجاش morph بشه. نویسنده می‌گه پیش‌نمایش Server Components به‌زودی اعلام می‌شه و نمونه‌های کارا الان هم تو ریپوی Solid هست.

چیزی که این مدل رو امن نگه می‌داره دو قاعده‌ست. اول اینکه گراف زندهٔ سرور باید projectionی از state پایدار باشه و هیچ‌وقت منبع حقیقت نباشه، پس reconnect به session و replay رویداد وابسته نیست. دوم اینکه بیشتر از یک بار hydrate نمی‌کنیم. هر تکه محتوای سرور با کلید همون فراخوانی، یعنی تابع و آرگومان‌هاش، آدرس‌دهی می‌شه و شبکه اتصال مستقیمی به DOM نداره، پس یه preload رو hover نمی‌تونه صفحهٔ جلوی چشمت رو خراب کنه.

نکات کلیدی:

• سه مسئولیت به ترتیب: ناوبری (کلاینت)، محتوا (سرور)، افوردنس‌ها (کلاینت).
• نوشتن‌ها از لایهٔ ناوبری می‌رن، لایهٔ محتوا فقط خوندنی و یک‌طرفه‌ست.
• روتر Solid 2.0 کامپوننت نداره و روی a[href] و form[action] claim می‌ذاره.
• سریالایز با Seroval انجام می‌شه و Promise و async iterator هم از روی سیم رد می‌شن.
• قاعدهٔ سخت: فقط یک بار hydrate، و گراف زندهٔ سرور هیچ‌وقت منبع حقیقت نیست.