ازاي تبني موقع سريع جداً بربط نظام إدارة محتوى مرن Headless CMS مع إطار عمل فيو دجى إس (Vue.js)

أهلاً بيك يا بشمهندس في مقال جديد من سلسلة الشروحات التقنية. لو انت مطور واجهات أمامية (Front-end Developer) وشغال بـ فيو دجى إس (Vue.js)، أكيد في يوم لقيت نفسك واقف قدام مشكلة كلاسيكية: العميل عايز يعدل على المحتوى كل شوية، أو الـ WordPress التقليدي بطيء وثقيل، أو حتى الـ Monolith CMS قفل عليك الباب ومش عارف تعمل تباعد (Decoupling) بين الـ Backend والـ Frontend بالشكل اللي يريحك.

الوجع ده هو السبب اللي طلع عشانه مفهوم الـ هيدلس سي إم إس (Headless CMS). في المقال ده، هنتكلم بالتفصيل إزاي تفصل لوحة التحكم عن الواجهة الأمامية، ونربط وحش الـ APIs زي سترابي (Strapi) أو ديراكتس (Directus) مع تطبيق فيو دجى إس (Vue.js) عشان تطلع بموقع صاروخ في السرعة والأداء.

يعني ايه اصلا Headless CMS وليه لازم تسيب الـ Traditional CMS؟

زمان، كنت عشان تعمل موقع، بتجيب نظام زي WordPress أو Drupal، تلاقيه حاطط الـ Backend والـ Frontend في طبق واحد. لو العميل عايز يغير لون زرار، ممكن الدنيا تبوظ. لو السيرفر عليه ضغط، الموقع كله يقع عشان قاعدة البيانات والواجهة لازقين في بعض.

الـ هيدلس سي إم إس (Headless CMS) بيحل المشكلة دي من جذورها. الفكرة بكل بساطة إننا بنشيل "الراس" (اللي هي الواجهة الأمامية أو الـ Front-end) ونسيب "الجسم" (اللي هو لوحة التحكم وقاعدة البيانات والـ APIs). لوحة التحكم دي بتطلعلك البيانات جاهزة في صورة جايسون (JSON) أو جراف كيو إل (GraphQL) عن طريق آي بي آي (API). هنا بقى بيجي دور البطل بتاعنا فيو دجى إس (Vue.js)، بياخد البيانات دي ويعرضها بالصورة اللي تعجبه، سواء كان ويب سايت عادي، تطبيق موبايل، أو حتى شاشة إعلانات ذكية!

ليه تختار Strapi أو Directus بالذات مع Vue.js؟

السوق مليان خيارات، بس فيه اسمين بيلمعوا جداً لما نتكلم عن الـ Headless CMS المفتوحة المصدر (Open Source):

• سترابي (Strapi): مبني بلغة نود جى إس (Node.js)، وده بيخليه قريب جداً لقلب أي مبرمج جافاسكريبت. بيقدملك لوحة تحكم جاهزة، وبيخليك تعمل سكيما (Schema) للبيانات في دقايق معدودة.
• ديراكتس (Directus): ده بقى بيعتبر وحش التعامل مع قواعد البيانات الحالية (SQL Databases). لو عندك قاعدة بيانات قديمة وعايز تحولها لـ Headless CMS في ثواني، ديراكتس هو الحل الأمثل.

لما بتجمع واحد من الاتنين دول مع فيو دجى إس (Vue.js) أو نُكست جى إس (Nuxt.js)، انت كده معاك قوة رهيبة، مرونة في التصميم، وأداء مفيش أسرع منه.

خطوة بخطوة: إزاي تربط Strapi CMS مع تطبيق Vue.js

تعالوا نتخيل مع بعض سيناريو عملي سريع. فرضا إننا عملنا بروجكت Strapi محلياً على جهازنا، وعملنا Collection Type اسمه posts عشان نكتب عليه مقالات المدونة. عايزين دلوقتي نسحب المقالات دي ونعرضها في صفحة Vue.js.

أول حاجة، بنحتاج نعمل جلب للبيانات (Data Fetching) من الـ API اللي Strapi وفرهولنا تلقائياً. ممكن نستخدم مكتبة زي أكسيوس (Axios) أو الـ Fetch API العادية جوه هوك الـ onMounted في الكومبوننت بتاعنا.

شوف معايا كود الـ Vue 3 (Composition API) ده اللي بيجيب البيانات:

<script setup>
import { ref, onMounted } from 'vue'
import axios from 'axios'

const posts = ref([])
const loading = ref(true)

const fetchPosts = async () => {
  try {
    const response = await axios.get('http://localhost:1337/api/posts')
    posts.value = response.data.data
  } catch (error) {
    console.error('حصل خطأ أثناء جلب البيانات:', error)
  } f_inally {
    loading.value = false
  }
}

onMounted(() => {
  fetchPosts()
})
</script>

<template>
  <div class="blog-container">
    <h1>مقالات المدونة من Strapi & Vue</h1>
    <div v-if="loading">جاري تحميل البيانات...</div>
    <div v-else>
      <div v-for="post in posts" :key="post.id" class="post-card">
        <h2>{{ post.attributes.Title }}</h2>
        <p>{{ post.attributes.Description }}</p>
      </div>
    </div>
  </div>
</template>

الكود بسيط جداً وواضح! الـ Strapi بيرجعلك البيانات مقسمة جوه attributes عشان يضمن حماية البيانات وترتيبها، والـ Vue بيعرضها بسلاسة تامة.

ليه الطريقة دي بتعلي أداء السيرفر ومحركات البحث SEO؟

ممكن حد يسأل: "طالما بنجيب البيانات بالـ JavaScript كدة، إيه أخبار الـ SEO؟" سؤال ممتاز. الحل هنا مش بس إنك تستخدم Vue العادي (CSR)، بل الأفضل إنك تربط الـ Headless CMS بإطار عمل زي نُكست جى إس (Nuxt.js) اللي بيدعم الـ SSR (Server-Side Rendering) والـ SSG (Static Site Generation).

لما الموقع بيتبنى كـ Static Pages أو يتولد على السيرفر، محركات البحث زي جوجل بتشوف المحتوى جاهز تماماً، وفي نفس الوقت العميل بيكسب سرعة رهيبة في التصفح لأن الواجهة مش محملة بأعباء قواعد البيانات التقليدية.

خاتمة ونصيحة أخوية لتطوير مستواك

يا بشمهندس، التكنولوجيا بتتحرك بسرعة، والشركات دلوقتي مبقتش تدور على مطور بيعرف يعمل ويبسايت تقليدي وبس، بل بيدوروا على شخص فاهم معمارية الـ Decoupled Architecture وإزاي يربط الأنظمة ببعضها. ابدأ انهاردة اعمل بروجكت صغير، نزل Strapi أو Directus عندك على اللاب، واربطه بواجهة Vue.js بسيطة، وغامر وجرب تبعت وتقرأ بيانات. التجربة العملية هي اللي بتعمل المبرمج الشاطر مش القراءة وبس. بالتوفيق ليك ورحلة برمجة ممتعة!