My السابقة آخر كانت نظرة عامة واسعة على SvelteKit حيث رأينا كم هي أداة رائعة لتطوير الويب. ستنهي هذه المشاركة ما فعلناه هناك وتتعمق في الموضوع المفضل لكل مطور: التخزين المؤقت. لذا ، تأكد من إعطاء آخر مشاركة لي قراءة إذا لم تكن قد قمت بذلك بالفعل. رمز هذا المنشور متاح على جيثب، طالما عرض حي.
هذا المنشور هو كل شيء عن معالجة البيانات. سنضيف بعض وظائف البحث البدائية التي من شأنها تعديل سلسلة استعلام الصفحة (باستخدام ميزات SvelteKit المضمنة) ، وإعادة تشغيل أداة تحميل الصفحة. ولكن بدلاً من مجرد إعادة الاستعلام عن قاعدة البيانات (التخيلية) الخاصة بنا ، سنضيف بعض التخزين المؤقت ، لذا فإن إعادة البحث عن عمليات البحث السابقة (أو باستخدام زر الرجوع) ستعرض البيانات التي تم استردادها مسبقًا ، بسرعة ، من ذاكرة التخزين المؤقت. سننظر في كيفية التحكم في طول الوقت الذي تظل فيه البيانات المخزنة مؤقتًا صالحة ، والأهم من ذلك ، كيفية إبطال جميع القيم المخزنة مؤقتًا يدويًا. بينما نتحدث عن الكيكة ، سننظر في كيفية تحديث البيانات يدويًا على الشاشة الحالية ، من جانب العميل ، بعد حدوث طفرة ، مع الاستمرار في تطهير ذاكرة التخزين المؤقت.
سيكون هذا المنشور أطول وأكثر صعوبة من معظم ما أكتبه عادةً لأننا نغطي موضوعات أصعب. سيوضح لك هذا المنشور بشكل أساسي كيفية تنفيذ الميزات المشتركة لأدوات البيانات الشائعة مثل رد فعل الاستعلام؛ ولكن بدلاً من سحب مكتبة خارجية ، سنستخدم فقط نظام الويب الأساسي وميزات SvelteKit.
لسوء الحظ ، فإن ميزات نظام الويب الأساسي هي مستوى أقل قليلاً ، لذلك سنقوم بعمل أكثر قليلاً مما كنت معتادًا عليه. الجانب الإيجابي هو أننا لن نحتاج إلى أي مكتبات خارجية ، مما سيساعد في الحفاظ على أحجام الحزم صغيرة وصغيرة. من فضلك لا تستخدم الأساليب التي سأعرضها لك إلا إذا كان لديك سبب وجيه لذلك. من السهل أن يحدث خطأ في التخزين المؤقت ، وكما سترى ، هناك القليل من التعقيد الذي سينتج عنه رمز التطبيق الخاص بك. نأمل أن يكون متجر البيانات الخاص بك سريعًا ، وواجهة المستخدم الخاصة بك على ما يرام مما يسمح لـ SvelteKit دائمًا بطلب البيانات التي يحتاجها لأي صفحة معينة. إذا كان الأمر كذلك ، اتركه وشأنه. استمتع بالبساطة. لكن هذا المنشور سيُظهر لك بعض الحيل عندما يتوقف ذلك.
الحديث عن رد فعل الاستعلام ، ذلك تم إطلاق سراحه للتو ل Svelte! لذلك إذا وجدت نفسك تعتمد على تقنيات التخزين المؤقت اليدوي كثير، تأكد من التحقق من هذا المشروع ، ومعرفة ما إذا كان قد يساعدك.
اعداد
قبل أن نبدأ ، دعنا نجري بعض التغييرات الصغيرة على الكود الذي كان لدينا من قبل. سيعطينا هذا عذرًا لرؤية بعض ميزات SvelteKit الأخرى ، والأهم من ذلك ، إعدادنا لتحقيق النجاح.
أولاً ، دعنا ننقل تحميل بياناتنا من مُحملنا إلى +page.server.js إلى مسار API. سنقوم بإنشاء ملف +server.js ملف في routes/api/todos، ثم قم بإضافة ملف GET وظيفة. هذا يعني أننا سنتمكن الآن من جلب (باستخدام فعل GET الافتراضي) إلى ملف /api/todos طريق. سنقوم بإضافة نفس كود تحميل البيانات كما كان من قبل.
import { json } from "@sveltejs/kit";
import { getTodos } from "$lib/data/todoData"; export async function GET({ url, setHeaders, request }) { const search = url.searchParams.get("search") || ""; const todos = await getTodos(search); return json(todos);
}بعد ذلك ، لنأخذ أداة تحميل الصفحات التي لدينا ، ونعيد تسمية الملف من +page.server.js إلى +page.js (أو .ts إذا قمت بتدعيم مشروعك لاستخدام TypeScript). هذا يغير اللودر الخاص بنا ليكون محمل "عالمي" بدلاً من محمل خادم. مستندات SvelteKit شرح الفرق، ولكن يتم تشغيل أداة التحميل العامة على كل من الخادم والعميل أيضًا. ميزة واحدة بالنسبة لنا هي أن fetch سيتم تشغيل الاتصال بنقطة النهاية الجديدة مباشرة من متصفحنا (بعد التحميل الأولي) ، باستخدام المتصفح الأصلي fetch وظيفة. سنضيف التخزين المؤقت القياسي لـ HTTP قليلاً ، ولكن في الوقت الحالي ، كل ما سنفعله هو استدعاء نقطة النهاية.
export async function load({ fetch, url, setHeaders }) { const search = url.searchParams.get("search") || ""; const resp = await fetch(`/api/todos?search=${encodeURIComponent(search)}`); const todos = await resp.json(); return { todos, };
}الآن دعنا نضيف صيغة بسيطة إلى /list الصفحة:
<div class="search-form"> <form action="/ar/list"> <label>Search</label> <input autofocus name="search" /> </form>
</div>نعم ، يمكن أن تستهدف النماذج برامج تحميل الصفحات العادية مباشرةً. الآن يمكننا إضافة مصطلح بحث في مربع البحث ، اضغط على أدخل، وسيتم إلحاق مصطلح "بحث" بسلسلة استعلام عنوان URL ، والتي ستعيد تشغيل أداة التحميل الخاصة بنا والبحث في عناصر المهام الخاصة بنا.
دعونا أيضًا نزيد التأخير في todoData.js ملف في /lib/data. هذا سيجعل من السهل معرفة متى يتم تخزين البيانات ولا يتم تخزينها مؤقتًا أثناء عملنا من خلال هذا المنشور.
export const wait = async amount => new Promise(res => setTimeout(res, amount ?? 500));تذكر أن الكود الكامل لهذا المنشور هو كل ذلك على جيثب، إذا كنت بحاجة إلى الرجوع إليه.
التخزين المؤقت الأساسي
لنبدأ بإضافة بعض التخزين المؤقت إلى ملف /api/todos نقطة النهاية. سنعود إلى ملف +server.js ملف وإضافة رأسنا الأول للتحكم في ذاكرة التخزين المؤقت.
setHeaders({ "cache-control": "max-age=60",
});... والتي ستجعل الوظيفة بأكملها تبدو كما يلي:
export async function GET({ url, setHeaders, request }) { const search = url.searchParams.get("search") || ""; setHeaders({ "cache-control": "max-age=60", }); const todos = await getTodos(search); return json(todos);
}سننظر قريبًا في الإبطال اليدوي ، ولكن كل ما تقوله هذه الوظيفة هو تخزين استدعاءات واجهة برمجة التطبيقات مؤقتًا لمدة 60 ثانية. اضبط هذا على ما تريد، واعتمادًا على حالة الاستخدام الخاصة بك ، stale-while-revalidate قد يكون من المفيد أيضًا البحث فيه.
ومثل هذا ، فإن استفساراتنا يتم تخزينها مؤقتًا.
ملاحظات تأكد أنك إلغاء الاختيار مربع الاختيار الذي يعطل التخزين المؤقت في أدوات التطوير.
تذكر ، إذا كان التنقل الأولي في التطبيق هو صفحة القائمة ، فسيتم تخزين نتائج البحث مؤقتًا داخليًا في SvelteKit ، لذلك لا تتوقع رؤية أي شيء في DevTools عند العودة إلى هذا البحث.
ما هو مخبأ وأين
أول تحميل من تطبيقنا يعرضه الخادم (بافتراض أننا نبدأ من /list page) على الخادم. سيقوم SvelteKit بتسلسل هذه البيانات وإرسالها إلى عميلنا. ما هو أكثر من ذلك ، سوف يلاحظ Cache-Control رأس على الاستجابة ، وسيعرف استخدام هذه البيانات المخزنة مؤقتًا لاستدعاء نقطة النهاية هذه داخل نافذة ذاكرة التخزين المؤقت (التي قمنا بتعيينها على 60 ثانية في وضع المثال).
بعد هذا التحميل الأولي ، عند بدء البحث على الصفحة ، من المفترض أن ترى طلبات الشبكة من المستعرض الخاص بك إلى ملف /api/todos قائمة. أثناء البحث عن الأشياء التي بحثت عنها بالفعل (خلال الـ 60 ثانية الماضية) ، يجب أن يتم تحميل الردود فورًا نظرًا لأنها مخزنة مؤقتًا.
ما هو رائع بشكل خاص في هذا الأسلوب هو أنه نظرًا لأن هذا هو التخزين المؤقت عبر التخزين المؤقت الأصلي للمتصفح ، يمكن لهذه المكالمات (اعتمادًا على كيفية إدارتك لخرق ذاكرة التخزين المؤقت التي سننظر إليها) الاستمرار في التخزين المؤقت حتى إذا قمت بإعادة تحميل الصفحة (على عكس التحميل الأولي من جانب الخادم ، والذي يستدعي دائمًا نقطة النهاية جديدة ، حتى لو تم ذلك خلال 60 ثانية الماضية).
من الواضح أن البيانات يمكن أن تتغير في أي وقت ، لذلك نحن بحاجة إلى طريقة لإزالة ذاكرة التخزين المؤقت يدويًا ، والتي سننظر فيها بعد ذلك.
إبطال ذاكرة التخزين المؤقت
الآن ، سيتم تخزين البيانات مؤقتًا لمدة 60 ثانية. بغض النظر عن أي شيء ، بعد دقيقة ، سيتم سحب بيانات جديدة من مخزن البيانات الخاص بنا. قد ترغب في فترة زمنية أقصر أو أطول ، ولكن ماذا يحدث إذا قمت بتغيير بعض البيانات وأردت مسح ذاكرة التخزين المؤقت على الفور حتى يكون استعلامك التالي محدثًا؟ سنحل هذه المشكلة عن طريق إضافة قيمة مخالفة للاستعلام إلى عنوان URL الذي نرسله إلى موقعنا الجديد /todos نقطة النهاية.
دعنا نخزن قيمة خرق ذاكرة التخزين المؤقت هذه في ملف تعريف ارتباط. يمكن تعيين هذه القيمة على الخادم ولكن لا يزال من الممكن قراءتها على العميل. لنلقِ نظرة على بعض نماذج التعليمات البرمجية.
يمكننا إنشاء ملف +layout.server.js الملف في جذر ملف routes مجلد. سيتم تشغيل هذا عند بدء تشغيل التطبيق ، وهو مكان مثالي لتعيين قيمة ملف تعريف الارتباط الأولية.
export function load({ cookies, isDataRequest }) { const initialRequest = !isDataRequest; const cacheValue = initialRequest ? +new Date() : cookies.get("todos-cache"); if (initialRequest) { cookies.set("todos-cache", cacheValue, { path: "/", httpOnly: false }); } return { todosCacheBust: cacheValue, };
}ربما لاحظت ملف isDataRequest القيمة. تذكر أن التخطيطات ستعيد تشغيلها في أي وقت يستدعي فيه رمز العميل invalidate()، أو في أي وقت نقوم بتشغيل إجراء الخادم (على افتراض أننا لا نوقف السلوك الافتراضي). isDataRequest يشير إلى عمليات إعادة التشغيل هذه ، ولذا فإننا نقوم بتعيين ملف تعريف الارتباط فقط إذا كان ذلك false؛ خلاف ذلك ، نرسل على طول ما هو موجود بالفعل.
• httpOnly: false العلم مهم أيضًا. يسمح هذا لكود العميل الخاص بنا بقراءة قيم ملفات تعريف الارتباط هذه بتنسيق document.cookie. قد يكون هذا عادةً مصدر قلق أمني ، ولكن في حالتنا هذه أرقام لا معنى لها تسمح لنا بالتخزين المؤقت أو إفساد ذاكرة التخزين المؤقت.
قراءة قيم ذاكرة التخزين المؤقت
محملنا العالمي هو ما يطلق عليه /todos نقطة النهاية. يعمل هذا على الخادم أو العميل ، ونحتاج إلى قراءة قيمة ذاكرة التخزين المؤقت التي أنشأناها للتو بغض النظر عن مكان وجودنا. من السهل نسبيًا إذا كنا على الخادم: يمكننا الاتصال await parent() للحصول على البيانات من التخطيطات الأصل. لكن بالنسبة للعميل ، سنحتاج إلى استخدام بعض الشفرات الإجمالية للتحليل document.cookie:
export function getCookieLookup() { if (typeof document !== "object") { return {}; } return document.cookie.split("; ").reduce((lookup, v) => { const parts = v.split("="); lookup[parts[0]] = parts[1]; return lookup; }, {});
} const getCurrentCookieValue = name => { const cookies = getCookieLookup(); return cookies[name] ?? "";
};لحسن الحظ ، نحتاجه مرة واحدة فقط.
إرسال قيمة ذاكرة التخزين المؤقت
لكننا الآن بحاجة إلى ذلك إرسال هذه القيمة لدينا /todos نقطة النهاية.
import { getCurrentCookieValue } from "$lib/util/cookieUtils"; export async function load({ fetch, parent, url, setHeaders }) { const parentData = await parent(); const cacheBust = getCurrentCookieValue("todos-cache") || parentData.todosCacheBust; const search = url.searchParams.get("search") || ""; const resp = await fetch(`/api/todos?search=${encodeURIComponent(search)}&cache=${cacheBust}`); const todos = await resp.json(); return { todos, };
}getCurrentCookieValue('todos-cache') قام بفحصه لمعرفة ما إذا كنا على العميل (عن طريق التحقق من نوع المستند) ، ولا يقوم بإرجاع أي شيء إذا كنا كذلك ، وعند هذه النقطة نعرف أننا على الخادم. ثم يستخدم القيمة من تخطيطنا.
خرق ذاكرة التخزين المؤقت
لكن كيف هل نقوم بالفعل بتحديث قيمة خرق ذاكرة التخزين المؤقت عندما نحتاج إلى ذلك؟ نظرًا لأنه مخزن في ملف تعريف ارتباط ، يمكننا تسميته بهذا الشكل من أي إجراء خادم:
cookies.set("todos-cache", cacheValue, { path: "/", httpOnly: false });التطبيق
كل شيء إلى أسفل من هنا؛ لقد أنجزنا العمل الشاق. لقد قمنا بتغطية العديد من العناصر الأساسية لمنصة الويب التي نحتاجها ، وكذلك إلى أين يذهبون. الآن دعنا نحظى ببعض المرح ونكتب كود التطبيق لربطه معًا.
لأسباب ستتضح بعد قليل ، فلنبدأ بإضافة وظيفة تحرير إلى ملف /list صفحة. سنضيف صف الجدول الثاني هذا لكل مهمة:
import { enhance } from "$app/forms";<tr> <td colspan="4"> <form use:enhance method="post" action="?/editTodo"> <input name="id" value="{t.id}" type="hidden" /> <input name="title" value="{t.title}" /> <button>Save</button> </form> </td>
</tr>وبالطبع ، سنحتاج إلى إضافة نموذج إجراء لنا /list صفحة. الإجراءات يمكن أن تذهب فقط .server الصفحات ، لذلك سنضيف ملف +page.server.js في منطقتنا /list مجلد. (نعم ا +page.server.js يمكن أن يتعايش الملف بجوار ملف +page.js ملف.)
import { getTodo, updateTodo, wait } from "$lib/data/todoData"; export const actions = { async editTodo({ request, cookies }) { const formData = await request.formData(); const id = formData.get("id"); const newTitle = formData.get("title"); await wait(250); updateTodo(id, newTitle); cookies.set("todos-cache", +new Date(), { path: "/", httpOnly: false }); },
};نحن نحصل على بيانات النموذج ، ونفرض تأخيرًا ، ونحدّث مهامنا ، وبعد ذلك ، والأهم من ذلك ، نقوم بمسح ملف تعريف ارتباط ذاكرة التخزين المؤقت.
دعونا نعطي هذه فرصة. أعد تحميل صفحتك ، ثم قم بتحرير أحد عناصر المهام. يجب أن تشاهد تحديث قيمة الجدول بعد لحظة. إذا نظرت في علامة تبويب الشبكة في DevToold ، فسترى إحضارًا إلى ملف /todos نقطة النهاية ، والتي تُرجع بياناتك الجديدة. بسيط ويعمل بشكل افتراضي.
تحديثات فورية
ماذا لو أردنا تجنب هذا الجلب الذي يحدث بعد أن نقوم بتحديث عنصر المهام لدينا ، وبدلاً من ذلك ، قم بتحديث العنصر المعدل على الشاشة مباشرةً؟
هذه ليست مجرد مسألة أداء. إذا كنت تبحث عن "نشر" ثم أزلت كلمة "نشر" من أي من عناصر المهام في القائمة ، فسوف تختفي من القائمة بعد التعديل لأنها لم تعد موجودة في نتائج بحث تلك الصفحة. يمكنك جعل تجربة المستخدم أفضل من خلال بعض الرسوم المتحركة اللذيذة للمهام الحالية ، ولكن دعنا نقول أننا أردنا ذلك ليس أعد تشغيل وظيفة تحميل تلك الصفحة ولكن مع الاستمرار في مسح ذاكرة التخزين المؤقت وتحديث المهام المعدلة حتى يتمكن المستخدم من رؤية التعديل. يجعل SvelteKit ذلك ممكنًا - دعنا نرى كيف!
أولاً ، دعنا نجري تغييرًا بسيطًا على اللودر الخاص بنا. بدلاً من إعادة عناصر المهام الخاصة بنا ، دعنا نعيد ملف متجر قابل للكتابة تحتوي على مهامنا.
return { todos: writable(todos),
};في السابق ، كنا ندخل إلى قائمة المهام الخاصة بنا على data prop ، الذي لا نملكه ولا يمكننا تحديثه. لكن Svelte يتيح لنا إعادة بياناتنا في متجرهم الخاص (على افتراض أننا نستخدم محملًا عالميًا ، وهو ما نحن عليه الآن). نحتاج فقط إلى إجراء تعديل آخر على /list .
بدلا من هذا:
{#each todos as t}... نحن بحاجة إلى القيام بذلك منذ ذلك الحين todos هو نفسه الآن متجر:
{#each $todos as t}الآن يتم تحميل بياناتنا كما كان من قبل. لكن منذ todos هو متجر قابل للكتابة ، يمكننا تحديثه.
أولاً ، دعنا نقدم دالة إلى use:enhance صفة، عزا:
<form use:enhance={executeSave} on:submit={runInvalidate} method="post" action="?/editTodo"
>سيتم تشغيل هذا قبل الإرسال. دعنا نكتب ذلك بعد ذلك:
function executeSave({ data }) { const id = data.get("id"); const title = data.get("title"); return async () => { todos.update(list => list.map(todo => { if (todo.id == id) { return Object.assign({}, todo, { title }); } else { return todo; } }) ); };
}توفر هذه الوظيفة ملف data الاعتراض ببيانات النموذج الخاصة بنا. نحن عائد أعلى وظيفة غير متزامنة سيتم تشغيلها بعد تم تحريرنا. المستندات شرح كل هذا ، ولكن من خلال القيام بذلك ، قمنا بإيقاف تشغيل معالجة النموذج الافتراضي لـ SvelteKit والتي كان من شأنها إعادة تشغيل أداة التحميل الخاصة بنا. هذا هو بالضبط ما نريد! (يمكننا بسهولة استعادة هذا السلوك الافتراضي ، كما يوضح المستندات).
نحن ندعو الآن update على موقعنا todos مجموعة لأنه متجر. وهذا هو الذي. بعد تحرير عنصر مهمة ، تظهر التغييرات التي أجريناها على الفور ويتم مسح ذاكرة التخزين المؤقت لدينا (كما كان من قبل ، نظرًا لأننا قمنا بتعيين قيمة ملف تعريف ارتباط جديدة في editTodo شكل العمل). لذلك ، إذا بحثنا ثم انتقلنا مرة أخرى إلى هذه الصفحة ، فسنحصل على بيانات جديدة من أداة التحميل الخاصة بنا ، والتي ستستبعد بشكل صحيح أي عناصر مهام محدثة تم تحديثها.
رمز التحديثات الفورية متاح في جيثب.
حفر أعمق
يمكننا تعيين ملفات تعريف الارتباط في أي وظيفة تحميل خادم (أو إجراء خادم) ، وليس فقط تخطيط الجذر. لذلك ، إذا تم استخدام بعض البيانات فقط أسفل تخطيط واحد ، أو حتى صفحة واحدة ، فيمكنك تعيين قيمة ملف تعريف الارتباط هناك. علاوة على ذلك ، إذا كنت ليس من خلال تنفيذ الحيلة التي أظهرتها للتو بتحديث البيانات التي تظهر على الشاشة يدويًا ، وبدلاً من ذلك تريد إعادة تشغيل أداة التحميل بعد حدوث طفرة ، يمكنك دائمًا تعيين قيمة ملف تعريف ارتباط جديدة مباشرة في وظيفة التحميل هذه دون أي فحص ضدها isDataRequest. سيتم تعيينه في البداية ، ثم في أي وقت تقوم فيه بتشغيل إجراء خادم ، فإن تخطيط الصفحة سيؤدي تلقائيًا إلى إبطال وإعادة استدعاء أداة التحميل الخاصة بك ، وإعادة ضبط سلسلة ذاكرة التخزين المؤقت قبل استدعاء أداة التحميل العامة.
كتابة وظيفة إعادة التحميل
لنختتم ببناء ميزة أخيرة: زر إعادة التحميل. لنمنح المستخدمين زرًا يمسح ذاكرة التخزين المؤقت ثم يعيد تحميل الاستعلام الحالي.
سنضيف إجراء نموذج بسيط:
async reloadTodos({ cookies }) { cookies.set('todos-cache', +new Date(), { path: '/', httpOnly: false });
},في مشروع حقيقي ، ربما لن تنسخ / تلصق نفس الكود لتعيين نفس ملف تعريف الارتباط بنفس الطريقة في أماكن متعددة ، ولكن في هذا المنشور سنقوم بالتحسين من أجل البساطة وسهولة القراءة.
لنقم الآن بإنشاء نموذج للنشر عليه:
<form method="POST" action="?/reloadTodos" use:enhance> <button>Reload todos</button>
</form>انه يعمل انها تعمل!
يمكننا أن نسمي هذا "تم" والمضي قدمًا ، لكن دعنا نحسن هذا الحل قليلاً. على وجه التحديد ، دعنا نقدم ملاحظات على الصفحة لإخبار المستخدم بحدوث إعادة التحميل. أيضًا ، بشكل افتراضي ، تُبطل إجراءات SvelteKit كل شىء. سيتم إعادة تحميل كل تخطيط أو صفحة وما إلى ذلك في التسلسل الهرمي للصفحة الحالية. قد تكون هناك بعض البيانات التي تم تحميلها مرة واحدة في تخطيط الجذر ولا نحتاج إلى إبطالها أو إعادة تحميلها.
لذا ، دعونا نركز الأشياء قليلاً ، ونعيد تحميل مهامنا فقط عندما نسمي هذه الوظيفة.
أولاً ، دعنا نمرر دالة لتحسين:
<form method="POST" action="?/reloadTodos" use:enhance={reloadTodos}>import { enhance } from "$app/forms";
import { invalidate } from "$app/navigation"; let reloading = false;
const reloadTodos = () => { reloading = true; return async () => { invalidate("reload:todos").then(() => { reloading = false; }); };
};نحن نضع ملف reloading متغير ل true في بداية من هذا العمل. وبعد ذلك ، من أجل تجاوز السلوك الافتراضي لإبطال كل شيء ، نعيد async وظيفة. سيتم تشغيل هذه الوظيفة عند انتهاء إجراء الخادم الخاص بنا (والذي يقوم فقط بتعيين ملف تعريف ارتباط جديد).
بدون هذا async عادت الدالة ، سوف تبطل SvelteKit كل شيء. نظرًا لأننا نقدم هذه الوظيفة ، فلن يبطل أي شيء ، لذا فالأمر متروك لنا لإخبارها بما يجب إعادة تحميله. نفعل هذا مع invalidate وظيفة. نسميها بقيمة reload:todos. ترجع هذه الوظيفة الوعد ، والذي يحل عند اكتمال الإبطال ، وعند هذه النقطة نحددها reloading العودة إلى false.
أخيرًا ، نحتاج إلى مزامنة أداة التحميل الخاصة بنا مع هذا الملف الجديد reload:todos قيمة الإبطال. نفعل ذلك في محملنا باستخدام depends وظيفة:
export async function load({ fetch, url, setHeaders, depends }) { depends('reload:todos'); // rest is the sameوهذا هو الذي. depends و invalidate هي وظائف مفيدة بشكل لا يصدق. ما هو رائع هو ذلك invalidate لا يأخذ فقط القيم التعسفية التي نقدمها كما فعلنا. يمكننا أيضًا توفير عنوان URL ، والذي سيتتبعه SvelteKit ، وإبطال أي برامج تحميل تعتمد على عنوان URL هذا. تحقيقًا لهذه الغاية ، إذا كنت تتساءل عما إذا كان بإمكاننا تخطي المكالمة إلى depends وتبطل /api/todos نقطة النهاية تمامًا ، يمكنك ذلك ، ولكن عليك تقديم ملف دقيق URL ، بما في ذلك ملف search المصطلح (وقيمة ذاكرة التخزين المؤقت لدينا). لذلك ، يمكنك إما تجميع عنوان URL للبحث الحالي ، أو المطابقة على اسم المسار ، على النحو التالي:
invalidate(url => url.pathname == "/api/todos");أنا شخصياً أجد الحل الذي يستخدم depends أكثر وضوحا وبساطة. ولكن انظر المستندات لمزيد من المعلومات ، بالطبع ، وقرر بنفسك.
إذا كنت ترغب في رؤية زر إعادة التحميل قيد التشغيل ، فسيكون الرمز الخاص به موجودًا هذا الفرع من الريبو.
فراق الأفكار
كان هذا منشورًا طويلاً ، لكن آمل ألا يكون ساحقًا. نتعمق في طرق مختلفة يمكننا من خلالها تخزين البيانات مؤقتًا عند استخدام SvelteKit. كان الكثير من هذا مجرد مسألة استخدام أساسيات منصة الويب لإضافة ذاكرة التخزين المؤقت الصحيحة وقيم ملفات تعريف الارتباط ، والتي ستفيدك معرفتها في تطوير الويب بشكل عام ، بما يتجاوز SvelteKit فقط.
علاوة على ذلك ، هذا شيء أنت بالتأكيد لا تحتاج في كل وقت. يمكن القول أنه يجب عليك فقط الوصول إلى هذا النوع من الميزات المتقدمة عندما تقوم بذلك في الواقع في حاجة إليها. إذا كان مخزن البيانات الخاص بك يقدم البيانات بسرعة وكفاءة ، ولا تتعامل مع أي نوع من مشاكل التوسع ، فلا معنى في تضخيم كود التطبيق الخاص بك مع تعقيد لا داعي له للقيام بالأشياء التي تحدثنا عنها هنا.
كما هو الحال دائمًا ، اكتب رمزًا واضحًا ونظيفًا وبسيطًا وقم بالتحسين عند الضرورة. كان الغرض من هذا المنشور هو تزويدك بأدوات التحسين هذه عندما تحتاجها حقًا. اتمنى ان تكون قد استمتعت به!
- محتوى مدعوم من تحسين محركات البحث وتوزيع العلاقات العامة. تضخيم اليوم.
- بلاتوبلوكشين. Web3 Metaverse Intelligence. تضخيم المعرفة. الوصول هنا.
- المصدر https://css-tricks.com/caching-data-in-sveltekit/