شروع به کار با SSR – DEV Community

سلام بچه ها، اخیراً من در حال بررسی Next.js هستم که چارچوبی است که بر روی واکنش برای ساده کردن توسعه برنامه وب ساخته شده است، و با تکنیکی برخورد کردم که برای رندر کردن صفحات وب استفاده می کند. این کاملاً از رویکرد آشنای رندر سمت مشتری (CSR) که بسیاری از ما به آن عادت داریم، متمایز است. این تکنیک به عنوان رندر سمت سرور (SSR) شناخته می شود.

در این مقاله، ما به این خواهیم پرداخت که SSR شامل چه چیزی است، تفاوت آن با CSR، و سایر جنبه های جذاب را کشف خواهیم کرد. بیا درست شیرجه بزنیم😉

SSR چیست؟

رندر سمت سرور (SSR) تکنیکی در توسعه وب است که در آن صفحه وب قبل از ارسال به مرورگر کاربر بر روی سرور تولید می شود. این بدان معنی است که محتوای اولیه صفحه قبلاً رندر شده و آماده نمایش در هنگام درخواست کاربر است.

در اینجا یک تفکیک از SSR در زمینه است Next.js:

• هنگامی که کاربر با درخواست http از صفحه Next.js بازدید می کند، سرور کدهای لازم را برای تولید محتوای کامل HTML برای آن صفحه اجرا می کند زیرا به طور پیش فرض تقسیم صفحه را انجام می دهد. این شامل داده های اولیه و نشانه گذاری است.
• سپس HTML تولید شده به مرورگر کاربر ارسال می شود.
• هنگامی که مرورگر HTML را دریافت می کند، می تواند بلافاصله محتوا را بدون نیاز به صبر کردن برای دانلود و اجرای جاوا اسکریپت اضافی ارائه دهد.

این رویکرد چندین مزیت دارد از جمله:

• سئو بهبود یافته: موتورهای جستجو به راحتی می توانند محتوای صفحات رندر شده با SSR را بخزند و فهرست کنند، که می تواند رتبه جستجوی وب سایت شما را افزایش دهد.
• زمان بارگذاری اولیه سریعتر: از آنجایی که HTML اولیه قبلاً تولید شده است، کاربران محتوای صفحه را تقریباً فورا می بینند که منجر به عملکرد بهتر درک می شود.
• تجربه کاربری پیشرفته: لازم نیست کاربران قبل از اینکه بتوانند با صفحه تعامل داشته باشند منتظر بارگذاری جاوا اسکریپت بمانند.

بنابراین چه چیزی آن را از رندر سمت مشتری متمایز می کند؟ به نظر می رسد هر دو فوراً ارائه می شوند، درست است؟

تفاوت بین CSR و SSR

شما درست می گویید که هم رندر سمت سرور (SSR) و هم رندر سمت سرویس گیرنده (CSR)، روش پیش فرض در React، می تواند یک تجربه رندر فوری برای کاربران فراهم کند. با این حال، یک تفاوت اساسی در زمان انجام رندر وجود دارد 👇🏽

• در SSR (با Next.js)، سرور HTML اولیه را روی سرور ارائه می‌کند، از جمله داده‌های مورد نیاز برای صفحه. سپس این HTML به مرورگر ارسال می‌شود و در نتیجه زمان بارگذاری اولیه سریع‌تر می‌شود زیرا محتوا از قبل وجود دارد.
• در CSR (React معمولی)، مرورگر یک پوسته HTML خالی دریافت می کند و سپس کد جاوا اسکریپت لازم را برای ارائه محتوای صفحه واکشی می کند. این می تواند منجر به تاخیر جزئی شود (قبل از اینکه کاربر محتوا را ببیند، به خصوص در اتصالات کندتر).

در اینجا یک قیاس برای افتراق این دو وجود دارد

• تصور کنید SSR به عنوان یک غذای از پیش آماده در یک رستوران است. شما فوراً غذای خود را دریافت می کنید و سپس سرآشپز هر غذای اضافی را که سفارش داده اید آماده می کند.
• از سوی دیگر، CSR مانند سفارش یک وعده غذایی سفارشی است. آشپز باید همه چیز را از ابتدا بپزد، بنابراین تهیه غذای شما کمی بیشتر طول می کشد.

ملاحظات مربوط به SSR با Next.js

در اینجا دو چیز اضافی در مورد SSR با Next.js وجود دارد

