خلاصه سریع ↬
بیایید در مورد Remix صحبت کنیم، چارچوبی برای ایجاد پروژه های جاوا اسکریپت با استفاده از رندر سمت سرور. بیایید ویژگی ها و مفاهیم اصلی آن را مرور کنیم و شباهت ها و تفاوت های آن را با Next.js ببینیم. ریمیکس چندی پیش به منبع باز تبدیل شد و آینده امیدوار کننده ای دارد. بیایید ببینیم که چگونه تکامل می‌یابد، کدام ویژگی‌ها اضافه می‌شوند، کدام پروژه‌های مرتبط برای بهبود تجربه توسعه‌دهنده ایجاد می‌شوند، و کدام سناریوهای دیگر را می‌کوشد حل کند.

در جامعه توسعه دهندگان، بسیار رایج است که هر روز چارچوب ها و ابزارهای جدیدی ظاهر می شوند. برخی از آنها رویکرد متفاوتی را برای حل سناریوهایی ارائه می دهند که در حال حاضر با ابزارهای دیگر حل می شوند. دیگران با ارائه یک مفهوم یا ایده جدید، روشی متفاوت برای رویارویی با پروژه ها را پیشنهاد می کنند. از آنجایی که نجار ابزارهای مختلفی برای انجام وظایف مختلف دارد، توسعه‌دهندگان چارچوب‌ها و کتابخانه‌های زیادی در دسترس دارند که برای موارد استفاده مختلف مناسب هستند.

بیایید در مورد Remix صحبت کنیم، چارچوب (نوعی) جدید برای ایجاد پروژه های جاوا اسکریپت با استفاده از رندر سمت سرور. بیایید ویژگی‌ها و مفاهیم اصلی آن را مرور کنیم و شباهت‌ها و تفاوت‌ها را با یکی دیگر از چارچوب‌های محبوب جاوا اسکریپت ببینیم: Next.js.

ریمیکس چیست؟

مطابق با وب سایت رسمی آنRemix یک فریم‌ورک کامل پشته‌ای است که به توسعه‌دهندگان اجازه می‌دهد تا با تمرکز بر استانداردهای وب، تجربیات کاربری عالی ایجاد کنند. با استفاده از آن، می توانید برنامه وب خود را با استفاده از React و JavaScript برای رندر سمت کلاینت و رندر سمت سرور ایجاد کنید.

همانطور که بر روی Web Fetch API ساخته شده است، برنامه های ایجاد شده با Remix می توانند در هر جایی اجرا شوند. Remix از رندر سمت سرور برای دستکاری داده ها و ارائه محتوای HTML در سرور استفاده می کند و مقدار کمتری از جاوا اسکریپت ممکن را برای مشتری ارسال می کند.

Remix در ابتدا یک چارچوب حق بیمه مبتنی بر اشتراک بود، اما کمتر از یک سال پیش، به عنوان یک چارچوب منبع باز راه اندازی شد. پس از این، جامعه توسعه دهندگان و کاربران Remix شروع به رشد کردند و محبوبیت بیشتری پیدا کردند.

ویژگی های اصلی ریمیکس

