رها کردن تمام قدرت Middleware با Enterspeed ⚡

برای سال‌ها، میان‌افزار نقش مهمی در توسعه وب داشته است. برنامه‌ها را قادر می‌سازد تا برای برآورده کردن خواسته‌های کاربر به‌طور روان و مؤثر عمل کنند.

این به عنوان پلی بین UI (frontend) و خدمات باطن عمل می کند و وظایفی مانند احراز هویت، مسیریابی و پردازش داده را انجام می دهد.

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

خوشبختانه، فریم‌ورک‌هایی مانند Next.js در مورد نوآوری‌هایی که با میان‌افزار امکان‌پذیر است و استفاده از آن آسان‌تر است، مشکل را تغییر داده‌اند. به عنوان مثال، آنها کار کردن با توابع Edge را بسیار آسان کرده اند و امکان شخصی سازی محتوا بر اساس موقعیت جغرافیایی کاربر را فراهم می کنند.

💡 تابع لبه یک تابع بدون سرور است که در لبه اجرا می شود. اگر می‌خواهید در مورد آن بیشتر بدانید، «درک توابع لبه: لبه و فراتر» Netlify را بررسی کنید.

اما به همان اندازه که این نوآوری ها باورنکردنی هستند، ما هنوز با چالش هایی در رابطه با میان افزارها روبرو هستیم. از آنجایی که حدس زدید در وسط قرار دارد، ما این خطر را داریم که میان افزار به گلوگاه تبدیل شود و سایت را کندتر کند و به تجربه کاربر آسیب برساند.

خطر برای سایت های کوچک و ساده زیاد نیست، اما با بزرگتر و پیچیده شدن سایت ها، خطر ایجاد گلوگاه افزایش می یابد.

خوشبختانه، راه‌حل‌های عالی وجود دارد که برای رفع این چالش‌ها طراحی شده‌اند. آیا می توانید نام یکی از این راه حل ها را حدس بزنید؟

درست است. همه چیز داره پیش میاد، میلهاوس! منظورم Enterspeed است (با عرض پوزش).

Enterspeed به شما اجازه می دهد تا تمام قدرت میان افزار خود را آزاد کنید. با عمل به عنوان یک شتاب دهنده میان افزار، می تواند عملکرد برنامه شما را با کاهش تأخیر و همچنین بار سرور بهینه کند.

اما ابتدا، بیایید ببینیم میان افزار دقیقا چیست و چه کاری می تواند انجام دهد.

میان افزار چیست؟

انواع مختلفی از میان افزار وجود دارد که هر کدام مورد استفاده خاص خود را دارند. نوع میان افزاری که در این مقاله روی آن تمرکز خواهیم کرد، میان افزار کاربردی است.

میان‌افزار لایه‌ای از نرم‌افزار است که بین UI و خدمات باطن قرار می‌گیرد. این به عنوان یک واسطه عمل می کند، که به رابط کاربری و خدمات باطن اجازه می دهد تا به طور یکپارچه با یکدیگر ارتباط برقرار کرده و تبادل کنند.

مفهوم میان افزار چیز جدیدی نیست – از سال 1968 وجود داشته است.

همانطور که از نام ممکن است نشان دهد، وظایف خاصی را در داخل برنامه انجام می دهد، مانند واکشی داده ها، احراز هویت، رسیدگی به درخواست/پاسخ و غیره.

یک مثال می تواند کاربری باشد که سعی می کند به صفحه ای دسترسی پیدا کند که نیاز به احراز هویت دارد – به عنوان مثال مقاله ای در پشت دیوار پرداخت.

کاربر (مشتری) یک درخواست HTTP برای URL (به عنوان مثال nnytimes.com/hero-robot-rescues-valuable-money). قبل از بازگرداندن مقاله، یک میان افزار وارد می شود.

میان افزار بررسی می کند که آیا کاربر وارد سیستم شده است یا خیر. در غیر این صورت، کاربر را به /sign-in هدایت می کند، در غیر این صورت به مقاله ادامه می دهد.

احراز هویت اغلب با استفاده از JWT (JSON Web Token) انجام می‌شود، که می‌تواند شامل جزئیاتی مانند نقش کاربر (مثلاً مشترک، مشترک برتر، مشترک فوق‌العاده دوپر، فوق‌العاده ممتاز) باشد.

