في Next.js، قد تكون الطريقة التي تعمل بها المكونات من جانب العميل ("استخدام العميل") مع SSR (العرض من جانب الخادم) مربكة في بعض الأحيان. دعونا نقسمها:

كيفية عمل مكونات العميل والخادم في Next.js:

• مكونات الخادم: هذه هي المكونات الافتراضية في Next.js ويتم عرضها مسبقًا على الخادم. ولا يتم إرسالها إلى العميل بتنسيق JavaScript ولكن بتنسيق HTML فقط.
• مكونات العميل: عند وضع علامة على مكون بـ "استخدام العميل"، فهذا يعني أن المكون يحتاج إلى التشغيل على جانب العميل لأنه قد يكون به تفاعل (مثل useState، useEffect)، أو تعتمد على واجهات برمجة تطبيقات المتصفح التي لا تعمل في بيئة الخادم.

لماذا لا تزال مكونات العميل تعرض HTML على الخادم:

على الرغم من وضع علامة على أحد المكونات على أنه "استخدام العميل"، لا يزال من الممكن إنشاء HTML الأولي لهذا المكون على الخادم (SSR)، ولكن فقط لأغراض HTML الثابتة . هذا يعنى:

• العرض الأولي: يقوم الخادم بإنشاء HTML للصفحة، بما في ذلك مكونات العميل، لتحسين الأداء وتحسين محركات البحث. هذا HTML ثابت، وليس تفاعلي.
• الترطيب: عندما يصل HTML هذا إلى المتصفح، يقوم Next.js بترطيب المكون من جانب العميل باستخدام JavaScript، مما يتيح تفاعله.

لماذا يحدث هذا:

• الأداء: من خلال عرض HTML الأولي على الخادم، يمكن للمستخدم رؤية المحتوى بشكل أسرع (وقت أسرع للبايت الأول، أو TTFB) دون انتظار تحميل JavaScript من جانب العميل.
• SEO: يعد العرض المسبق لـ HTML مهمًا لتحسين محركات البحث لأنه يضمن قدرة محركات البحث على الزحف إلى المحتوى وفهرسته.
• الترطيب: بمجرد تقديم HTML، يرسل Next.js حزمة JavaScript إلى العميل، والتي "ترطب" HTML الثابت، وتربط مستمعي الأحداث وتجعلها تفاعلية.

ماذا يحدث مع "استخدام العميل"؟

• عرض HTML من جانب الخادم: على الرغم من أن المكون من جانب العميل، إلا أن Next.js لا يزال ينشئ HTML للعرض الأولي. لذلك، على الرغم من أنه لا يقوم بتشغيل JavaScript تفاعلي على الخادم، فإنه يرسل ترميز HTML إلى العميل.
• الترطيب من جانب العميل: يتم إرسال JavaScript اللازم للتفاعل إلى العميل، وبمجرد تحميل الصفحة، يقوم Next.js بترطيب المكون، مما يجعله يعمل بكامل طاقته.

فكرة خاطئة:

وضع علامة على أحد المكونات بـ "استخدام العميل" لا يعني أنه

لن يقوم بإنشاء أي جانب خادم HTML. إنه يعني ببساطة أنه سيتم تحميل JavaScript التفاعلي على العميل فقط، ولكن قد يستمر الخادم في إنشاء HTML ثابت أولي للعرض.

للتلخيص:

• SSR لمكونات العميل: قد يتم عرض HTML لمكونات العميل مسبقًا على الخادم (للتحميل الأولي)، ولكنها ليست تفاعلية حتى يتم ترطيبها على العميل.
• "استخدام العميل": يضمن هذا التوجيه تنفيذ JavaScript للتفاعل من جانب العميل فقط في المتصفح، ولكنه لا يوقف إنشاء HTML ثابت على الخادم.

إذا كنت تريد التأكد من أن المكون يتصرف بشكل مختلف، فقد تحتاج إلى إعادة التفكير في مكان وكيفية تحميل محتوى ديناميكي معين، خاصة إذا كنت تتوقع سلوكًا خاصًا بالعميل (مثل الوصول إلى النافذة أو المستند).