رفع بی نهایت حلقه تغییر مسیر در برنامه های SvelteKit

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

بعد از مدتی بالاخره توانستم موضوع را بازتولید کنم. به نظر می رسد که این اتفاق پس از استقرار یک نسخه جدید از برنامه خود رخ می دهد در حالی که یک کاربر نسخه قدیمی را در مرورگر خود باز می کند.

وقتی نسخه جدیدی را اجرا می کنید، همه مسیرهای دارایی شما (CSS و جاوا اسکریپت) به دلیل نحوه کار Vite و Rollup تغییر می کند. نام فایل دارایی های همراه دارای یک هش منحصر به فرد در نام خود است که محتوای فایل را نشان می دهد.

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

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

این زمانی اتفاق می افتد که ما هیچ هدر کش را از برنامه خود به مرورگر منتقل نمی کنیم. مرورگر زمان دلخواه را برای ذخیره محتوای ما انتخاب می کند. این معمولاً رفتار مطلوبی نیست.

راه حل

ما باید یک صراحت تعیین کنیم no-cache هدر برای پاسخ به فایل های HTML که از برنامه شما می آیند. شما می توانید این کار را برای اکثر آداپتورها در داخل انجام دهید hooks.server.ts با استفاده از این کد:

import type { Handle } from '@sveltejs/kit';

export const handle = (async ({ event, resolve }) => {
  const response = await resolve(event);
  response.headers.set('cache-control', 'no-cache');
  return response;
}) satisfies Handle;

علاوه بر این، ما همچنین باید مطمئن شویم که ما +layout.ts که در src/routes فایل حاوی خط زیر است:

export const prerender = false;

این به این دلیل است که SvelteKit به طور پیش‌فرض سعی می‌کند مسیرها را از قبل اجرا کند و اگر از قبل اجرا شوند، کاملا ثابت در نظر گرفته می‌شوند و حتی از طریق ما اجرا نمی‌شوند. hooks.server.ts منطق! این رفتار مستند اما تا حدودی عجیب در زمینه است adapter-node.