أزاى تزود سرعة موقعك وتعمل صفحات أسرع باستخدام SSR

أزاى تزود سرعة موقعك وتعمل صفحات أسرع باستخدام Server-Side Rendering (SSR) في Next.js ​

بص يا معلم خليني اشرحلك الموضوع بكل بساطة. Server-Side Rendering (SSR) بيخلي الصفحة تتعملها Render على السيرفر الأول وبعدين توصل للـ Client جاهزة يعني بدل ما يحصل Client-Side Rendering (CSR) اللي بيستنى الداتا والـ Components تجهز عند المستخدم. يعني ببساطة السيرفر بيخلص كل الشغل ويبعته للزائر على الجاهز.

طيب يعني إيه الكلام ده؟
يعني بدل ما الزائر يستنى الموقع يبني عنده من الأول في المتصفح لا السيرفر هو اللي بيعمل Render للصفحة ويبعتها جاهزه. وبكدا الزائر هيلاقي الصفحة بتتحمل أسرع.

طب إزاي تفعل الـSSR في Next.js؟​

في Next.js الموضوع سهل هتستخدم getServerSideProps في أي صفحة انت عايزها تكون Server-Rendered. الفنكشن دي بتجيب الداتا اللي الصفحة محتاجاها وبتعمل Render للسيرفر قبل ما الزائر يشوفها.

ركز معايا كدا يا يصحبي في المثال دا:

export async function getServerSideProps() {
  const res = await fetch('https://api.example.com/data');
  const data = await res.json();
  return { props: { data } };
}
export default function Home({ data }) {
  return (
    <div>
      <h1>البيانات دي جاية من السيرفر</h1>
      <pre>{JSON.stringify(data, null, 2)}</pre>
    </div>
  );
}

في المثال دا السيرفر بيجيب البيانات من API ويعمل Render للصفحة مباشرة يعني الزائر هيشوف كل حاجة جاهزة ومش هيحتاج يستنى Loading

طب ليه بنستخدم SSR؟​

1. ال Performance هيبقي عالي لان الصفحة بتكون جاهزة للزائر علي طول.
2. هتحسن ال SEO، محركات البحث زي Google بتحب المواقع اللي بتقدم محتوى جاهز وسريع ف دا هيساعد على تحسين ترتيب الموقع.
3. والحاجه الأهم من وجه نظري هي الـ Real-time Data: لو بتعرض بيانات متحدثة زي الأخبار أو الأسعار SSR هيضمن إن الزائر يشوف أحدث نسخة منها.
لما تستخدم SSR في المشروع ال شغال فيه يا صديقي هتشوف فرق كبير في السرعة والـ User Experience.

وبكده نكون خلصنا شرحنا عن الـ Server-Side Rendering. لو عندك سؤال أو استفسار، اكتب في الكومنتات.

 

ممكن يجى حد يقول
معلش يا هندسة طب ما الريأكت العادي بيعمل كده بيعمل spa و الـ function اللي حضرتك عملتها دي بستخدم fetch بجيب داتا من الapi على شكل json file يعني الbackend بيعبتلي داتا و أنا بعرضها بمعرفتي في الbrowser

أود أن أقول له :
الـ React العادي SPA الصفحة بتتبني في المتصفح بعد ما البيانات توصل من الـ API. ده بيعمل Loading للبيانات قدام الزائر.
لكن الـ SSR في Next.js الصفحة بتتبني على السيرفر وتتبعت جاهزة بالبيانات للمتصفح ف كدا الزائر بيشوف الصفحة بسرعة من غير ما يستني.
فالاختلاف الأساسي زي منت شايف في ال SSR السيرفر بيعمل الشغل الأول وفي SPA المتصفح هو اللي بيعمله