بیایید برخی از ویژگی های اصلی ارائه شده توسط Remix را برجسته کنیم:

  • مسیرها:
    مانند سایر فریم ورک‌ها، Remix به توسعه‌دهندگان اجازه می‌دهد تا مسیرهای مختلف پروژه‌های وب خود را با استفاده از فایل‌های JavaScript/TypeScript که حاوی توابع کنترل‌کننده هستند، مدیریت کنند. ما می‌توانیم مسیرهایی را در وب‌سایت خود ایجاد کنیم و فایل‌هایی را ایجاد کنیم که از سلسله‌مراتب سیستم فایل پروژه‌های ما پیروی می‌کنند و URLهای آنالوگ برای صفحات خود ایجاد می‌کنند. مسیرهای ریمیکس با استفاده از ویژگی مسیریابی جزئی ارائه شده توسط React-Router. با در نظر گرفتن این رویکرد، می توانیم مزایای زیر را برجسته کنیم.

  • اجزای تو در تو:
    Remix به شما امکان مدیریت صفحات و اجزای تو در تو را می دهد. ما می توانیم یک فایل برای مدیریت یک مسیر خاص و در همان سطح در سیستم فایل، یک پوشه با همان نام ایجاد کنیم. تمام فایل هایی که در داخل آن پوشه ایجاد می کنیم، به جای صفحات مختلف، اجزای تو در تو مسیر والد خواهند بود.

  • رسیدگی به خطا:
    کامپوننت‌های تودرتو یک مزیت دیگر نیز به همراه دارند: اگر هنگام رندر کردن یک مؤلفه خاص خطایی رخ دهد، بر سایر بخش‌های تودرتوی صفحه تأثیری نمی‌گذارد. بنابراین، می‌توانیم به جای دریافت خطای کلی صفحه، خطا را فقط در قسمتی که رخ داده است، کپسوله کنیم.

  • تشکیل می دهد:
    از آنجایی که Remix بر روی استانداردهای وب تمرکز دارد، از روش های بومی استفاده می کند (POST، PUT، DELETE، PATCH) برای رسیدگی به فرم ها به جای استفاده از جاوا اسکریپت برای آن.

  • لودرها و اقدامات:
    Remix دو نوع عملکرد مختلف را برای ایجاد محتوای پویا سمت سرور ارائه می دهد. را loader توابع برای رسیدگی استفاده می شود GET درخواست های HTTP در سرور، عمدتا برای دریافت داده ها از منابع مختلف استفاده می شود. را action مانیتور توابع POST، PUT، DELETE، و PATCH درخواست ها، متمرکز بر دستکاری و اصلاح داده ها.

اکنون که در مورد برخی از ویژگی‌های اصلی Remix صحبت کردیم، اجازه دهید آن را با یکی از محبوب‌ترین و پرکاربردترین فریمورک‌های React امروزه مقایسه کنیم: Next.js.

بیشتر بعد از پرش! ادامه مطلب زیر ↓

تفاوت Remix و Next.js چیست؟

اگر نگاهی گذرا بیندازیم، ممکن است به نظر برسد که Next.js و Remix همان هدف را دنبال می‌کنند – و احتمالاً هم همینطور هستند. اما اگر ویژگی‌ها و رویکردهایی را که ارائه می‌کنند تحلیل کنیم، شباهت‌ها و تفاوت‌ها را شناسایی می‌کنیم و می‌توانیم به حل سناریوها با یکی از چارچوب‌ها بیشتر از دیگری فکر کنیم.

React Based

هر دو فریم ورک در بالای React ایجاد شده اند، اما Remix سعی می کند خود را از آن جدا کند. می بینیم که Remix سطوح بالاتری از انتزاع را ارائه می دهد. همچنین، اعضای مختلف جامعه Remix روی پیاده سازی های مختلف کار کرده اند با استفاده از چارچوب های دیگرمانند Vue.js، Angular و Svelte. Next.js به React وابسته است و در حال حاضر برنامه ای برای تغییر آن وجود ندارد.

رندر سمت سرور

علاوه بر ویژگی‌هایی که در بالا ذکر کردیم، می‌توانیم ببینیم که هم Remix و هم Next.js رندر سمت سرور (SSR) را برای تولید نشانه‌گذاری و محتوای صفحات ما از وب سرور قبل از ارسال آن به مشتری ارائه می‌کنند.

هم Next.js و هم Remix از React استفاده می‌کنند، بنابراین می‌توانند به ویژگی‌هایی مانند هیدراتاسیون سمت مشتری تکیه کنند. از سوی دیگر، هر دو فریم ورک از پیش رندر HTML از سرور نیز پشتیبانی می کنند. بسته به پروژه ای که روی آن کار می کنیم، ممکن است بخواهیم تا جایی که ممکن است محتوا در سمت سرور تولید کنیم، از ارسال کد جاوا اسکریپت خودداری کنیم و داده ها را از مشتری دریافت کنیم.

تولید سایت استاتیک

