إزاي تخلي مشروعك بـ Inertia صديق لمحركات البحث عن طريق الـ SSR
أكيد مريت بالموقف ده: بدأت مشروعك بـ Laravel و Inertia.js، الدنيا ماشية زي الفل والـ Single Page Application (SPA) بيخلي تجربة المستخدم سريعة وممتعة. فجأة، العميل أو مديرك يقولك "يا هندسة، إحنا محتاجين السيو (SEO) يكون قوي، ومحتاجين محركات البحث زي جوجل (Google) تقرأ محتوى الصفحات عشان نتصدر نتائج البحث". هنا بتتصدم إن الـ SPA العادي بيعتمد على الجافاسكريبت عشان يرندر الصفحة، وجوجل مش دايماً بياخد وقته عشان يقرأ الصفحة دي بالكامل. الحل؟ هو الـ Server-Side Rendering أو (SSR).
Table of contents [Show]
يعني إيه SSR وليه إنرشيا محتاجاه؟
بص يا سيدي، في الـ SPA التقليدي، المتصفح بيحمل صفحة فاضية وبعدين الـ JavaScript بيبدأ يبني الصفحة عندك على الجهاز. لكن الـ SSR بيخلي السيرفر هو اللي يجهز الـ HTML بالكامل ويبعته جاهز للمتصفح. ده بيخلي الـ Crawler بتاع جوجل يشوف المحتوى فوراً، وده بيعلي ترتيبك في السيو (SEO) بشكل رهيب.
تجهيز بيئة العمل (Setting up SSR in Inertia)
عشان تشغل الـ SSR في مشروع إنرشيا، الموضوع مش معقد بس محتاج شوية تركيز. أول حاجة محتاجينها هي Node.js على السيرفر، لأن لارافيل (Laravel) هينادي على ملف جافاسكريبت عشان يرندر الـ Component.
نفذ الأمر ده في التيرمينال عشان تنزل الـ SSR package:
composer require inertiajs/inertia-laravel
بعد كدة محتاجين نجهز الـ ssr.js. ده الملف اللي هيشتغل على السيرفر عشان يحول الـ Vue أو React components لـ HTML.
خطوات تفعيل الـ SSR في لارافيل
الخطوة التانية هي التأكد إن الـ package.json عندك فيها الإضافات اللازمة. افتح ملف الـ vite.config.js وتأكد إنك مفعل الـ SSR:
import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import vue from '@vitejs/plugin-vue';
export default defineConfig({
plugins: [
laravel({
input: 'resources/js/app.js',
ssr: 'resources/js/ssr.js', // هنا بنعرف ملف الـ SSR
refresh: true,
}),
vue(),
],
});
بعدين في ملف resources/js/ssr.js، لازم تعمل إعداد للـ CreateInertiaApp عشان يشتغل في بيئة Node:
import { createInertiaApp } from '@inertiajs/vue3';
import createServer from '@inertiajs/vue3/server';
import { renderToString } from '@vue/server-renderer';
createServer((page) => createInertiaApp({
page,
render: renderToString,
resolve: name => {
const pages = import.meta.glob('./Pages/**/*.vue', { eager: true });
return pages[`./Pages/${name}.vue`];
},
setup({ App, props, plugin }) {
return createSSRApp({ render: () => h(App, props) }).use(plugin);
},
}));
تشغيل الـ SSR في بيئة التطوير والإنتاج
في بيئة التطوير (Development)، عشان تشوف النتيجة وتعمل Debug، افتح تيرمينال جديد وشغل الأمر ده:
php artisan inertia:start-ssr
وفي نفس الوقت لازم تشغل الـ npm run dev. كدة أنت بتخلي الـ Laravel بيوجه الطلبات للسيرفر اللي شغال بالـ Node عشان يجهز الـ HTML.
نصيحة من أخ لمبرمج
بص يا هندسة، الـ SSR تقنية ممتازة، بس خلي بالك هي بتزود الضغط على السيرفر (Server Load). مش كل الصفحات محتاجة SSR. الصفحات اللي فيها محتوى ثابت ومهم للأرشفة زي الـ Landing Pages أو صفحات المقالات (Blogs) هي دي اللي تستاهل تتعب فيها وتطبق عليها SSR. صفحات الداشبورد (Dashboard) أو الحاجات اللي بعد تسجيل الدخول، ممكن تسيبها SPA عادي عشان توفر موارد السيرفر وتخلي الأداء أسرع.
طور نفسك دايماً في فهم الـ Lifecycle بتاع الـ Vue والـ Laravel، لأن كل ما فهمت "خلف الكواليس" بيحصل إيه، كل ما عرفت تحل المشاكل التقنية أسرع وتكتب كود أداءه عالي.
