سرور ساید رندرینگ یا (ssr(server side rendering چیست؟ به صورت کلی اجرای سمت برنامه React یا همان سمت سرور و انتقال ریسپانز به شکل HTML سمت کاربر به طوری که React بدون نیاز به render دوباره از حالت فعلی بتوان استفاده کرد!
چرا باید از ssr(server side rendering) استفاده کرد؟
در این زمینه توضیحات گوناگونی ارائه شده است، اما مهم ترین دلیلی که باعث می شود از این موضوع استفاده کنید، موارد زیر هستند:
- SSR به راحتی قادر است که به شما HTML بدهد! در واقع شما می توانید در مرورگرهای قدیمی هم از برنامه React استفاده کنید!
- این موضوع تا حد زیادی باعث افزایش سرعت سایت شما در سمت سرور می شود. این موضوع برای بهینه سازی سایت به شدت مهم است. اگر سایت پر سرعت تری می خواهید، می توانید از خدمات سئو استفاده کنید!
- یکی از بزرگترین مزیت های این موضوع، سئو و بهینه سازی سایت شما به آسانی است.
در کنار این مزایا که باعث می شود شما از SSR استفاده کنید، معایب این کار را هم بهتر است که بشناسید! در این زمینه به مهم ترین معایب این موضوع اشاره کرده ام:
- پیاده سازی سخت و نیاز به دانش فنی که هرکسی از عهده ی آن بر نمیاید!
- SSR تا حدی ممکن است که بر روی زمان ریسپانس شما تاثیر بگذارد که دلیل آن یکبار اجرای آن در سمت سرور است.
آسان کردن کار خزنده بوب موتورهای جستجو مانند گوگل و بینگ (+شبکه های اجتماعی توئیتر، فیس بوک و …)
باید بدانید که گوگل، بینگ، فیسبوک، توییتر و … همه برای فهرست بندی محتوای برنامه شما و ایجاد جستجو در بین مطالب موجود در وب به سایت هایی در این زمینه متکی هستند. این مرورگرها و برنامه هایی که این شبکه های اجتماعی و موتورهای جستجو استفاده می کنند، تعاملی انسانی ندارند، به همین علت لازم است که تا حد ممکن کار را برای آن ها آسان کرد.
استفاده از SSR با استفاده از انگولار می تواند کاری کند که به راحتی خزنده های مرورگرها و موتورهای جستجو قابلیت جستجو داشته باشند و جالب است بدانید که این کار بدون مرور کدهای جاوا اسکریپت صورت می گیرد. این موضوع به این دلیل است که هر URL یک صفحه کاملا رندر شده را بر می گرداند.
بهبود عملکرد در دستگاه های همراه و کم مصرف
برخی از دستگاه ها از جاوا اسکریپت به طرز جالبی پشتیبانی نمی کنند! پشتیبانی نکردن از جاوا اسکریپت و یا ضعف در پشتیبانی این زبان باعث می شود که برنامه عملکرد خوب و قابل قبولی نداشته باشد. برای این موارد احتمالا راه حل این است که برنامه بدون کدهای جاوا اسکریپت توسط ارائه شود. این نسخه محدود با کمک SSR قابل پیاده سازی و داشتن همان تجربه کاربری یا UX است.
نمایش سریع صفحه اول
نمایش سریع و افزایش سرعت برای نشان دادن محتویات صفحه اول از جمله مزایایی است که SSR همراه خود می آورد. این موضوع در جذب کاربران بیشتر و بارگذاری سریعتر صفحات و بهبود رتبه سایت در موتور جستجوی گوگل کاملا موثر است. شاید شما این کار را کردید و فکر کردید که سرعت آنچنان تغییر نکرده است. در مسئله سرعت بارگذاری این را مدنظر داشته باشید که کمترین میزان تغییرات هم مهم است.
شما با استفاده از انگولار و SSR در کنارهم به عنوان مکمل قادر هستید که صفحات فرود را برای برنامه ایجاد کنید. صفحات HTML خالص هستند و حتی اگر شما Javascript را غیر فعال کنید، می توانید صفحه نمایش بزرگتری را ایجاد کنید. در نظر داشته باشید که صفحه حوادث توسط مرورگر کنترل نمی شود، اما از طریق سایت با استفاده از routerlink قابل پشتیبانی است.
در عمل ، برای حفظ توجه کاربر ، یک نسخه ثابت از Landing Page را ارائه می دهید. در عین حال ، برنامه Angular کامل را در پشت آن بارگیری می کنید. کاربر عملکرد تقریباً فوری را از صفحه فرود درک می کند و تجربه تعاملی کاملی را بعد از بارگذاری کامل برنامه دریافت می کند.
SSR ها و استفاده از آن ها با استفاده از استانداردهای جهانی
یک سرور وب جهانی به درخواست های صفحه برنامه با HTML استاتیک ارائه شده توسط موتور قالب جهانی پاسخ می دهد. سرور درخواست های HTTP از مشتریان (معمولاً مرورگرها) را دریافت و پاسخ می دهد ، و دارایی های استاتیک مانند اسکریپت ها ، CSS و تصاویر را نیز ارائه می دهد. این ممکن است به درخواست های داده ، مستقیم یا به عنوان پراکسی به یک سرور داده جداگانه پاسخ دهد.
رنامه های جهانی از پکیج Angular platform-server (برخلاف مرورگر پلتفرم) استفاده می کنند ، که پیاده سازی سرور DOM ، XMLHttpRequest و سایر ویژگی های سطح پایین را فراهم می کند که به مرورگر متکی نیستند. سرور (Node.js Express در مثال این راهنما) درخواست های مشتری برای صفحات برنامه را به NgUniversal ngExpressEngine منتقل می کند. در زیر کاپوت ، این عملکرد را به عنوان renderModule () جهانی فراهم می کند ، در حالی که حافظه پنهانی و دیگر ابزارهای مفید را ارائه می دهد.
تابع renderModule () به عنوان ورودی های یک صفحه HTML قالب (معمولاً index.html) ، یک ماژول زاویه ای حاوی مؤلفه ها و مسیری را تعیین می کند که کدام مؤلفه ها را نشان می دهد. مسیر از درخواست مشتری به سرور برمی گردد. هر درخواست در نمای مناسب برای مسیر درخواستی نتیجه می گیرد. تابع renderModule () نمای را در برچسب <app> از الگو ارائه می دهد، و یک صفحه HTML به پایان رسیده را برای مشتری ایجاد می کند. سرانجام ، سرور صفحه ارائه شده را به مشتری باز می گرداند.
نویسنده: صدف امینی نیا
دیدگاهتان را بنویسید