ساخت بلاگ با TanStack Start
جاوااسکریپت
فرانتاند
نود جیاسخلاصهٔ کاملتر
TanStack Start یکی از جدیدترین فریمورکهای وب هست که داره خیلی سریع محبوبیت پیدا میکنه. این فریمورک یه لایه سبک سمت سرور روی TanStack Router اضافه میکنه و قابلیتهایی مثل Server Functions، API Endpoints و رندر سمت سرور (SSR) رو در اختیارمون میذاره.
تو این پروژه، هدف اینه که یه بلاگ سنتی بسازیم. پستهای بلاگ به صورت فایلهای Markdown روی دیسک ذخیره میشن و اپ باید اونا رو پیدا کنه، متادیتاشون رو بخونه و لینکهاشون رو تو صفحه اصلی نمایش بده.
برای پیدا کردن فایلهای Markdown، از قابلیت import.meta.glob که Vite در اختیار میذاره استفاده میشه. این متد اجازه میده به صورت داینامیک تمام فایلهای یه دایرکتوری رو بخونیم. از روی مسیر هر فایل، اسم slug پست استخراج میشه که بعداً برای ساخت لینکها ازش استفاده میکنیم.
برای خوندن متادیتای هر پست (مثل عنوان، تاریخ، توضیحات و نویسنده) از کتابخانه gray-matter کمک میگیریم. این کتابخونه اون بخش YAML که معمولاً بالای فایلهای Markdown نوشته میشه رو تجزیه میکنه و به صورت آبجکت جاوااسکریپتی برمیگردونه.
یکی از مهمترین مفاهیمی که تو این پروژه باهاش روبرو میشیم، ایزومورفیک بودن لودرهای TanStack هست. لودرها هم روی سرور و هم روی کلاینت اجرا میشن؛ بار اول که کاربر وارد سایت میشه لودر روی سرور اجرا میشه، ولی وقتی بین صفحات جابجا میشه لودر توی مرورگر کاربر کار میکنه. این یعنی نمیتونیم مستقیم از Node.js APIs برای خوندن فایل استفاده کنیم.
راهحل این مشکل، Server Functions هست. Server Function یه تابع تعریف شدهست که همیشه روی سرور اجرا میشه، بدون استثنا. وقتی از سرور صداش میزنی، TanStack مستقیم اجراش میکنه. وقتی هم از کلاینت صداش میزنی، TanStack خودش یه درخواست شبکه میفرسته و جواب رو برمیگردونه. این یعنی کد خوندن فایل همیشه و فقط روی سرور اجرا میشه.
برای روتینگ پستهای جداگانه، از سیستم فایلمحور TanStack Router استفاده میشه. یه فایل با اسم $slug.tsx میسازیم که علامت دلار نشون میده این بخش از URL یه پارامتر داینامیکه. لودر این روت از پارامتر slug استفاده میکنه تا محتوای پست مربوطه رو از طریق یه Server Function دیگه بگیره و رندر کنه.
قسمت دوم این سری قراره به static pre-rendering بپردازه؛ یعنی چطور میشه این بلاگ رو به یه سایت استاتیک تبدیل کرد و به بهترین شکل ممکن deploy کرد.
نکات کلیدی:
- TanStack Start یه لایه سبک سمت سرور روی TanStack Router هست و SSR، Server Functions و API Endpoints رو پشتیبانی میکنه
- فایلهای Markdown پستها با import.meta.glob وایت اسکن میشن و متادیتاشون با gray-matter خونده میشه
- لودرهای TanStack ایزومورفیکن و هم روی سرور و هم کلاینت اجرا میشن
- Server Functions همیشه روی سرور اجرا میشن و برای کارهایی مثل خوندن فایل ایدهآلن
- روتینگ داینامیک با پیشوند دلار در اسم فایل ($slug.tsx) تعریف میشه
- قسمت دوم این سری به static generation و نحوه deploy بهینه میپردازه