از طرف دیگر، Next.js امکان پیش تولید صفحات و محتوای ثابت را در زمان ساخت، با استفاده از تولید سایت ایستا (SSG) ارائه می دهد، در حالی که Remix این کار را نمی کند. بسته به نوع صفحاتی که می‌خواهیم ایجاد کنیم، این ویژگی چیزی است که می‌تواند مزایای بزرگی را ارائه دهد. با SSG می‌توانیم داده‌ها را واکشی کنیم و صفحات را در زمان ساخت رندر کنیم، قبل از بازدید کاربران از وب‌سایت ما، صفحات ثابت داشته باشیم، بدون اینکه منتظر تولید محتوا باشیم.

اما SSG همچنین می تواند مشکل ساز شود: هر زمان که ما تغییراتی را در کد یا محتوای برنامه خود اعمال می کنیم، باید منتظر یک فرآیند ساخت برای تولید نسخه جدید دارایی های ثابت باشیم. این می تواند به یک نقطه دردناک تبدیل شود، زیرا اگر پروژه ما بزرگتر و بزرگتر شود، زمان ساخت افزایش می یابد. برای رسیدگی به این مشکل، تیم Next.js قابلیتی به نام توسعه داد بازسازی استاتیکی افزایشی (ISR)، و کاملاً جدید ISR درخواستی.

قدیمی در حالی که اعتبار مجدد

برای ارائه هرچه سریعتر محتوا، Remix بر روی آن تکیه دارد دستورالعمل ذخیره سازی stale-while-revalidate (SWR). به جای اینکه محتوای ایستا را از قبل تولید کند، زمانی که برنامه ترافیک دریافت می کند، حافظه پنهان را آماده می کند. صفحات و اسناد از حافظه پنهان ارائه می‌شوند، در حالی که در پس‌زمینه برای بازدیدکننده بعدی اعتبارسنجی مجدد می‌شوند.

Next.js همچنین امکان کار با stale-while-revalidate را ارائه می دهد. درون getServerSidePropsتابع، می توانید از stale-while-revalidate استفاده کنید هدرهای کنترل کش.

ناوبری سمت مشتری

یکی از ویژگی هایی که Next.js برای ارائه یک ناوبری روان به کاربران استفاده می کند این است از پیش واکشی. ما می توانیم استفاده کنیم <Link> کامپوننت برای ساختن وب سایت ما برای از پیش بارگذاری صفحه که <link> به زمانی که عنصر در viewport ظاهر می شود هدایت می شود. اگر از صفحه اصلی یک وب سایت بازدید کنیم و پیوند “تماس” را در صفحه مشاهده کنیم، Next.js محتوای مربوط به صفحه تماس را دانلود و واکشی می کند. بنابراین، وقتی روی لینک کلیک می کنیم، لازم نیست منتظر دانلود شدن صفحه باشیم.

اما یک محدودیت وجود دارد: Link​ کامپوننت فقط برای صفحاتی که از قبل با استفاده از تولید سایت ایستا (SSG) ساخته شده اند، واکشی اولیه ارائه می دهد. اگر پیوندهایی به صفحاتی داشته باشیم که به صورت پویا تولید می شوند، این ویژگی فعال نمی شود.

ریمیکس از HTML استفاده می کند <link rel="prefetch">​ برچسب (به جای کش مانند Next.js Link​ جزء)، بنابراین ما می توانیم نه تنها پیوندها، بلکه در واقع هر صفحه را از قبل واکشی کنیم. در صورتی که بخواهیم چیزی مشابه را با استفاده از Next.js پیاده سازی کنیم، ممکن است با استفاده از next/headجزء، و اضافه کردن prefetchبرچسب زدن

اول لبه

هنگامی که ما در حال واکشی داده ها و ارائه محتوا از سرور هستیم، همچنین باید ارزیابی کنیم که سروری که کد را از کاربران ارسال کننده درخواست های HTTP اجرا می کند چقدر فاصله دارد. اگر سرور اصلی من در برزیل واقع شده باشد و کاربری از چین از وب سایت من بازدید کند، اگر از همان صفحه از آرژانتین بازدید کنم، روند بارگذاری صفحه کندتر از من خواهد بود. این مربوط به فاصله جغرافیایی است که درخواست HTTP باید طی کند تا سرور نزدیک‌تر که آن را ارزیابی کرده و کد را اجرا می‌کند.

