چگونه Astro DB به من یادآوری کرد که SSR واقعاً چه معنایی دارد

Summarize this content to 400 words in Persian Lang
من اخیراً از Astro برای ساختن سایت‌های استاتیک استفاده می‌کنم. در حال حاضر، من روی یک وب سایت نیمه پیچیده رندر شده (SSR) سمت سرور کار می کنم. از آنجایی که استفاده از Astro بسیار لذت بخش است، من آن را برای این پروژه انتخاب کردم. این پست جنبه ظریف اما مهم استفاده از Astro با SSR فعال و Astro DB را روشن می‌کند که فوراً در مستندات و راه‌حل آن مشخص نیست.

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

چیزی که من در این پروژه استفاده می کنم:

ساده بود—من می‌خواستم نمایه کاربر را در فایل قابل ترکیب Vue بازیابی کنم، که سپس این اطلاعات را در مؤلفه Vue پردازش و نمایش می‌دهد. من فکر کردم که به همان سادگی در Vue بود.

در اینجا یک مثال ساده از کدی است که من در ابتدا داشتم

کلاس خدمات Astro DB

// db/services/UserProfile.service.ts
import { db, UserProfile } from ‘astro:db’;

export default class UserProfile {
static async getUserProfile(userId: string) {
const userData = await db.select().from(UserProfile);
return userData;
}
}

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

نمای ترکیبی

// src/composables/useUserProfile.ts
import UserProfile from ‘db/services/UserProfile’

export function useUserProfile(userId: string) {
const userData = await UserProfile.getUserProfile(userId)

// business logic, etc..

return {
userData
}
}

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

سرراست، درست است؟

با راه‌اندازی، پیام‌های خطایی دریافت کردم که به صراحت بیان نمی‌کرد چه مشکلی دارد. حتی گیج کننده تر، وقتی دستور شروع برنامه را تغییر دادم، خطاهای مختلفی دریافت کردم. من ابتدا از طریق استاندارد خود شروع کردم astro dev دستور داده و به صفحه‌ای که داده‌ها را درخواست می‌کند پیمایش کردید، اما کاملاً با خطا مواجه شد. صفحه دائماً با این خطا به روز می شد: Internal server error: Failed to resolve import “\db\seed.js”

از خطای مشخص کردن seed.js، من فرض کردم که مشکلی با داده های seed من وجود دارد.چیزی که برای حل این مشکل تلاش کردم:

اصلاح داده های بذر و جداول تعریف شده
مانند همه توسعه دهندگان: جستجو در گوگل و ردیت برای مشکلات مشابه
Astro GitHub Repo را برای مشکلات مشابه بررسی کرد

من نتوانستم این خطا را پیدا کنم که به طور خاص توسط کسی ذکر شده است. من متوجه شدم که ممکن است این یک اشکال با Astro DB باشد، زیرا در زمان نوشتن این مطلب نسبتاً جدید است. من یک چیز دیگر را امتحان کردم: من آن را اضافه کردم –remote پرچم را به فرمان شروع، فشار تغییرات طرحواره من، و این را در پایگاه داده “production” من امتحان کردم.

این بار، صفحه بارگیری شد، اما داده ها وجود نداشت. کنسول نشان داد:

بیایید آن مقدمه ای را که قبلاً گفتم مرور کنیم. من می گویم که این باعث شد من واقعاً احساس احمقانه ای داشته باشم که متوجه نشدم. مشکل به دلیل تلاش برای دسترسی مستقیم به پایگاه داده ایجاد شد که کاملاً منطقی است. ما در SSR هستیم. این ممکن است بدیهی به نظر برسد – اما باز هم – واقعاً اینطور نیست به صراحت در مستندات Astro DB بیان شده است.

شایان ذکر است که من قبلاً یک سیستم موجود طراحی شده در این پایگاه کد داشتم – Composable به نقطه پایانی API (که یک نقطه پایانی Astro.js بود) می‌رسد و نقطه پایانی سپس به DB می‌رسد. تنبل شدم و می‌خواستم سریعاً این داده‌ها را جمع‌آوری کنم تا ببینم آیا صفحه Vue من به درستی تنظیم شده است – و مستقیماً به آن ارجاع دادم. با خواندن این بخش در اسناد Astro DB – متوجه شدم که آنها از یک نقطه پایانی API برای ارسال درخواست به پایگاه داده استفاده می کنند. آنجا بود که فهمیدم این اشتباه من بود. من تغییرات خود را انجام دادم و یک نقطه پایانی API دیگر مانند دیگران ایجاد کردم. نقطه پایانی API به DB رسید. من دوباره پروژه ام را اجرا کردم و خوب کار کرد!

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

// db/services/UserProfile.service.ts
import { db, UserProfile } from 'astro:db';

export default class UserProfile {
  static async getUserProfile(userId: string) {
    const userData = await db.select().from(UserProfile);
    return userData;
  }
}

// src/composables/useUserProfile.ts
import UserProfile from 'db/services/UserProfile'

export function useUserProfile(userId: string) {
  const userData = await UserProfile.getUserProfile(userId)

  // business logic, etc..

  return {
    userData
  }
}