SSR باستخدام React وNode.js وVite

دليل خطوة بخطوة: SSR باستخدام React وNode.js وVite

في هذا الدليل ستتعلم كيفية تطبيق تقنية Server-Side Rendering (SSR) لتطبيقات React باستخدام Node.js وVite بطريقة حديثة وبأقل المتطلبات لتسريع تحميل الصفحات وتحسين SEO.

1. هيكل المشروع

يعتمد المشروع على هيكل بسيط ومنظم:

ssr-react-node-vite/
├── src/            ← مكونات React وملفات التهيئة
├── server.js       ← خادم Express مع Vite SSR
├── package.json
└── vite.config.js

2. استنساخ المشروع وتثبيت المتطلبات

تأكد من تثبيت Node.js وnpm، ثم قم بتنفيذ الأوامر التالية:

git clone https://github.com/jenylion/ssr-react-node-tutorial.git
cd ssr-react-node-vite

3. تثبيت التبعيات

npm install

سيتم تثبيت React وReactDOM وVite وExpress وأدوات التطوير اللازمة.

4. تشغيل الخادم مع SSR

لتشغيل الخادم، استخدم الأمر:

npm run serve

ثم افتح الرابط http://localhost:3000 لمعاينة تطبيق React بعد الرندر على الخادم.

5. كيف يعمل النظام

يستخدم الخادم Express أداة Vite في وضع SSR Middleware للتعامل مع الطلبات ورندر تطبيق React باستخدام ReactDOMServer.renderToString على الخادم، ثم يقوم العميل بتهيئة التطبيق ليصبح تفاعليًا بعد التحميل.

6. مثال على نقطة البداية (src/entry-server.jsx)

تقوم هذه النقطة بتصدير دالة render لاستخدامها على الخادم:

import React from 'react';
import ReactDOMServer from 'react-dom/server';
import App from './App.jsx';

export function render() {
  return ReactDOMServer.renderToString(<App />);
}

7. مثال على الخادم (server.js)

يقوم الخادم بتحميل الدالة render ديناميكيًا باستخدام vite.ssrLoadModule:

const { render } = await vite.ssrLoadModule('/src/entry-server.jsx');
const appHtml = render();

ملخص

يتيح لك هذا النظام تقديم مكونات React من جانب الخادم باستخدام Node.js وVite لتحسين SEO وسرعة التحميل مع الحفاظ على تجربة تطوير حديثة وسلسة باستخدام Vite ودعم JSX.

  عرض المشروع على GitHub

تحميل المشروع وتجربته

يمكنك استنساخ المشروع وتثبيته وتجربته محليًا لفهم تقنية SSR باستخدام React وNode.js بشكل عملي.