استراتژی های ذخیره سازی پیشرفته با ارائه سمت سرور در Next.js

رندر سمت سرور (SSR) در Next.js اطمینان می دهد که کاربران یک صفحه کاملاً ارائه شده را به سرعت دریافت می کنند ، اما در صورت عدم مدیریت صحیح می تواند تجارت عملکرد را معرفی کند. در این مقاله ، ما استراتژی های ذخیره سازی را که باعث افزایش عملکرد می شود بدون قربانی کردن طراوت داده ها ، بررسی خواهیم کرد.

1. درک SSR در Next.js

next.js از SSR از طریق پشتیبانی می کند getServerSideProps، که با هر درخواست اجرا می شود. این برای داده های پویا بسیار عالی است ، اما می تواند با بار سنگین به یک تنگنا تبدیل شود.

export async function getServerSideProps(context) {
  const res = await fetch('https://api.example.com/data');
  const data = await res.json();

  return { props: { data } };
}

2. در صورت امکان از بازسازی استاتیک افزایشی (ISR) استفاده کنید

اگر داده ها در هر درخواست تغییر نمی کنند ، ISR را انتخاب کنید:

export async function getStaticProps() {
  const res = await fetch('https://api.example.com/data');
  const data = await res.json();

  return {
    props: { data },
    revalidate: 60, // Revalidate every 60 seconds
  };
}

این در خدمت صفحات استاتیک است و آنها را در پس زمینه پس از دوره تجدید نظر احیا می کند.

3. ذخیره سازی CDN را با هدرها اجرا کنید

هدرهای حافظه نهان را مستقیماً در API SSR یا Middleware خود تنظیم کنید تا CDN ها را چگونه پاسخ دهید:

res.setHeader('Cache-Control', 'public, s-maxage=60, stale-while-revalidate=30');

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

4. از توابع لبه برای کاهش تأخیر جهانی استفاده کنید

با استفاده از میان افزار Next.JS و سیستم عامل هایی مانند Vercel ، می توانید از طریق توابع Edge ، قوانین منطق و حافظه پنهان را به کاربران نزدیکتر کنید و زمان آن را به بایت اول بهبود بخشید (TTFB).

export const config = {
  runtime: 'edge',
};

export default async function middleware(req) {
  // Logic here
}

5. پاسخ های Cache API به صورت دستی

برای API های شخص ثالث یا نقاط پایانی SSR سفارشی ، پاسخ های حافظه پنهان در حافظه (با ذخیره های LRU) ، Redis یا Caches Edge برای جلوگیری از واکشی های اضافی.

import LRU from 'lru-cache';

const cache = new LRU({ max: 100, ttl: 1000 * 60 });

export async function getServerSideProps() {
  const cached = cache.get('key');
  if (cached) return { props: { data: cached } };

  const res = await fetch('https://api.example.com/data');
  const data = await res.json();
  cache.set('key', data);

  return { props: { data } };
}

پایان

ترکیب SSR با حافظه پنهان هوشمند می تواند بهترین های هر دو جهان را به شما بدهد: داده های پویا و عملکرد سریع و سریع. در صورت امکان از ISR استفاده کنید ، هدرهای CDN برای ذخیره سازی عمومی و Edge Middleware برای بهبود عملکرد جهانی.

اگر این پست به شما کمک کرد ، از من حمایت کنید: buymeacoffee.com/hexshift