يُحَلّ الطلب عبر App Router في Next.js 14، فتُجمَّع أقسام سرد المقهى في HTML مُصيَّر على الخادم دون أي JavaScript مرتبط بالمكوّنات.

1. 1يصل الطلب إلى App Router في Next.js 14، الذي يَحُلّ المسار الجذر في /app.
2. 2يطبّق تخطيط المسار ورقةَ أنماط Tailwind العامة ومتغيّرات الخطوط الثلاثة من next/font على جذر المستند.
3. 3تجمّع الصفحة مكوّنات الأقسام بترتيب السرد — الواجهة الرئيسية، وFait maison chaque jour، وNos incontournables، وL'expérience، وIls parlent de nous، وكتلة الموقع في Vieux-Port، ودعوة الإجراء Prêt à venir مع التذييل.
4. 4يُصيَّر كل قسم عدا الخريطة على الخادم بوصفه React server component، فتُشحَن شيفرته على هيئة HTML دون أي JavaScript مرافق للمكوّن.
5. 5تُقدَّم ورقة أنماط Tailwind المُجمَّعة وملفات الخطوط المستضافة ذاتيًا من المصدر نفسه، ما يمنح المتصفح أول رسم كامل ومُنسَّق.
6. 6ولا تُطلَب للإماهة سوى حزمة مكوّن الخريطة الواقع على حدود العميل.

يؤجّل قسم الموقع في Vieux-Port كل عمل Leaflet إلى ما بعد التصيير على الخادم، فيركّب خريطة تفاعلية بوصفها الجزيرة الوحيدة في الصفحة التي تخضع للإماهة.

1. 1يُصيّر قسم الموقع حاويتَه وعنوانه على الخادم، ويحجز أبعاد الخريطة كي لا ينزاح التخطيط المحيط.
2. 2يُركَّب مكوّن العميل المتداخل في المتصفح بعد الإماهة، مؤجِّلًا كل عمل Leaflet — إذ يحتاج Leaflet إلى window وdocument عند الإنشاء.
3. 3يُنشئ effect نسخةَ خريطة Leaflet، متمركزةً على إحداثيات المقهى في Vieux-Port عند مستوى تقريب يناسب المشي.
4. 4تُرفَق طبقة البلاطات وتتدفّق البلاطات النقطية داخل الحاوية المحجوزة، مع وضع علامة عند المقهى.
5. 5تتيح معالِجات التحريك والتقريب للقارئ تحديد موضع المقهى بالنسبة إلى المكان الذي يقف فيه.
6. 6تُفكّك دالةُ التنظيف في effect نسخةَ الخريطة عند إلغاء التركيب، مُحرِّرةً مستمعي Leaflet.

تُستضاف ثلاثة خطوط تحمل ثلاثة مستويات لصوت العلامة استضافةً ذاتية وقت البناء وتُربط في Tailwind، ما يلغي طلبات الخطوط من طرف ثالث وإزاحة التخطيط الناتجة عن الخط الاحتياطي.

1. 1تُعلَن خطوط Playfair Display وInter وCaveat على هيئة استيرادات من next/font، ومُثبَّت كلٌّ منها على المجموعات الفرعية والأوزان التي يستخدمها التصميم فعليًا.
2. 2تُنزّل عملية البناء ملفات الخطوط وتستضيفها ذاتيًا داخل المُخرَجات، فلا يغادر أي طلب خط المصدرَ وقت التشغيل.
3. 3يُتاح كل خط بوصفه خاصية CSS مخصّصة على العنصر الجذر ويُربط في tailwind.config.ts كعائلة خطوط مُسمّاة.
4. 4تشير الأقسام إلى هذه العائلات عبر أدوات Tailwind — Playfair للعناوين البارزة، وInter للنص وواجهة الاستخدام، وCaveat للمسات المكتوبة بخط اليد.
5. 5ولأن قواعد @font-face مُضمَّنة والملفات من المصدر نفسه، يُرسَم النص بخطّه النهائي دون تبديل خط احتياطي أو إزاحة تراكمية في التخطيط.