حتی اگر برنامه های مدرن برای ارائه محتوای ثابت به CDN ها متکی هستند، کد سمت سرور که برای تولید محتوای پویا پردازش می شود، عموماً در مرکز داده اجرا می شود و در یک مکان خاص اجرا می شود. راه‌حل برای این سناریو استفاده از دستورالعمل ذخیره‌سازی SWR است، با این اخطار که در نهایت محتوای قدیمی ارائه می‌شود در حالی که CDN منبع را تازه‌سازی می‌کند.

با در نظر گرفتن این موضوع، در سال های گذشته، مفهوم جدیدی به وجود آمد: محاسبات لبه. ایده این است که از همان رویکرد استفاده شده توسط CDN پیروی کنیم، منطق سرور را در سرورها و مکان‌های مختلف تکرار کنیم، و کد پویا را تا حد امکان نزدیک‌تر به کاربر اجرا کنیم. در حالی که Remix به عنوان “Edge First” تعریف می شود، به این معنی که تصور می شد این فریم ورک از همان ابتدا بر روی Edge اجرا شود، Vercel راه اندازی شد. توابع لبه به عنوان یک ویژگی اضافی برای برنامه مستقر در پلتفرم.

کد سمت سرور

هنگام تشریح ویژگی‌های اصلی Remix، گفتیم که چارچوب از روش‌های HTTP بومی برای مدیریت فرم‌ها با کمک استفاده می‌کند. action و loader کارکرد. یک فرم، یک سرور، یک POST درخواستی که داده های سریال فرم را به سرور منتقل می کند، یک اقدام سمت سرور، یک صفحه جدید در نتیجه درخواست ما. بازگشت به استانداردهای وب

ریمیکس فراهم می کند <Form> عنصر، یک نسخه بهینه از فرم HTML. با آن و action توابع، می‌توانیم کد کلاینت و کد سرور مربوط به مسیرهایمان را در یک فایل داشته باشیم. Remix می داند که چگونه رابط کاربری صفحات ما و رفتار سمت سرور متصل به درخواست ها را مدیریت کند. بدون زمینه، بدون مدیریت دولتی.

از سوی دیگر، Next.js به کد جاوا اسکریپت متکی است تا بداند چگونه وضعیت برنامه را مدیریت کند، API ها آن را فراخوانی می کنند، داده ها را مجدداً اعتبارسنجی می کنند و رابط صفحه وب را به روز می کنند. استفاده كردن مسیرهای API، می‌توانیم فایل‌های جداگانه‌ای داشته باشیم که عملکرد سمت سرور را اجرا می‌کنند و داده‌ها را به frontend ما برمی‌گردانند.

همانطور که گفتیم، و همانطور که می بینید، Remix راهی برای جهش داده ها دارد که سعی می کند به اصول اولیه بازگردد و آن روزهایی را به یاد می آورد که PHP چیز بزرگی بود.

وابستگی Node.js

همانطور که قبلاً گفتیم، Remix به جای وابستگی به Node.js بر اساس Web Fetch API است. این امکان را به ما می دهد که برنامه های Remix را نه تنها روی سرورهای Node.js (مانند Vercel یا Netlify)، بلکه در انواع دیگر پلتفرم ها (مانند Cloudflare Workers یا Deno Deploy) اجرا کنیم.

با آخرین نسخه Next.js، 12.2، اکنون می توانید به جای استفاده از زمان اجرا پیش فرض Node.js، Edge Runtime را برای کل پروژه Next.js خود انتخاب کنید.

نتیجه

Remix چندی پیش به منبع باز تبدیل شد، اما در حال حاضر جامعه بسیار فعالی دارد که با استانداردهای وب همکاری می کنند و پروژه هایی ایجاد می کنند. این چارچوب آینده امیدوار کننده ای دارد. بیایید ببینیم که چگونه تکامل می‌یابد، کدام ویژگی‌ها اضافه می‌شوند، کدام پروژه‌های مرتبط برای بهبود تجربه توسعه‌دهنده ایجاد می‌شوند، و کدام سناریوهای دیگر را می‌کوشد حل کند.

مطالعه بیشتر در مجله Smashing

سرمقاله Smashing
(nl, il)