مفهوم SSR در نکست جی اس (Next.js)
SSR چیست؟
توسعه‌دهندگان به طور گسترده از فریم ورک Next.js برای پشتیبانی از رندر سمت سرور (SSR) در برنامه‌های React خود استفاده می‌کنند. این فریم‌ورک علاوه بر SSR ابزارهای زیادی برای به بهبود کیفیت برنامه‌های ساخته شده با React ارائه می‌دهد.هدف ما در این بخش این است که برخی از مفاهیم و تکنیک‌های اصلی Next.js بررسی کنیم. برای این کار ابتدا با بررسی مزایای SSR شروع می‌کنیم و سپس به این موضوع که SSR و پیش‌رندر در این فریم ورک چگونه کار می‌کند می‌پردازیم. علاوه بر این، برخی از کامپوننت‌های اصلی که در Next.js مورد استفاده قرار می‌گیرند را بررسی خواهیم کرد.
رندر سمت سرور چیست؟
هنگامی که ما فایل‌های برنامه خود را روی سرور آپلود می‌کنیم، مرورگرهای دیگر که کلاینت نام دارند می‌توانند آن‌ها را درخواست کنند. برای مثال وقتی به آدرس /banafsh می‌رویم کلاینت banafsh.html را از سرور درخواست می‌کند. این فایل همچنین با منابع مرجع دیگری مانند تصاویر، stylesheet ها و موارد دیگر همراه است. پس از دریافت فایل‌ها، مرورگر صفحه را به کاربر نمایش می‌دهد و برای هر navigation ای مرورگر یک صفحه کاملاً جدید از سرور درخواست می‌کند.
موارد زیادی در وب وجود دارد. با استفاده از متد اصلی، زمانی که به یک صفحه وب می‌رویم قبل از نمایش هر چیزی باید منتظر بمانیم تا مرورگر فایل‌های آن صفحه را دانلود کند. اما امروزه یک متد جدید برای ایجاد اپلیکیشن‌ها وجود دارد و آن SPA (single-page application) می‌باشد.
SPA ها وب اپلیکیشن‌ها و یا وب‌سایت‌هایی هستند که تنها یک document وب را از سرور لود کرده و سپس به صورت پویا تعیین می‌کنند که چه چیزی در مسیرهای مختلف نمایش داده شود. این روش به این معنی است که مرورگر فقط یک بار درخواست را به سرور ارسال می‌کند. در نتیجه سریع‌تر است زیرا مرورگر از درخواست مجدد بعد از درخواست اول اجتناب می‌کند.
SPA ها با تکنیک CSR (client-side rendering) کار می‌کنند. در CSR، جاوااسکریپت روی کلاینت صفحات وب را رندر می‌کند. برای هر مسیر، جاوااسکریپت المنت‌های آن مسیر را رندر می‌کند. در مقابل، SSR المنت‌های مختلف را برای مسیرهای مختلف از سرور رندر کرده و کار کم‌تری را برای کلاینت باقی می‌گذارد.
یک نکته بسیار خوب در مورد SSR این است که به بهینه‌سازی موتورهای جستجو (SEO) نیز کمک می‌کند. با SSR، صفحه وب برای هر URL از سرور پردازش می‌شود و ایندکس کردن صفحات مختلف وبسایت را برای موتورهای جستجو آسان‌تر می‌کند.
از آنجایی که در SSR برای دریافت محتوای جدید برای یک صفحه دیگر همیشه باید منتظر لود مجدد صفحه باشیم ممکن است روش کندی به نظر برسد، اما فریمورک‌هایی مانند Next.js فرآیند سریع‌تری برای لذت بردن از ویژگی‌های SSR همانند مزایای سمت کلاینت دارند. در ادامه با بنفش مگ همراه باشید.
