من الصفر إلى SvelteKit عمليًا: إنشاء موقع محتوى سريع وصديق SEO باستخدام TypeScript وPartial Hydration

مقدمة سريعة — لماذا SvelteKit لمواقع المحتوى؟

إذا رغبت في إنشاء موقع محتوى سريع، قابل للفهرسة، وسهل الصيانة، فإن SvelteKit يجمع بين سرعة Svelte وسير عمل حديث للـ SSR والـ SSG وملحقات النشر على الحافة (Edge). هذا الدليل العملي يوضّح كيف تبدأ من الصفر باستخدام TypeScript، وتطبّق استراتيجيات Partial Hydration (إرواء/تسييل تفاعلات محددة فقط) لتقليل حجم جافاسكربت العميل وتحسين نتائج الأداء وSEO.

سنغطي: إعداد المشروع مع TypeScript، بنية صفحات قابلة للـ SEO، أساليب جزئية للـ hydration (بدون تحميل كلّ صفحة على المتصفح)، ونصائح نشر على Edge/CDN. الأمثلة عملية وقابلة للتطبيق للمبتدئين.

ملاحظة تقنية: SvelteKit يأتي مع دعم قوي لتصميم تطبيقات SSR/SSG وعمليات التعبئة بالشفرات الحديثة — يمكن اختيار TypeScript عند إنشاء المشروع بسهولة عبر أداة الإنشاء الرسمية.

الخطوة 1 — إنشاء المشروع وإعداد TypeScript

ابدأ بمشروع جديد باستخدام أداة الإنشاء الرسمية. نفّذ الأوامر التالية في الطرفية (Terminal):

npm create svelte@latest my-content-site
# اختر الخيارات: SvelteKit, TypeScript, Router, وغيرها حسب حاجتك
cd my-content-site
npm install
npm run dev

خلال الاستنساخ ستُتاح لك خيار استخدام TypeScript؛ اختَرها للحصول على فحص أنواع أفضل وتجربة تطوير متماسكة. SvelteKit يوفّر أنواعاً وواجهات لعمليات الـ server hooks وload functions التي سنستفيد منها لاحقًا.

هيكل صفحات بسيط للـ SEO

• استخدم ملفات +page.server.ts أو +page.ts لتحميل البيانات من الخادم أو من ملفات المحتوى.
• استعمل export const prerender = true; للصفحات الثابتة التي تريد تصديرها كـ HTML ثابت (SSG).
• احرص على توزيع ميتا تاغز (title, meta description, canonical) في +layout.svelte أو عبر مكونات مخصصة للـ SEO.

مثال مبسّط لملف +page.server.ts مع TypeScript:

// src/routes/blog/+page.server.ts
import type { PageServerLoad } from './$types';

export const load: PageServerLoad = async () => {
  const posts = await fetchPostsFromFs(); // دالة تقرأ ملفات Markdown/MDX
  return { posts };
};

export const prerender = true; // يصدِّر الصفحة كـ HTML ثابت للـ SEO

الـ prerender مفيد لمدونات ومواقع المحتوى حيث لا تحتاج كل صفحة إلى استدعاءات ديناميكية عند كل زيارة.

الخطوة 2 — Partial Hydration: استراتيجيات عملية في SvelteKit

مصطلح Partial Hydration (أو "Islands" architecture) يعني أن تُرسل HTML كامل للصفحة، لكن تُفعَّل/تُحمَّل عبر الجافاسكربت فقط المكونات التفاعلية الضرورية. في SvelteKit لا توجد حتى الآن حلّة مدمجة واحدة تُطبَّق مكوّنياً بنفس سهولة بعض منصّات "الجزُر" (Islands)، لكن هناك طرق عملية لتطبيق نفس الفكرة:

1. تحميل المكونات تدرجياً مع import ديناميكي داخل onMount

   <script lang="ts">
   import { onMount } from 'svelte';
   let Widget: any = null;
   
   onMount(async () => {
     const mod = await import('$lib/Widget.svelte');
     Widget = mod.default;
   });
   </script>
   
   <svelte:component this={Widget} />

   هذه الطريقة تمنع تضمين كود المكوّن في الحزمة الأساسية للـ HTML المُرسل من الخادم، وتحمّله فقط عند حاجة المتصفح — وفقًا لمبدأ Partial Hydration. (نماذج مماثلة نجِدها كأمثلة وتعليمات في مجتمعات وأدوات تجريبية داخل منظومة Svelte).
