Why SSR - Next.js ?

Know how old and modern apps render your application, Pros, and cons of SPA and SSR.

January 1, 2023

و انت بتذاكر Next او اي فريم ورك حاليا شغال SSR

و بعدين تسأل نفسك ثواني هو احنا لية محتاجين SSR و تحاول تبعد عن الاجابه التقليدية بتاعه

انه مفيد علشان SEO و مفيد APP FIRST RELOAD والكلام الجميل دا

و علشان تحاول تجاوب على نفسك فتسال سؤال تاني هو احنا اصلا كنا محتاجين SPA في اي 🧐 !!

ومن هنا تبدأ إجابتك 💡

في البداية خلينا نقول ان في حاجه اسمها App State وهي نقدر نتخيلها بأنها الليف سيكل بتاعه الابلكيشن مثلا زي انه اليوزر كان موجود في صفحة الـ login ودخل الـ credentials بتاعته وراح لصفحة الـ dashboard 💻

تخيل معايا ان دا هو الانتقال في state بتاعه app بتعنا من حاله لتانيه

ارجع بقي واحنا بنبي web app بتعنا قبل SPA كنا علشان نتنقل ما بين الصفحات [ App State ] دي :
  1. كنا في الاول بنبعت ريكويست للسيرفر علشان نعمل لوجين ✅
  2. فالسيفر بيرد عليك انت تمام انت معانا و يبعتلك الـ view الجديد الي هي صفحه الـ dashboard الي هي state الجديد] بتاعة App ✅
  3. الصفحه تعمل Reload ✅

👈 هنا بقي عايزك تتخيل ان كل انتقال مابين App State انت محتاج تكلم السيرفر علشان يبعلتك view الجديدة دي والـ Client الي هو البروزر مع كل مره يعرضها يعمل Reload كـ User Experience مش احسن حاجة.

👈 ومع تحسن JS Engine بدأنا نفصل الـ App State دا من السيرفر ويبدأ هنا الـ browser عن طريقJS هو الي يهندل Views او App State.

👈 لما اليوزر بيعمل login مش محتاج من السيرفر غير اني اعرف هل اليوزر دا فعلا موجود عندنا في السيستم و لا لا ؟!

👈 هنعمل دا عن طريق ان ابعت Credentials بتاعت اليوزر للسيرفر لو الأند بوبنت Success انا كـ client هشيل login view و هنحط الـ dashboard view ✨

👈 وبالتالي حلينا مشكلة Reload لان كل View عندي في الكلاينت as JS Files او Js components

بس هو زي ما تقول كدا جينا نظبط الجاكت البنطلون ضرب 😅

👈 فكرة ان كل views بتاعتك عبارة عن JS Files دي هتخلي App بتاعك في First Lunch في اول عرض للـ App يبقي بطئ

طيب ليه بيبقي بطئ شويه او في الغالب هيعرض يا blanck screen او loading spineer على حسب بقي App بتاعك طيب دا ليه؟🧐

👈 دا لانه Views بتاعتك دي مش Pure HTML دي عبارة JS Files و الـ UI Library الي انت بستخدمها هي بتهندلك HTML Creation عن طريق JS Files

  1. و بالتالي browser محتاج انه يعمل download لكل الفايلز دي الاول عنده قبل ما يعرض اي view ✅
  2. وبالتالي لو الابلكيشن بتاعك كبير أو النت عند اليوزر بطئ دا ممكن يخليه مستني شوية كدا عبال ما يشوف اول صفحة قدامه ✅

بس مش مشكله اكيد اليوزر بتاعك عنده 5G ياعم و المشكله دي مش هتبان ⚡️⚡️

  1. الحقيقة مش عايز اخبي عليك تيم الماركتنيج عندك بيعاني علشان الابلكيشن بتاعك غالبا مش بيظهر في محركات جوجول ودا علشان زي ما قلتلك انت معندكشHTML Pure انت عندك JS Files بتوصف View دي بس و بالتالي مفيش meta tags بتاعة SEO 🪐

👈 ودا بقي يرجعك للإجابة التقليدية الي هي إزاي اظبط آلأتنين دول مع الاخد في الاعتبار اني محتاج نفس البيهيفير بتاع Client

👈 ومن هنا تيجي إجابة SSR وهو اني محتاج اخلي السيرفر بتاعي بدل ما يبعت JS فايل في البدايه يبعتلي HTML File

  1. يترندر في الأول اول ما اليوزر يركويست الاب + يكون معاها meta tages
  2. عبال ما js files يتعلمها دونلود و تتنقل للـ browser يهندل باقي الـ App Stats او App Navigation

ودا الي بيعمله Next والحقيقة انا عايز اقول مش دي كل المشاكل الي بتحلها Meta Framework دي + بردو ان مش دي كل الحكاية لانه ظهر بردو issues ودا الي هنخلية للبلوجز الي بعد كدا ✌️