سایر موارد استفاده میان افزار می تواند به شرح زیر باشد:

• واکشی داده ها
• تجزیه و تحلیل
• تست A/B
• پرچم های ویژه
• مسدود کردن IP
• تشخیص ربات
• شخصی سازی با موقعیت جغرافیایی
• ترجمه بر اساس موقعیت جغرافیایی
• استراتژی های قیمت گذاری برابری توان
• رندر مبتنی بر عامل استفاده
• رسیدگی به کوکی ها
• تغییر مسیرها
• حذف پارامترهای پرس و جو
• حالت تعمیر و نگهداری

همانطور که می بینید، موارد استفاده زیادی برای انتخاب وجود دارد.

در مرحله بعد، نحوه استفاده از Enterspeed را به عنوان یک شتاب دهنده میان افزار بررسی خواهیم کرد.

سرعت بخشیدن به میان افزار خود با Enterspeed

وقتی به وب‌سایت‌هایی با عملکرد کند نگاه می‌کنیم، اغلب می‌بینیم که گلوگاه‌هایی در حین واکشی داده‌ها رخ می‌دهد.

دلایل آن می تواند چیزهای زیادی باشد، به عنوان مثال:

1. محل قرارگیری سرور: منبع داده بسیار دور از مشتری قرار دارد.
2. منابع سرور: ممکن است سرور منابع لازم برای مدیریت میزان ترافیک را نداشته باشد.
3. تعادل بار ضعیف: سرور ممکن است راه خوبی برای توزیع صحیح ترافیک نداشته باشد.
4. پیچیدگی پرس و جو: پرس و جوهای موجود در پایگاه داده ممکن است پیچیده باشند و در نتیجه زمان اجرا طولانی تر شود.
5. تکه تکه شدن داده ها: داده ها ممکن است در مکان های متعدد (مانند PIM، راه حل های تجاری، CMS و غیره) ذخیره شوند.

این لیست میتواند ادامه داشته باشد. همه چیز به نحوه طراحی و معماری شما بستگی دارد.

بنابراین چگونه Enterspeed می تواند به جلوگیری از این نوع تنگناها کمک کند؟ ما در آخرین مقاله خود به این موضوع اشاره کردیم، “همه آنچه (احتمالا) باید در مورد ذخیره سازی در وب بدانید”، اما به طور خلاصه:

Enterspeed به شما کمک می کند تا داده های خود را تخلیه کنید، که می توانید آنها را با چندین منبع داده ترکیب کنید (و همچنین تبدیل کنید) در کش Redis (ذخیره سازی در حافظه). این اساسا سرور شما را جدا می کند و همچنین محتوای پویا شما را ثابت می کند.

بنابراین بیایید ببینیم که چگونه یک راه‌اندازی Enterspeed می‌تواند تنگناهایی را که در بالا نگاه کردیم را حل کند.

برای قرار دادن سرور، Enterspeed پشتیبانی چند منطقه ای را در سطح جهانی ارائه می دهد. علاوه بر این، کل راه حل ما بر روی سرویس های ابری Azure ساخته شده است که به طور خودکار مقیاس بندی و توزیع ترافیک را مدیریت می کند.

همه پیچیدگی‌های پرس و جو و تقسیم‌بندی داده‌ها حذف می‌شوند زیرا ما داده‌های کاربر را در نماهای ثابت ترکیب می‌کنیم، که به‌محض به‌روزرسانی داده‌ها به‌طور خودکار بازسازی می‌شوند.

این به پایان فروش امروز است. اکنون بیایید در واقع سعی کنیم میان افزاری را بسازیم که از Enterspeed API واکشی می شود. در این مثال، از Next.js و Netlify استفاده خواهیم کرد.

راه اندازی میان افزار در Next.js با Netlify

برای استفاده از تمام قدرت میان افزار خود، از Netlify’s Next.js Runtime استفاده می کنیم که به ما امکان می دهد محتوا را در لبه بازنویسی و تبدیل کنیم.