2. مكوّنات client‑only / if (browser): لفصل منطق يعتمد على window أو DOM، شغّل الكود داخل onMount أو استخدم شروط تعتمد على المتغيّر البيئي للمتصفح.
3. الأدوات/الحلول التجريبية (island adapters): توجد مكتبات وتجارب (مثل حلول تعتمد @11ty/is‑land أو أدوات partial hydrating prerenderer) التي تُتيح لك تعريف "جزر" يتم تَحَمُّلها فقط عند الحاجة — مناسب إذا أردت مستوى أعلى من التحكم بالمكوّنات التفاعلية. استخدمها بحذر وجرّبها محليًا قبل الاعتماد عليها إنتاجيًا.

نصيحة عملية: فصل مكوّنات الواجهة ذات الحالة (stateful widgets) إلى ملفات منفصلة وتحميلها ديناميكياً يقدّم أفضل توازن بين SEO وتجربة المستخدم (سرعة التحميل الأولية + تفاعلية لاحقة).

تجربة: قائمة أولوية للـ Hydration

• Hydrate فورياً: عناصر التفاعل الحرجة مثل نماذج الاشتراك أو شريط البحث.
• تأجيل/Lazy‑load: عناصر تكميلية مثل توصيات المقالات أو قوائم التعليقات الكبيرة.

الخطوة 3 — الأداء، SEO، والنشر على Edge

نقاط مهمة لنشر موقع محتوى يُقدِّم أداءً جيدًا ويُرضي محركات البحث:

• اختر استراتيجية النشر: استخدم مُكيِّف (adapter) مناسب مثل adapter-static لتصدير صفحات ثابتة (SSG) أو adapter-auto/adapter-node مع Edge platform (Cloudflare Pages, Vercel, Netlify) لتفعيل Edge SSR. نشر صفحات HTML جاهزة على CDN يقلّل زمن الوصول ويُحسن ترتيب نتائج البحث للمستخدمين العالميين.
• التخزين المؤقت (Cache) وRevalidation: استعمل رؤوس HTTP مناسبة (Cache‑Control) لإطالة عمر صفحات لا تتغير كثيرًا، واستخدم استراتيجيات إعادة التحقق (stale‑while‑revalidate) للمحتوى المتجدد.
• اختبارات الأداء وSEO: استعمل Lighthouse وWebPageTest وSearch Console لضبط سرعة الفهرسة، وتقليل CLS وLCP، وتقليل مجموع وقت الجافاسكربت المُنفَّذ (TBT/TTI).
• التحقق من البيانات الهيكلية: أضف JSON‑LD لمقالاتك وصفحاتك، واشتغل على روابط canonical، وخريطة الموقع (sitemap.xml) لسهولة زحف محركات البحث.

خلاصة تنفيذية: الجمع بين prerender للصفحات الثابتة وPartial Hydration للمكوّنات التفاعلية يوفّر أسرع وقت تحميل أولي مع أقل حجم جافاسكربت مُحمّل — وهو ما يبحث عنه محرّكو الأداء ونتائج محركات البحث. مولّدو المحتوى والمطوّرون في 2024–2026 يشيرون إلى أن هذا النمط مناسب لمواقع النشرات والمدونات والمواقع الإعلامية.

خاتمة واختبار سريع

باتباع هذا الدليل ستنشئ موقع SvelteKit مبنيّاً على TypeScript قادرًا على تقديم HTML قابلاً للفهرسة سريعًا مع تفاعلية انتقائية عبر Partial Hydration. ابدأ بنسخة بسيطة، قيِّم أداء الصفحة الرئيسية عبر Lighthouse، ثم عرّف أول "جزيرة" تفاعلية وحمّلها ديناميكياً. اختبر على الشبكات البطيئة والأجهزة المحمولة لضمان تجربة ثابتة للمستخدم.

هل تريد مثال مشروع جاهز (GitHub) مع بنية ملفات كاملة وملف نشر إلى Vercel/Cloudflare Pages؟ أستطيع توليد مخطّط مشاريع + أمثلة ملفات (ملفَي +page.server.ts و+layout.svelte وWidget.svelte) بصيغة قابلة للنسخ واللصق.