ساخت بلاگ با TanStack: نسخه کامل و استاتیک
جاوااسکریپت
فرانتاندخلاصهٔ کاملتر
در قسمت اول این سری، یه بلاگ کارآمد با TanStack Start ساخته شد که از Shiki برای هایلایت کردن کدها و server functionها برای خوندن فایلهای Markdown استفاده میکرد. اما یه مشکل مهم باقی موند: کندی راهاندازی اولیه.
مشکل اینجاست که Shiki هنگام لود شدن، مقدار زیادی WASM پارس میکنه و این کار روی یه MacBook Pro مدرن چیزی حدود ۲ ثانیه طول میکشه. این تأخیر در یه سرور معمولی شاید مهم نباشه، اما در پلتفرمهای serverless مثل Netlify، Vercel یا AWS Lambda که توابع مدام ریاستارت میشن، این «cold start» میتونه تجربه کاربری رو خراب کنه.
وقتی بهش فکر میکنیم، میبینیم که یه بلاگ اصلاً نیاز به سرور نداره. محتوای بلاگ ذاتاً استاتیکه و فریمورکهای مدرن ابزارهایی برای پیشرندر کردن صفحات دارن. پس بهترین کار اینه که کل سایت رو به صورت استاتیک بسازیم و روی یه CDN بذاریم.
فعال کردن pre-rendering در TanStack Start خیلی سادست: کافیه در فایل vite.config.ts گزینه prerender رو فعال کنی. بعد از اون، در فرآیند build، TanStack از روت اصلی شروع میکنه، تمام لینکها رو دنبال میکنه و برای هر صفحه یه فایل HTML جداگانه میسازه. خروجی نهایی در پوشه .output/public قرار میگیره.
برای تست این قابلیت، یه سرور Express ساده میشه راه انداخت که فایلهای استاتیک رو سرو کنه. صفحات وقتی مستقیم در مرورگر باز میشن، درست کار میکنن؛ اما اگه بین صفحات کلیک کنیم، میبینیم که هنوز server functionها فراخوانی میشن. دلیلش اینه که TanStack Start بعد از لود اولیه HTML، اپلیکیشن رو client-side تحویل میگیره و لینکها رو به شیوه SPA مدیریت میکنه.
اینجاست که ابزار دوم وارد میشه: staticFunctionMiddleware از پکیج مخصوص TanStack. وقتی این middleware رو به server functionها اضافه میکنیم، در زمان build، تمام فراخوانیهای توابع ضبط میشن و نتایجشون به فایلهای JSON ذخیره میشه. بعد از اون، هر بار که کاربر navigation میکنه، بهجای اجرای server function، فقط یه فایل JSON ساده fetch میشه. دیگه هیچ پردازشی سمت سرور نیازی نیست.
در پایان، TanStack Start نشون میده که فراتر از قابلیتهای معروفش مثل type safety قوی و data loading انعطافپذیر، برای سایتهای استاتیک هم ابزارهای خلاقانه و قدرتمندی داره.
نکات کلیدی:
- Shiki هنگام لود، WASM سنگینی پارس میکنه که در محیطهای serverless cold start ایجاد میکنه
- با فعال کردن prerender در تنظیمات TanStack، صفحات در زمان build به HTML استاتیک تبدیل میشن
- TanStack بعد از لود اولیه، کنترل رو به client میده و navigation به شیوه SPA انجام میشه
- با پکیج @tanstack/start-static-server-functions میشه نتایج server functionها رو هم استاتیک کرد
- خروجی نهایی فقط HTML و JSON هست و میشه روی هر CDN یا S3 bucket دپلوی کرد