یکی دیگر از ویژگی های دیوانه کننده قدرتمند آن، توانایی آن در تبدیل کردن صفحات در حین پرواز است که در مثال های زیر از آن استفاده خواهیم کرد.

برای شروع، مطمئن شوید که آخرین نسخه Netlify CLI (و یک حساب Netlify) را دارید. Netlify CLI به ما اجازه می دهد تا از منطق لبه برای هدرها و تغییر مسیرهای سفارشی، متغیرهای محیطی و توابع Netlify در ماشین محلی خود استفاده کنیم.

سپس، یک پروژه Next.js جدید را بچرخانید و بسته @netlify/next را نصب کنید، که به ما امکان می دهد از توابع لبه Netlify در میان افزار خود استفاده کنیم.

یک فایل Middleware.js (یا .ts) ایجاد کنید و آن را در پوشه root/src خود قرار دهید (همان سطح پوشه pages). این فایل در هر درخواستی از جمله فایل های ثابت، صفحات، دارایی ها و غیره اجرا می شود.

💡 مثال زیر بر اساس مقاله درخشان “Rewrite HTML and transform page props in Next.js with Next.js Advanced Middleware” توسط Salma Alam-Naylor است. برای یک آموزش عمیق تر از نحوه عملکرد میان افزار پیشرفته Next.js در Netlify، آن را بررسی کنید.

یک تابع async به نام Middleware را صادر کنید و درخواست را به عنوان nextRequest به تابع ارسال کنید.

{ NextResponse} را از «next/server» و { MiddlewareRequest } را از «@netlify/next» وارد کنید.

سپس ثابت های زیر را اعلام کنید:

• const pathname = nextRequest.nextUrl.pathname; (نام مسیر را از درخواست دریافت می کنیم)
• const middlewareRequest = new MiddlewareRequest(nextRequest); (ما یک Netlify MiddlewareRequest جدید را راه اندازی می کنیم که در nextRequest ارسال می شود)
• const answer = await MiddlewareRequest.next(); (ما پاسخ بعدی را در زنجیره HTTP با انتظار MiddlewareRequest.next()) دریافت می کنیم.

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

💡 این را می توان با استفاده از matcher در شیء پیکربندی نیز انجام داد. با این حال، به نظر می رسید که در این مورد و میان افزار Netlify مشکلاتی وجود دارد.

پس از آن، ما محتوای واقعی را از Enterspeed با استفاده از Delivery API دریافت می کنیم. ما یک تابع کمکی به نام getByUrl ساخته‌ایم که به سادگی با استفاده از URL به عنوان پارامتر پرس و جو از API واکشی می‌شود.

داده هایی که ما از Enterspeed دریافت می کنیم بر اساس طرحی است که ما طراحی کرده ایم. داده ها همچنین شامل یک وضعیت (200، 301، 404، و غیره) و یک ویژگی تغییر مسیر هستند که می تواند شامل مسیری باشد که محتوا به آنجا منتقل شده است.

اگر وضعیت 301 را دریافت کنیم، به URL ارائه شده در ویژگی redirect هدایت می‌شویم. اگر وضعیت 404 را دریافت کنیم، یک پاسخ 404 می دهیم.

با این حال، اگر همه چیز خوب پیش برود، داده‌ها را از Enterspeed با استفاده از answer.SetPageProp ارسال می‌کنیم، که داده‌ها را به عنوان props در صفحات ما در دسترس قرار می‌دهد و پس از آن پاسخ را برمی‌گردانیم.

💡 برای ساده نگه داشتن مثال، به سادگی به این سه کد وضعیت نگاه می کنیم. برای برنامه های دنیای واقعی، باید تمام استثناهای ممکن را مدیریت کنید.

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

اکنون احتمالاً به این فکر می‌کنید که «حق بیمه» بولی چیست؟ خوشحالم که پرسیدی!

فرض کنید محتوایی با دیوار پرداخت داریم که خواندن آن به اشتراک نیاز دارد. سپس باید بررسی کنیم که آیا کاربر قبل از دسترسی به آن حساب دارد یا خیر. این کار را می توان با استفاده از JWT (JSON Web Token) انجام داد.

