- بواسطة x32x01 ||
في Next.js، إيه الفروق الأساسية بين الـ SSR (Server-Side Rendering) وClient-Side Rendering؟
SSR يعالج الـ HTML في السيرفر قبل إرساله للمستخدم، مما يحسن الأداء والـ SEO. Client-Side Rendering (CSR) يعالج الـ HTML في المتصفح بعد تحميل JavaScript، مما يجعل الصفحات أبطأ في التحميل الأولي ولكن أسرع في التفاعل بعد التحميل. - بواسطة x32x01 ||
إجابات مختصرة لبعض الأسئلة:
1. تسريع FCP: يمكن تقليله باستخدام تقنيات مثل Code Splitting، Lazy Loading للصور والمحتويات غير المهمة، وتحسين الأداء عبر CDN، وضغط الملفات، وتقليل الـ JavaScript bundle.
2. الفرق بين Context API و HOC و Render Props: Context API تسهل تمرير البيانات دون الحاجة إلى الـ props drilling، بينما HOC و Render Props تُستخدم لتغليف المكونات وإعادة استخدامها. لكن HOC قد يكون أكثر تعقيداً خاصة مع تداخل المكونات.
3. SSR vs CSR في Next.js: SSR يقوم بتقديم محتوى الصفحة على الخادم قبل إرساله إلى المتصفح، مما يعزز الـ SEO وأوقات التحميل الأولية. CSR يتم كل شيء في المتصفح بعد تحميل الصفحة. SSR عادة ما يكون أفضل لأداء الموقع وتحسين تجربة المستخدم.
4. Debouncing vs Throttling: الـ Debouncing يُستخدم لمنع استدعاء دالة متكرر بسرعة عالية (مثلاً عند كتابة المستخدم)، بينما Throttling يُستخدم لتحديد عدد الاستدعاءات في فترة زمنية معينة، مثل التمرير أو تكبير الشاشة.
5. Race Conditions في Promises: يمكن تجنبها باستخدام async/await وإدارة تدفق الأكواد بعناية، أو استخدام مكتبات مثل Promise.all أو AbortController في حالات السباق بين الطلبات.
6. CSS Variables vs SASS Variables: CSS Variables يمكن تغييرها في وقت التشغيل وتعمل بشكل ديناميكي في الـ DOM، بينما SASS Variables هي ثابتة أثناء compile-time فقط.
1. تسريع FCP: يمكن تقليله باستخدام تقنيات مثل Code Splitting، Lazy Loading للصور والمحتويات غير المهمة، وتحسين الأداء عبر CDN، وضغط الملفات، وتقليل الـ JavaScript bundle.
2. الفرق بين Context API و HOC و Render Props: Context API تسهل تمرير البيانات دون الحاجة إلى الـ props drilling، بينما HOC و Render Props تُستخدم لتغليف المكونات وإعادة استخدامها. لكن HOC قد يكون أكثر تعقيداً خاصة مع تداخل المكونات.
3. SSR vs CSR في Next.js: SSR يقوم بتقديم محتوى الصفحة على الخادم قبل إرساله إلى المتصفح، مما يعزز الـ SEO وأوقات التحميل الأولية. CSR يتم كل شيء في المتصفح بعد تحميل الصفحة. SSR عادة ما يكون أفضل لأداء الموقع وتحسين تجربة المستخدم.
4. Debouncing vs Throttling: الـ Debouncing يُستخدم لمنع استدعاء دالة متكرر بسرعة عالية (مثلاً عند كتابة المستخدم)، بينما Throttling يُستخدم لتحديد عدد الاستدعاءات في فترة زمنية معينة، مثل التمرير أو تكبير الشاشة.
5. Race Conditions في Promises: يمكن تجنبها باستخدام async/await وإدارة تدفق الأكواد بعناية، أو استخدام مكتبات مثل Promise.all أو AbortController في حالات السباق بين الطلبات.
6. CSS Variables vs SASS Variables: CSS Variables يمكن تغييرها في وقت التشغيل وتعمل بشكل ديناميكي في الـ DOM، بينما SASS Variables هي ثابتة أثناء compile-time فقط.
