تفاوت Next.js , Nuxt.js و Nest.js
Jun 3, 2020 · 551 words · 3 minute read
در دنیای جاوااسکریپت سه فریم ورک با نام های مشابه وجود دارند که نه تنها در نام بلکه در عملکرد هم دارای شباهت های زیادی هستند و بارها باعث شدن گیج بشم .در این پست می خواهم به تفاوت سه فریم ورک Next.js , Nuxt.js و Nest.js بپردازم و در آینده هر موقع که نیاز پیدا کردم به این پست مراجعه کنم و امیدوارم شما هم از این مطلب استفاده کنید.
قبل از اینکه تفاوت این فریم ورک ها رو توضیح بدم چند تا مفهوم هست که بهتره مرورشون کنیم:
کتابخانه هایی مثل angular ،react و vue سمت کلاینت اجرا می شوند. یعنی وقتی که یک درخواست توسط مرورگر سمت سرور ارسال می شود مرورگر فایل های جاوااسکریپت رو دانلود می کند و سپس در مرورگر کلاینت درخواست را پردازش و نمایش می دهد و بقیه درخواست ها در مرورگر اتفاق می افتد. به این روش اجرا میگن client-side rendered (CSR)
وقتی داریم از CSR استفاده می کنیم تا وقتی که فایل های جاوا اسکریپت کامل دانلود نشده کاربر صفحه سفید و یا لودینگ رو مشاهده می کنه. همچنین خیلی از موتورهای جستجو در فهرست(index) کردن صفحات CSR مشکلاتی دارند. هر چند که راه هایی برای بهتر شدن فهرست صفحات CSR ارائه شدن ولی مشکل کاملا حل نشده.
برای حل این مشکلات از server-side rendered (SSR) استفاده می شود. در این روش سرور html پردازش شده را سمت مرورگر میفرسته و به صورت همزمان مرورگر فایل های جاوااسکریپت رو دانلود می کنه و بقیه درخواست ها در مرورگر اتفاق می افتد.
برای اینکه عملکرد یک سایت رو ارزیابی کنند معیارهای زیادی وجود داره و یکی از مهمترین معیارها مدت زمانی است که یک صفحه در مرورگر کاربر قابل مشاهده است. در این معیار و برخی دیگر استفاده از SSR عملکرد بهتری دارد و ترجیح داده می شود (فرض می کنیم که صفحات ایستا (static) نیستند)
فریم ورک های Next و Nuxt هر دو در ابتدا صفحات را در سرور پردازش کرده و بارگذاری می نمایند(از SSR استفاده می شود). پس از بارگذاری اولیه درخواست ها سمت مرورگر انجام میشود(CSR). با این روش از بهترین های هر دو روش استفاده می شود. به این روش universal rendering گفته می شود.
از Next برای ساخت اپلیکیشن های universal rendering با استفاده از react استفاده می شود. Next تمام پیکربندی ها و تنظیمات پردازش react رو مدیریت می کند. راه اندازی web pack را هم Next انجام می دهد. Nuxt همان کاری که Next.js می کند را انجام می دهد با این تفاوت که از Nuxt برای صفحات Vue استفاده می شود و برای ساخت وب های universal rendering استفاده می شود.
در بین این سه فریم ورک Nest با بقیه کاملا متفاوت است. Nest فریم ورکی سمت سرور برای ساخت node.js است و اهمیتی ندارد از چه فریم ورکی در سمت کلاینت استفاده شده است و فقط برای ساخت صفحات universal rendering استفاده نمی شود.
Nest از جاوا اسکریپت و تایپ اسکریپت پشیبانی می کنه و شامل یک سری annotations و استاندارد سازی در فولدر هاست و یک لایه انتزاعی(abstraction) در بالای فریم ورک های متداول node مانند Express قرار میگیره و تلاش می کنه تا برای توسعه برنامه های node یک معماری ارائه کنه. به عنوان یک توسعه دهنده جاوا شباهت زیادی دیدم بین کاری که Nest برای node می کنه و کاری که فریم ورک spring برای جاوا انجام می ده.