الوثائقأوضاع صفحات الملف

المسؤولية الاجتماعية للشركات (العرض من جانب العميل)

التعريف

يقوم CSR بتسليم التنقل إلى المتصفح: بعد المستند الأول، لم يعد التنقل بين الصفحات يطلب من الخادم HTML. في Nexy، يكون القرار مشروع، وليس صفحة واحدة - useCSR = True يحول التطبيق بأكمله إلى العميل.

كيف يعمل

nexyconfig.py

from nexy.core.models import NexyConfigModelfrom nexy.frontend import react  class NexyConfig(NexyConfigModel):    useFF = react()    useCSR = True

ثم يتغير شكل المشروع:

	وضع الخادم (`False`)	وضع العميل (`True`)
الطرق	`.nexy`, `.md`, `.mdx`	`.tsx`, `.jsx`, `.vue`, `.svelte`
الوثيقة	`layout.nexy`	الجذر `layout.tsx` / `.vue` / `.svelte` يملك `<html>`، `<head>`، `<body>`
مكونات العميل	جزر داخل الصفحة	الصفحات نفسها
`.nexy` تحت `src/routes/`	تنسيق الصفحة	مرفوض قبل `nx dev`، `nx start` و `nx build`
التنقل	طلب كامل لكل رابط	جهاز توجيه العميل

يظل .md و .mdx صالحين: يعرضهما Nexy على الخادم داخل تخطيط العميل، ويتولى جهاز توجيه العميل المسؤولية من هناك. .py يجلس المتعاملون بجوار الطرق ويتم خدمتهم بواسطة FastAPI.

تقديم دورة الحياة

يصل الطلب إلى جهاز التوجيه المستند إلى الملف، والذي يبحث عن المسار المطابق وتخطيطاته.
يعرض التخطيط الجذر المستند بأكمله في العقدة - الاستجابة الأولى تحمل بالفعل <html> الحقيقية، وليس الصدفة الفارغة.
يقوم Nexy بإدخال أصول العميل ووصف JSON للصفحة قبل </body>.
يقوم المتصفح بترطيب هذا المستند. تحافظ التخطيطات المتداخلة على حالتها من الآن فصاعدًا.
تتم معالجة الرابط إلى مسار آخر بواسطة جهاز توجيه العميل: لا يوجد طلب مستند، ويتم عرض الصفحة في المتصفح.

أثناء التطوير، يتم تقديم المستند عند الطلب بواسطة خادم التطوير Vite. في الإنتاج، يتم تقديمه مرة واحدة عند الإنشاء: يحصل المسار الثابت على مستنده، ويحصل المسار الديناميكي على واحد لكل معلمة ثابتة معلنة، أو الصدفة - التخطيطات حول صفحة فارغة - عندما لا تعلن عن أي شيء.

متى تستخدم

لوحات المعلومات، والمحررين، وأي شيء يتصرف مثل التطبيق.
واجهة برمجة التطبيقات Python مع تطبيق العميل في الأعلى.
صفحة يكون فيها كل تفاعل محليًا وستشعر برحلة ذهابًا وإيابًا.

التكوين

ضبط	القيمة
`useFF`	مطلوب: `useCSR` يتم رفض بدون إطار عمل العميل
`useCSR`	`True`
`useRouter`	يجب أن يظل بعيدًا: تم رفض جهاز التوجيه المعياري في وضع العميل

يتم تجاهل الملفات والمجلدات التي تبدأ بـ _ أو . من خلال عمليات التحقق هذه.

مثال

src/routes/layout.tsx

export default function RootLayout({ children }: { children: React.ReactNode }) {  return (    <html lang="en">      <head><title>My app</title></head>      <body>{children}</body>    </html>  )}

src/routes/index.tsx

export default function Home() {  return <h1>Home</h1>}

القيود

المشروع بأكمله. لا يمكنك دمج صفحة CSR واحدة في مشروع وضع الخادم: اختر الوضع للتطبيق، ثم استخدم الجزر للأجزاء التفاعلية لصفحة وضع الخادم.
لا توجد طرق .nexy. أي شيء كتبته في .nexy يجب أن يصبح مكونًا لإطار العمل.
تمر بيانات الخادم عبر نقاط النهاية. لا يمكن لمسار العميل قراءة قاعدة البيانات في وقت العرض؛ يستدعي معالج .py أو إجراء.
يحتاج المسار الديناميكي إلى معلمة ثابتة معلنة، أو يبدأ من الصدفة. تصدير getStaticParams() من الصفحة - يتم أيضًا قبول Next.js الأسماء getStaticPaths و generateStaticParams - للحصول على مستند واحد لكل قيمة. وبدون ذلك، يحمل الغلاف التخطيطات وليس الصفحة: تظهر الصفحة بمجرد تشغيل المتصفح.
المسؤولية الاجتماعية للشركات ليست صفحة فارغة، وليست SPA أيضًا. يتم تقديم المستند الأول بواسطة الخادم؛ إنه التنقل الذي يحدث في المتصفح.

الخطوات التالية

وضع الخادم ووضع العميل: الشيكات والملفات المرفوضة
التخطيطات: أي ملف يملك الوثيقة
SSR: الافتراضي، صفحة بصفحة
الواجهة الأمامية: بناء خادم التطوير والعميل

حرِّر على GitHub