خواندن ۱ دقیقه·۳ ماه پیش

Edge-Side Includes (ESI)

تو بحث میکروفرانت اند برای طراحی این معماری، بخشی داشتیم تحت عنوان پیاده سازی لایه Composition:

این لایه میتونه به دو صورت Client Side و Server Side طراحی شود.

گفتیم برای طراحی Server Side باید از تکنیک ESI استفاده کنیم.

حالا این تکنیک چی و چطوری باید اینکار رو انجام بدیم؟

نحوه کار ESI:

این تکنیک به سرورها و کش‌های محتوا (Content Delivery Networks - CDNs) این امکان را می‌دهد که صفحات وب را به قطعات کوچکتر تقسیم کنند و به صورت جداگانه کش کنند.
این تکنیک به شما اجازه می‌دهد تا بخش‌های مختلف صفحه را به طور مستقل بارگذاری کنید و تغییرات داینامیک را به صورت سریع و مستقل از بخش‌های ثابت نمایش دهید.

مثال عملی:

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

<!DOCTYPE html>

<html>

<head>

  <title>News Website</title>

</head>

<body>

  <!-- ESI Include for search bar -->

  <!--esi

    <esi:include src=&quot/includes/search-bar.html&quot />

-->

  <!-- ESI Include for hot news -->

  <!--esi

    <esi:include src=&quot/includes/hot-news.html&quot />

-->

  <!-- ESI Include for footer -->

  <!--esi

    <esi:include src=&quot/includes/footer.html&quot />

-->

</body>

</html>

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

البته توجه کنید این کار نیاز به پیکربندی CDN دارد.

امیدوارم این مقاله براتون مفید واقع بشه :)

سمانه باسمه چی

شاید از این پست‌ها خوشتان بیاید