ثريد: React vs Next js
خلال رحلتك التعليمية راح تمر عليك تقنيات ومصطلحات كثيرة وتقنية تجي ورى تقنية وتحل مشكلة كانت موجودة وتستمر الحياة على هذا المنوال. فخلونا نعرف اليوم وش سالفة الـ next مع الـ react وخلال هذا الثريد راح اوضح كم مفهوم باذن الله
خلال رحلتك التعليمية راح تمر عليك تقنيات ومصطلحات كثيرة وتقنية تجي ورى تقنية وتحل مشكلة كانت موجودة وتستمر الحياة على هذا المنوال. فخلونا نعرف اليوم وش سالفة الـ next مع الـ react وخلال هذا الثريد راح اوضح كم مفهوم باذن الله
أولا react بقول عنه Framework و library مع بعض عشان مايزعلون علينا الجماعة لان السالفة مسببة حرب ف ثريد اليوم ماراح يحل هذي المشكلة 😂😂. كل الاثنين يعتبرون single page applicaton وطبعا الـ next مبني على الـ React ويتشابهون كثير ولكن مع مميزات أخرى
من أبرز عيوب الـ React ان محركات البحث (SEO) ما يحبونه وموقعك قد ما يظهر بمحركات البحث ويعود السبب لأنه Client Side Rendering! على عكس الـ Next اللي يعتبر Server Side rendering واللي راح يحل لك مشكلة الـ SEO مع جوانب ثانية
الـ Client Side rendering (CSR) هو أنه محتوى الصفحة نفسها راح يصير له render في المتصفح عن طريق الجافا سكربت.
فلو تدخل على الـ page source code للمواقع المبنية في الـ React بتلاحظ أنه مافيها HTML بس الـ basic structure ! والسبب أنه الـ HTML بكبره صارله render عن طريق جافا سكربت
فلو تدخل على الـ page source code للمواقع المبنية في الـ React بتلاحظ أنه مافيها HTML بس الـ basic structure ! والسبب أنه الـ HTML بكبره صارله render عن طريق جافا سكربت
ف الجافا سكربت تجيبلك المحتوى dynamiclly على حسب الصفحة اللي انت فيها وهذا أكبر سبب يخلي الـ React مو كويس مع الـ SEO لان الصفحة نفسها مافيها الا javascript وشوية basic html.
وبنفس الوقت الـ initial load راح يكون عالي خصوصا للي النت عندهم بطيئ لانك بتضطر تحمل كل الجافا سكربت عند الـ Client ولكن بعد كذا الموضوع راح يكون سريع جدا.
وعشان تتضح الصورة انا ما أقول أن الـ React سيئ! كل تقنية لها ميزاتها وعيوبها مافيه شي يصلح لكل شي ف its a trade off
وعشان تتضح الصورة انا ما أقول أن الـ React سيئ! كل تقنية لها ميزاتها وعيوبها مافيه شي يصلح لكل شي ف its a trade off
وهذا gif بسيط سويته يوضح الفكرة ويختصر الكلام اللي فوق عن الـ Clinet Side Rendering
خلونا ننتقل للـ Next واللي أضاف ميزة انك تقدر تجيب المحتوى (fetching data) بالـ Server side واللي راح يحل لك مشكلة الـ SEO بشكل كبير!
فيه أكثر من طريقة للـ fetching data بالـ server side بشرحها لكم بشكل مبسط
فيه أكثر من طريقة للـ fetching data بالـ server side بشرحها لكم بشكل مبسط
1- الـ Server Side Rendering (SSR) وهو بكل بساطة قبل نرسل أي شي للـ client نسوي fetch للـ data من الـ server بعدييين نرسله للـ client!. فمع كل Request تسويه راح تسوي fetch لكل الـ data مرة ثانية حتى لو حجم التغيير كان صغير فهذي من عيوبها انها تسوي load عالي على الـ Server
2- الـ Static Site Generation تسوي fetch للـ data مع كل rebuild تسويه وتخليه عندك جاهز (static) وبعدين ترسله للـ client. بهذي الطريقة مافيه load عالي على الـ server لان الـ data موجودة عندك وما تحتاج ترجع تجيبها ثاني اذا صار فيه refresh للصفحة على سبيل المثال
ف الطريقة هذي سريعة جدا لانك اصلا تسوي fetch للـ data حتى قبل ما الـ client يسوي request !
الطريقة ذي تصلح اذا الصفحة بياناتها ما تتغير كثير لأن فيها عيب كبير وهو انك اذا اضفت شي جديد للـ data base ما راح يصير له fetch الا اذا سويت build مرة ثانية!
الطريقة ذي تصلح اذا الصفحة بياناتها ما تتغير كثير لأن فيها عيب كبير وهو انك اذا اضفت شي جديد للـ data base ما راح يصير له fetch الا اذا سويت build مرة ثانية!
3- الـ Incremental Static Regeneration (ISR) وهي تجمع بين الطريقة الأولى والثانية SSG , SSR!. ف يصير فيه fetch للـ data مع كل rebuild عشان الموضوع يكون سريع جدا وبنفس الوقت نقدر نسوي rebuild بشكل تلقائي ب فترة زمنية محددة بحيث انك حليت مشكلة ان الـ data ما تتغير!
في الختام اعذروني على الاطالة واذا أعجبك المحتوى لا تنسى تسوي لايك وأي أحد عنده اضافة يشاركنا في الكومنت 😍
جاري تحميل الاقتراحات...