با پیاده‌سازی احراز هویت در میان‌افزار، می‌توانیم کاربران را قبل از رسیدن به هر نقطه پایانی احراز هویت کنیم – حتی می‌توانیم آن را درست در لبه انجام دهیم. می توانید قالب Vercels JWT Authentication را در اینجا بررسی کنید.

هنگامی که احراز هویت اضافه شد، می‌توانیم یک تابع ساده بررسی کنیم که آیا آنها به سیستم وارد شده‌اند و آیا ویژگی Premium درست است یا خیر.

اگر وارد نشده باشند و ویژگی Premium درست باشد، کاربر به صفحه ورود هدایت می شود.

💡 همانطور که قبلا ذکر شد، می توانیم داده هایی مانند نقش کاربر را در توکن ذخیره کنیم که می تواند در منطق بالا پیاده سازی شود.

جالب است، اما اگر همچنان بخواهیم کاربر بتواند به یک صفحه دسترسی داشته باشد اما تمام اطلاعات آن را مشاهده نکند، چه؟ به عنوان مثال، یک وب سایت B2B که فقط قیمت ها را به مشتریان فعلی خود نشان می دهد.

داده ها می تواند چیزی شبیه به این باشد، جایی که ما می خواهیم قیمت را پنهان کنیم.

سپس ما به سادگی ویژگی قیمت را قبل از تنظیم صفحات صفحه تغییر می دهیم. می‌توانیم آن را حذف کنیم یا مقدار آن را تغییر دهیم، مانند مثال زیر.

آه، متوجه شدی، نه؟ یک بار دیگر، با چهره‌ای متحیر نشسته‌ای و به این فکر می‌کنی که “دیکنز دارایی ppp چیست؟”

و درست مثل ماهی قزل آلا گرسنه ای که در رودخانه شفاف شنا می کند، طعمه مرا گرفتی 🎣

به کنار نامگذاری ضعیف، بیایید ببینیم چگونه می توانیم قیمت ها را بر اساس موقعیت جغرافیایی تغییر دهیم.

اما چرا قیمت ها را بر اساس موقعیت جغرافیایی تغییر دهید؟ پاسخ، استراتژی برابری قدرت خرید (PPP) است.

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

داده ها می تواند چیزی شبیه به این باشد.

در اینجا ما قیمت های متفاوتی برای “DK” (دانمارک)، “US” (ایالات متحده آمریکا) و “UK” (بریتانیا) داریم.

در میان‌افزار ما، از طریق nextRequest به داده‌های جغرافیایی بازدیدکننده دسترسی داریم.

سپس می‌توانیم قیمت خود را بسته به کشور بازدیدکننده، با منطقی ساده تغییر دهیم. ابتدا بررسی می کنیم که آیا ppp-property درست است یا خیر، و سپس آن را به قیمت کشور خاص تغییر می دهیم.

اگر قیمتی برای کشور کاربر نداشته باشیم، از “US” به عنوان جایگزین استفاده می کنیم.

چقدر باحاله!

بستن افکار

ممکن است روی صندلی خود نشسته باشید، انگشتانتان دراز شده، فریاد بزنید: «قدرت نامحدود!» به افکار همه امکانات میان افزار.

عالیه! هدف از این مقاله این بود که به شما نشان دهیم چگونه می توانید از میان افزار برای برنامه خود به روشی سازگار با عملکرد با استفاده از Enterspeed استفاده کنید.

شما می توانید موارد استفاده دیگر برای میان افزار را در کتابخانه قالب Vercels مشاهده کنید.

سوال اینجاست که آیا باید از میان افزار استفاده کرد؟ برای نقل قول از همه توسعه دهندگان نرم افزار در این سیاره:

_”… بستگی داره”.
_
هزار راه برای پوست گربه وجود دارد. آنچه برای تنظیم شما منطقی است ممکن است برای دیگران منطقی نباشد.

به سادگی واکشی داده ها و دستکاری props را می توان با استفاده از getServerSideProps نیز انجام داد، همین امر در مورد بررسی احراز هویت نیز صدق می کند.

با این حال، کاری که میان‌افزار می‌تواند انجام دهد، در این مورد، میان‌افزار لبه، شخصی‌سازی محتوا با تأخیر بسیار کم است، زیرا روی لبه اجرا می‌شود.

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