1. واکشی داده ها: SSR برای SEO و زمان بارگذاری اولیه عالی است، اما می تواند مقداری سربار به سرور شما اضافه کند زیرا نیاز به تولید HTML برای هر درخواست دارد. برای بهینه سازی این، Next.js تکنیک هایی مانند getStaticProps و getServerSideProps برای واکشی کارآمد داده ها در سمت سرور.
2. برای محتوای بسیار پویا ایده آل نیست: SSR برای برنامه‌های تحت وب با به‌روزرسانی‌های مداوم یا تعاملات کاربر که به شدت به جاوا اسکریپت متکی هستند، کمتر مناسب است. در این موارد، رندر سمت مشتری یا رویکرد ترکیبی ممکن است مناسب‌تر باشد.

درك كردن getStaticProps و getServerSideProps

در Next.js، getStaticProps و getServerSideProps توابعی هستند که به طور خاص برای واکشی داده ها در سمت سرور طراحی شده اند و به اشکالات احتمالی SSR که قبلاً در مورد آن صحبت کردیم، پرداخته اند. در اینجا خلاصه ای از چیستی آنها و تفاوت بین آنها آمده است 👇🏽

• getStaticProps: این تابعی است که برای پیش نمایش داده ها در زمان ساخت ایده آل است. این برای محتوایی که اغلب به روز نمی شود، مانند پست های وبلاگ یا صفحات محصول، عالی است. داده‌های واکشی شده مستقیماً در HTML ایستا گنجانده می‌شوند و در نتیجه زمان بارگذاری فوق‌العاده سریع و سئوی عالی ایجاد می‌شود زیرا موتورهای جستجو به راحتی می‌توانند محتوا را فهرست‌بندی کنند. اینم یه مثال 👇🏽

  
  function HomePage({ data }) {
    return (
      <div>
        <h1>Home Pageh1>
        <p>Data fetched at build time: {data}p>
      div>
    );
  }
  
  export async function getStaticProps() {
    // Simulate fetching data at build time
    const data = "This data was fetched at build time.";
    return {
      props: {
        data,
      },
    };
  }
  
  export default HomePage;
  

  از کد بالا چه خبر است👇🏽

  • ما یک جزء صفحه اصلی ساده داریم (HomePage) که برخی از داده ها را به عنوان پایه دریافت می کند.
  • ما استفاده می کنیم getStaticProps برای واکشی داده ها در زمان ساخت. در اینجا، ما واکشی داده ها را به صورت همزمان شبیه سازی می کنیم.
  • داده های واکشی شده به HomePage جزء به عنوان پایه

• getServerSideProps: این تابعی است که داده ها را در سمت سرور درست قبل از ارائه صفحه برای هر درخواست واکشی می کند. این یک انتخاب خوب برای محتوایی است که باید بر اساس کاربر پویا یا شخصی شود، مانند سبد خرید یا نمایه های کاربر. در حالی که ممکن است کمی تاخیر در مقایسه با getStaticProps، تضمین می کند که داده ها همیشه به روز هستند. اینم یه مثال 👇🏽

  
  function AboutPage({ data }) {
    return (
      <div>
        <h1>About Pageh1>
        <p>Data fetched on each request: {data}p>
      div>
    );
  }
  
  export async function getServerSideProps() {
    // Simulate fetching data on each request
    const data = "This data is fetched on each request.";
    return {
      props: {
        data,
      },
    };
  }
  
  export default AboutPage;
  
  

  از کد بالا چه خبر است👇🏽

  • ما همچنین یک جزء ساده درباره صفحه داریم (AboutPage) که برخی از داده ها را به عنوان پایه دریافت می کند.
  • ما استفاده می کنیم getServerSideProps برای واکشی داده ها در مورد هر درخواست. در اینجا، ما واکشی داده ها را به صورت همزمان شبیه سازی می کنیم.
  • داده های واکشی شده به AboutPage جزء به عنوان پایه

💡 امیدوارم یک ایده اولیه در مورد چگونگی آن داشته باشید getStaticProps و getServerSideProps اکنون کار می کند

این مثال‌ها کاملاً ابتدایی هستند و کاربرد اساسی آن را نشان می‌دهند getStaticProps و getServerSideProps. اما در سناریوهای دنیای واقعی، معمولاً از این توابع برای واکشی داده ها از منابع خارجی مانند API یا پایگاه داده استفاده می کنید.

نتیجه

با تشکر از شما برای رسیدن به پایان مقاله! 🎉 امیدوارم برای شما آموزنده و آموزنده بوده باشد. در صورت داشتن هرگونه سوال یا مشارکت، در قسمت نظرات زیر آن را مطرح کنید. آخر هفته شگفت انگیزی را برای شما آرزو می کنیم! 😀