فهم Server Components والجلب الآمن
المسار: تطوير نظام إدارة الأعراس ودعوات QR الوحدة: صفحات الدعوة والواجهة الأمامية
مدخل إلى الدرس: فهم Server Components والجلب الآمن
فهم Server Components والجلب الآمن — نظام إدارة الأعراس والمناسبات ودعوات QR | Next.js وPrisma | أديب الصلوي
طريقة الدراسة: اقرأ التعريف، تتبّع المثال في الشرح، نفّذه بنفسك، ثم اختبر النتيجة والحالات الاستثنائية قبل الانتقال.
خريطة بصرية للمفهوم
flowchart LR
A["طلبات المناسبة"]
B["إدارة الدعوات"]
C["إصدار QR"]
D["التحقق من الدعوة"]
E["متابعة الحضور"]
A --> B
B --> C
C --> D
D --> Eالتسلسل: طلبات المناسبة ← إدارة الدعوات ← إصدار QR ← التحقق من الدعوة ← متابعة الحضور.
أهداف هذا الدرس
- تمييز متى يجلب كل مكوّن على الخادم ومتى على العميل.
- بناء صفحة ديناميكية تلتقط params من المسار.
- تمرير الحد الأدنى من البيانات للعميل عند الحاجة.
مثال
// app/i/[token]/page.tsx — Server Component يقرأ params
import { notFound } from "next/navigation";
import { prisma } from "@/lib/prisma";
import { tokenHashOf, verifySignature } from "@/lib/tsign";
import { RsvpForm } from "./rsvp-form";
export default async function InvitationPage({
params,
searchParams,
}: {
params: Promise<{ token: string }>;
searchParams: Promise<{ sig?: string }>;
}) {
const { token } = await params;
const { sig } = await searchParams;
if (!sig || !verifySignature(token, sig)) {
notFound(); // 404 دون كشف وجود الضيف
}
const guest = await prisma.guest.findUnique({
where: { tokenHash: tokenHashOf(token) },
include: { event: true, rsvp: true },
});
if (!guest) return notFound();
return (
دعوة {guest.name}
{guest.event.name}
);
}المخطط: متى جلب، ومتى انتقل للعميل؟
sequenceDiagram
participant P as صفحة الدعوة (Server Component)
participant V as verifySignature
participant D as prisma (guest + event + rsvp)
participant F as RsvpForm (use client)
P->>P: params.token + sig من الرابط
P->>V: التحقق من التوقيع
V-->>P: 404 إن فشل
P->>D: جلب البيانات
D-->>P: بيانات كاملة
P->>P: توليد HTML كامل (لا SQL ولا tokenHash)
P->>F: guestId, eventId, initial فقط
قاعدة الإفشاء الأدنى
لا نمرر guest.tokenHash ولا أي حقل سري إلى مكوّن العميل. نمرر ما تعرضه الواجهة فقط.
تمرين تطبيقي: عدّل صفحة الدعوة لتقبل معرّف مناسبة ثابت كـ /i/demo بدل token، وراقب في Network ما يُرسل منها — لاحظ غياب secrets.
أخطاء شائعة يجب تفاديها
- تعريف كل شيء 'use client' فيُرسل منطق الجلب للمتصفح.
- تمرير الكائن guest كاملاً إلى Form مما يقرر tokenHash فيه.
- عرض 404 بدون مجيئ status لضمان إخفاء الوجود.
معجم مصطلحات الدرس
- Server Component
- يتعنكب على الخادم: جلب + توليد HTML.
- params
- المقطع الديناميكي [token] من مسار الرابط.
- الإفشاء الأدنى
- إرسال الحقول اللازمة فقط للمكوّنات الهابطية.
مراجعة وتمرين تثبيت المهارة
اختبار سريع: اشرح بعبارتك معنى «فهم Server Components والجلب الآمن»، ثم بيّن أين ستستخدمه داخل نظام تسجيل حضور دعوات مناسبة عبر رمز QR، وما الخطأ الذي يجب اختباره قبل الاعتماد على الحل.
تحدٍّ إضافي: غيّر شرطًا واحدًا في التطبيق، وتوقع النتيجة، ثم نفّذ الاختبار وفسّر الاختلاف.
الدرس التالي: تصميم صفحة الدعوة الإلكترونية. من الأفضل إنهاء التجربة الحالية قبل متابعة الدرس التالي.
