React Server Components vs Client-side React (SPA) مقارنة

// Next.js App Router — مكوّن خادم (Server Component، الافتراضي)
// app/posts/[slug]/page.tsx
import { db } from '@/lib/db';
import LikeButton from './like-button'; // مكوّن عميل (Client Component، في ملف منفصل 'use client')

interface PageProps {
  params: Promise<{ slug: string }>;
}

export default async function PostPage({ params }: PageProps) {
  const { slug } = await params;

  // await مباشر في جانب الخادم — لا يوجد waterfall بين العميل والخادم،
  // مكتبات ثقيلة مثل marked/sanitize-html لا تدخل إلى حزمة العميل إطلاقًا
  const post = await db.post.findUnique({ where: { slug } });
  if (!post) return <div>غير موجود</div>;

  return (
    <article>
      <h1>{post.title}</h1>
      {/* فقط الخصائص (props) القابلة للتسلسل تمرّ إلى مكوّن العميل */}
      <div dangerouslySetInnerHTML={{ __html: post.renderedHtml }} />
      <LikeButton postId={post.id} initialCount={post.likeCount} />
    </article>
  );
}

// app/posts/[slug]/like-button.tsx
'use client';
import { useState, useTransition } from 'react';

export default function LikeButton({ postId, initialCount }: { postId: string; initialCount: number }) {
  const [count, setCount] = useState(initialCount);
  const [isPending, startTransition] = useTransition();

  return (
    <button
      disabled={isPending}
      onClick={() => startTransition(async () => {
        setCount((c) => c + 1);
        await fetch(`/api/posts/${postId}/like`, { method: 'POST' });
      })}
    >
      إعجاب ({count})
    </button>
  );
}

// Vite + React — تطبيق SPA من جانب العميل
// src/pages/PostPage.tsx
import { useEffect, useState } from 'react';
import { useParams } from 'react-router';

interface Post {
  id: string;
  title: string;
  renderedHtml: string;
  likeCount: number;
}

export default function PostPage() {
  const { slug } = useParams();
  const [post, setPost] = useState<Post | null>(null);
  const [isLiking, setIsLiking] = useState(false);

  useEffect(() => {
    // كل جلب البيانات في العميل — خطر waterfall يبدأ هنا
    let cancelled = false;
    fetch(`/api/posts/${slug}`)
      .then((res) => res.json())
      .then((data) => { if (!cancelled) setPost(data); });
    return () => { cancelled = true; };
  }, [slug]);

  if (!post) return <div>جارٍ التحميل...</div>; // لا تظهر هذه الشاشة إطلاقًا قبل تشغيل جافاسكريبت

  async function handleLike() {
    setIsLiking(true);
    setPost((p) => (p ? { ...p, likeCount: p.likeCount + 1 } : p));
    await fetch(`/api/posts/${post!.id}/like`, { method: 'POST' });
    setIsLiking(false);
  }

  return (
    <article>
      <h1>{post.title}</h1>
      <div dangerouslySetInnerHTML={{ __html: post.renderedHtml }} />
      <button disabled={isLiking} onClick={handleLike}>
        إعجاب ({post.likeCount})
      </button>
    </article>
  );
}

// vite.config.ts — تقسيم الكود يُفوَّض إلى Rollup
export default {
  build: {
    rollupOptions: {
      output: { manualChunks: { vendor: ['react', 'react-dom', 'react-router'] } },
    },
  },
};