स्वेल्ट किट जिसे मैं नेक्स्ट-जेन एप्लिकेशन फ्रेमवर्क कहूंगा, वह नवीनतम है। बेशक, यह फ़ाइल-आधारित रूटिंग, परिनियोजन और सर्वर-साइड रेंडरिंग के साथ आपके लिए एक एप्लिकेशन को मचान बनाता है जो नेक्स्ट ने हमेशा के लिए किया है। लेकिन SvelteKit नेस्टेड लेआउट, सर्वर म्यूटेशन का भी समर्थन करता है जो आपके पेज पर डेटा को सिंक करता है, और कुछ अन्य बारीकियां जिनका हम अध्ययन करेंगे।
यह पोस्ट एक उच्च-स्तरीय परिचय के लिए है, उम्मीद है कि उन लोगों के लिए कुछ उत्साह पैदा करेगा जिन्होंने कभी भी SvelteKit का उपयोग नहीं किया है। यह एक सुकून भरा दौरा होगा। यदि आप जो देखते हैं उसे पसंद करते हैं, तो पूर्ण डॉक्स यहाँ हैं.
कुछ मायनों में यह लिखने के लिए एक चुनौतीपूर्ण पोस्ट है। SvelteKit एक है आवेदन ढांचा. यह आपके निर्माण में मदद करने के लिए मौजूद है ... ठीक है, अनुप्रयोग। जिससे डेमो करना मुश्किल हो जाता है। ब्लॉग पोस्ट में संपूर्ण एप्लिकेशन बनाना संभव नहीं है। इसलिए इसके बजाय, हम अपनी कल्पनाओं का थोड़ा उपयोग करेंगे। हम एक एप्लिकेशन के कंकाल का निर्माण करेंगे, कुछ खाली यूआई प्लेसहोल्डर और हार्ड-कोडेड स्टैटिक डेटा होगा। लक्ष्य एक वास्तविक एप्लिकेशन बनाना नहीं है, बल्कि आपको यह दिखाना है कि SvelteKit के मूविंग पीस कैसे काम करते हैं ताकि आप अपना खुद का एप्लिकेशन बना सकें।
उस अंत तक, हम एक उदाहरण के रूप में आजमाए हुए और सच्चे टू-डू एप्लिकेशन का निर्माण करेंगे। लेकिन चिंता न करें, यह एक और टू-डू ऐप बनाने की तुलना में SvelteKit कैसे काम करता है, यह देखने के बारे में बहुत कुछ होगा।
इस पोस्ट में सब कुछ के लिए कोड है GitHub पर उपलब्ध है. यह परियोजना भी है वर्सेल पर तैनात लाइव डेमो के लिए।
अपना प्रोजेक्ट बनाना
एक नया SvelteKit प्रोजेक्ट बनाना काफी आसान है। दौड़ना npm create your-app-name
टर्मिनल में और प्रश्न संकेतों का उत्तर दें। "कंकाल प्रोजेक्ट" चुनना सुनिश्चित करें, लेकिन अन्यथा टाइपस्क्रिप्ट, ईएसलिंट, आदि के लिए आप जो भी चयन करना चाहते हैं, करें।
एक बार प्रोजेक्ट बन जाने के बाद, रन करें npm i
और npm run dev
और एक देव सर्वर चलना शुरू कर देना चाहिए। ग़ुस्से से भड़क उठना localhost:5173
ब्राउज़र में और आपको कंकाल ऐप के लिए प्लेसहोल्डर पेज मिलेगा।
बेसिक रूटिंग
नोटिस routes
के तहत फ़ोल्डर src
. वह हमारे सभी मार्गों के लिए कोड रखता है। पहले से ही एक है +page.svelte
रूट के लिए सामग्री के साथ वहां फाइल करें /
रास्ता। कोई फर्क नहीं पड़ता कि आप फ़ाइल पदानुक्रम में कहाँ हैं, उस पथ के वास्तविक पृष्ठ में हमेशा नाम होता है +page.svelte
. इसे ध्यान में रखते हुए, चलिए इसके लिए पेज बनाते हैं /list
, /details
, /admin/user-settings
और admin/paid-status
, और प्रत्येक पृष्ठ के लिए कुछ टेक्स्ट प्लेसहोल्डर भी जोड़ें।
आपका फ़ाइल लेआउट कुछ इस तरह दिखना चाहिए:
आप ब्राउजर एड्रेस बार में यूआरएल पथ बदलकर चारों ओर नेविगेट करने में सक्षम होना चाहिए।
लेआउट
हम अपने ऐप में नेविगेशन लिंक चाहते हैं, लेकिन हम निश्चित रूप से उनके लिए मार्कअप को हमारे द्वारा बनाए गए प्रत्येक पेज पर कॉपी नहीं करना चाहते हैं। तो, चलिए एक बनाते हैं +layout.svelte
हमारे की जड़ में फ़ाइल routes
फ़ोल्डर, जिसे SvelteKit सभी पृष्ठों के लिए वैश्विक टेम्पलेट के रूप में मानेगा। आइए और इसमें कुछ सामग्री जोड़ें:
<nav> <ul> <li> <a href="/hi/">Home</a> </li> <li> <a href="/hi/list">To-Do list</a> </li> <li> <a href="/hi/admin/paid-status">Account status</a> </li> <li> <a href="/hi/admin/user-settings">User settings</a> </li> </ul>
</nav> <slot /> <style> nav { background-color: beige; } nav ul { display: flex; } li { list-style: none; margin: 15px; } a { text-decoration: none; color: black; }
</style>
कुछ मूल शैलियों के साथ कुछ अल्पविकसित नेविगेशन। का विशेष महत्व है <slot />
टैग। यह है नहीं वह स्लॉट जिसे आप वेब घटकों और शैडो DOM के साथ उपयोग करते हैं, बल्कि एक Svelte विशेषता यह दर्शाती है कि हमारी सामग्री को कहाँ रखा जाए। जब कोई पेज रेंडर होता है, तो पेज की सामग्री वहीं स्लाइड होगी जहां स्लॉट है।
और अब हमारे पास कुछ नेविगेशन है! हम कोई डिज़ाइन प्रतियोगिता नहीं जीतेंगे, लेकिन हम ऐसा करने का प्रयास नहीं कर रहे हैं।
नेस्टेड लेआउट
क्या होगा यदि हम चाहते हैं कि हमारे सभी एडमिन पेज हमारे द्वारा अभी बनाए गए सामान्य लेआउट को इनहेरिट करें लेकिन सभी एडमिन पेजों (लेकिन केवल एडमिन पेज) के लिए कुछ चीजें साझा करें? कोई बात नहीं, हम एक और जोड़ते हैं +layout.svelte
हमारे रूट में फाइल करें admin
निर्देशिका, जो इसके नीचे सब कुछ विरासत में मिलेगी। चलिए ऐसा करते हैं और इस सामग्री को जोड़ते हैं:
<div>This is an admin page</div> <slot /> <style> div { padding: 15px; margin: 10px 0; background-color: red; color: white; }
</style>
हम एक लाल बैनर जोड़ते हैं जो दर्शाता है कि यह एक एडमिन पेज है और फिर, पहले की तरह, a <slot />
यह दर्शाता है कि हम अपने पृष्ठ की सामग्री को कहाँ ले जाना चाहते हैं।
रेंडर करने से पहले हमारा रूट लेआउट। रूट लेआउट के अंदर एक है <slot />
टैग। नेस्टेड लेआउट की सामग्री रूट लेआउट में जाती है <slot />
. और अंत में, नेस्टेड लेआउट स्वयं को परिभाषित करता है <slot />
, जिसमें पेज की सामग्री रेंडर होती है।
यदि आप व्यवस्थापक पृष्ठों पर नेविगेट करते हैं, तो आपको नया लाल बैनर देखना चाहिए:
हमारे डेटा को परिभाषित करना
ठीक है, चलिए कुछ वास्तविक डेटा प्रस्तुत करते हैं - या कम से कम, देखें कि हम कुछ वास्तविक डेटा कैसे प्रस्तुत कर सकते हैं। डेटाबेस बनाने और उससे जुड़ने के सौ तरीके हैं। हालांकि यह पोस्ट SvelteKit के बारे में है, डायनेमोडीबी का प्रबंधन नहीं कर रहा है, इसलिए हम इसके बजाय कुछ स्थिर डेटा "लोड" करेंगे। लेकिन, हम इसे पढ़ने और अपडेट करने के लिए उसी मशीनरी का उपयोग करेंगे जिसका उपयोग आप वास्तविक डेटा के लिए करेंगे। एक वास्तविक वेब ऐप के लिए, आप जिस भी डेटाबेस का उपयोग करते हैं, उससे जुड़ने और क्वेरी करने वाले कार्यों के साथ स्थैतिक डेटा लौटाने वाले कार्यों को स्वैप करें।
आइए एक सरल मॉड्यूल बनाते हैं lib/data/todoData.ts
जो वास्तविक प्रश्नों का अनुकरण करने के लिए कृत्रिम देरी के साथ कुछ स्थिर डेटा लौटाता है। आप इसे देखेंगे lib
फ़ोल्डर के माध्यम से कहीं और आयात किया गया $lib
. यह उस विशेष फ़ोल्डर के लिए एक SvelteKit विशेषता है, और आप यहां तक कि कर सकते हैं अपना खुद का उपनाम जोड़ें.
let todos = [ { id: 1, title: "Write SvelteKit intro blog post", assigned: "Adam", tags: [1] }, { id: 2, title: "Write SvelteKit advanced data loading blog post", assigned: "Adam", tags: [1] }, { id: 3, title: "Prepare RenderATL talk", assigned: "Adam", tags: [2] }, { id: 4, title: "Fix all SvelteKit bugs", assigned: "Rich", tags: [3] }, { id: 5, title: "Edit Adam's blog posts", assigned: "Geoff", tags: [4] },
]; let tags = [ { id: 1, name: "SvelteKit Content", color: "ded" }, { id: 2, name: "Conferences", color: "purple" }, { id: 3, name: "SvelteKit Development", color: "pink" }, { id: 4, name: "CSS-Tricks Admin", color: "blue" },
]; export const wait = async amount => new Promise(res => setTimeout(res, amount ?? 100)); export async function getTodos() { await wait(); return todos;
} export async function getTags() { await wait(); return tags.reduce((lookup, tag) => { lookup[tag.id] = tag; return lookup; }, {});
} export async function getTodo(id) { return todos.find(t => t.id == id);
}
हमारे टू-डू आइटमों की एक फ्लैट सरणी वापस करने के लिए एक फ़ंक्शन, हमारे टैग्स का एक लुकअप, और एक टू-डू लाने के लिए एक फ़ंक्शन (हम अपने विवरण पृष्ठ में उस अंतिम का उपयोग करेंगे)।
हमारा डेटा लोड हो रहा है
हम उस डेटा को अपने Svelte पृष्ठों में कैसे प्राप्त करते हैं? कई तरीके हैं, लेकिन अभी के लिए, चलिए एक बनाते हैं +page.server.js
हमारे में फ़ाइल list
फ़ोल्डर, और इसमें यह सामग्री डालें:
import { getTodos, getTags } from "$lib/data/todoData"; export function load() { const todos = getTodos(); const tags = getTags(); return { todos, tags, };
}
हमने परिभाषित किया है load()
फ़ंक्शन जो पृष्ठ के लिए आवश्यक डेटा खींचता है। ध्यान दें कि हम हैं नहीं await
-हमारे लिए कॉल करता है getTodos
और getTags
async कार्य करता है। ऐसा करने से डेटा लोडिंग वॉटरफॉल बन जाएगा क्योंकि हम अपने टैग लोड करने से पहले अपने टू-डू आइटम आने का इंतजार करते हैं। इसके बजाय, हम कच्चे वादों को वापस करते हैं load
, और SvelteKit आवश्यक कार्य करता है await
उन्हें.
तो, हम इस डेटा को अपने पृष्ठ घटक से कैसे एक्सेस कर सकते हैं? SvelteKit प्रदान करता है data
उस पर डेटा के साथ हमारे घटक के लिए प्रॉप। हम a का उपयोग करके अपने टू-डू आइटम और टैग को इससे एक्सेस करेंगे प्रतिक्रियाशील असाइनमेंट.
हमारा सूची पृष्ठ घटक अब ऐसा दिखता है।
<script> export let data; $: ({ todo, tags } = data);
</script> <table cellspacing="10" cellpadding="10"> <thead> <tr> <th>Task</th> <th>Tags</th> <th>Assigned</th> </tr> </thead> <tbody> {#each todos as t} <tr> <td>{t.title}</td> <td>{t.tags.map((id) => tags[id].name).join(', ')}</td> <td>{t.assigned}</td> </tr> {/each} </tbody>
</table> <style> th { text-align: left; }
</style>
और यह हमारे टू-डू आइटम को प्रस्तुत करना चाहिए!
लेआउट समूह
इससे पहले कि हम विवरण पृष्ठ पर जाएँ और डेटा में बदलाव करें, आइए वास्तव में साफ-सुथरी SvelteKit विशेषता पर एक नज़र डालते हैं: लेआउट समूह. हम पहले ही सभी एडमिन पेजों के लिए नेस्टेड लेआउट देख चुके हैं, लेकिन क्या होगा अगर हम अपने फाइल सिस्टम के समान स्तर पर मनमाने पेजों के बीच एक लेआउट साझा करना चाहते हैं? विशेष रूप से, क्या होगा यदि हम केवल हमारे सूची पृष्ठ और हमारे विवरण पृष्ठ के बीच एक लेआउट साझा करना चाहते हैं? हमारे पास उस स्तर पर पहले से ही एक वैश्विक लेआउट है। इसके बजाय, हम एक नई निर्देशिका बना सकते हैं, लेकिन एक नाम के साथ जो कोष्ठक में है, जैसे:
अब हमारे पास एक लेआउट समूह है जो हमारी सूची और विवरण पृष्ठों को कवर करता है। मैंने इसका नाम रखा (todo-management)
लेकिन आप इसे अपनी पसंद का कुछ भी नाम दे सकते हैं। स्पष्ट होने के लिए, यह नाम होगा नहीं लेआउट समूह के अंदर के पृष्ठों के URL को प्रभावित करते हैं। URL वही रहेंगे; लेआउट समूह आपको उन सभी के बिना पृष्ठों पर साझा किए गए लेआउट जोड़ने की अनुमति देते हैं जिनमें निर्देशिका की संपूर्णता शामिल होती है routes
.
We सका एक जोड़ें +layout.svelte
फ़ाइल और कुछ मूर्खतापूर्ण <div>
बैनर कह रहा है, "अरे हम टू-डॉस मैनेज कर रहे हैं"। लेकिन चलिए कुछ और दिलचस्प करते हैं। लेआउट परिभाषित कर सकते हैं load()
उनके नीचे के सभी मार्गों के लिए डेटा प्रदान करने के लिए कार्य करता है। आइए अपने टैग्स को लोड करने के लिए इस कार्यात्मकता का उपयोग करें — चूंकि हम अपने टैग्स का उपयोग अपने टैग्स में करेंगे details
पेज - इसके अलावा list
पृष्ठ हमारे पास पहले से ही है।
वास्तव में, एक लेआउट समूह को केवल डेटा का एक टुकड़ा प्रदान करने के लिए मजबूर करना लगभग निश्चित रूप से इसके लायक नहीं है; उस डेटा को इसमें डुप्लिकेट करना बेहतर है load()
प्रत्येक पृष्ठ के लिए कार्य करें। लेकिन इस पोस्ट के लिए, यह वह बहाना प्रदान करेगा जिसकी हमें नई SvelteKit विशेषता देखने की आवश्यकता है!
सबसे पहले, हमारे में चलते हैं list
पृष्ठ का +page.server.js
फ़ाइल करें और उसमें से टैग हटा दें।
import { getTodos, getTags } from "$lib/data/todoData"; export function load() { const todos = getTodos(); return { todos, };
}
हमारे सूची पृष्ठ को अब एक त्रुटि उत्पन्न करनी चाहिए क्योंकि वहाँ नहीं है tags
वस्तु। आइए इसे जोड़कर ठीक करें +layout.server.js
हमारे लेआउट समूह में फ़ाइल करें, फिर a को परिभाषित करें load()
फ़ंक्शन जो हमारे टैग लोड करता है।
import { getTags } from "$lib/data/todoData"; export function load() { const tags = getTags(); return { tags, };
}
और, ऐसे ही, हमारा सूची पृष्ठ फिर से प्रस्तुत हो रहा है!
हम कई जगहों से डेटा लोड कर रहे हैं
आइए यहां क्या हो रहा है पर एक अच्छा बिंदु डालें:
- हमने परिभाषित किया
load()
हमारे लेआउट समूह के लिए कार्य करें, जिसे हम डालते हैं+layout.server.js
. - यह के लिए डेटा प्रदान करता है सब लेआउट जिन पृष्ठों पर कार्य करता है — जिनका इस मामले में अर्थ है हमारी सूची और विवरण पृष्ठ।
- हमारा सूची पृष्ठ भी परिभाषित करता है
load()
कार्य जो इसके अंदर जाता है+page.server.js
फ़ाइल. - SvelteKit इन डेटा स्रोतों के परिणामों को लेने, उन्हें एक साथ मिलाने और दोनों को उपलब्ध कराने का कठिन कार्य करता है।
data
.
हमारा विवरण पृष्ठ
हम एक टू-डू आइटम संपादित करने के लिए अपने विवरण पृष्ठ का उपयोग करेंगे। सबसे पहले, आइए अपने सूची पृष्ठ में तालिका में एक स्तंभ जोड़ें जो क्वेरी स्ट्रिंग में टू-डू आइटम की आईडी के साथ विवरण पृष्ठ से लिंक करता है।
<td><a href="/hi/details?id={t.id}">Edit</a></td>
अब अपना विवरण पृष्ठ बनाते हैं। सबसे पहले, हम उस टू-डू आइटम को हथियाने के लिए एक लोडर जोड़ेंगे जिसका हम संपादन कर रहे हैं। बनाओ +page.server.js
in /details
, इस सामग्री के साथ:
import { getTodo, updateTodo, wait } from "$lib/data/todoData"; export function load({ url }) { const id = url.searchParams.get("id"); console.log(id); const todo = getTodo(id); return { todo, };
}
हमारा लोडर एक के साथ आता है url
संपत्ति जिससे हम क्वेरी स्ट्रिंग मान खींच सकते हैं। इससे उस टू-डू आइटम को देखना आसान हो जाता है जिसका हम संपादन कर रहे हैं। आइए इसे संपादित करने की कार्यक्षमता के साथ-साथ उस कार्य को प्रस्तुत करें।
जब तक आप प्रपत्रों का उपयोग करते हैं, तब तक SvelteKit में अद्भुत अंतर्निर्मित उत्परिवर्तन क्षमताएँ हैं। फॉर्म याद हैं? यह रहा हमारा विवरण पृष्ठ। मैंने संक्षिप्तता के लिए शैलियों को हटा दिया है।
<script> import { enhance } from "$app/forms"; export let data; $: ({ todo, tags } = data); $: currentTags = todo.tags.map(id => tags[id]);
</script> <form use:enhance method="post" action="?/editTodo"> <input name="id" type="hidden" value="{todo.id}" /> <input name="title" value="{todo.title}" /> <div> {#each currentTags as tag} <span style="{`color:" ${tag.color};`}>{tag.name}</span> {/each} </div> <button>Save</button>
</form>
हम अपने लेआउट समूह के लोडर से पहले की तरह टैग और अपने पेज के लोडर से टू-डू आइटम ले रहे हैं। हम वास्तविक पकड़ रहे हैं tag
टैग आईडी की टू-डू सूची से ऑब्जेक्ट और फिर सब कुछ प्रस्तुत करना। हम आईडी के लिए एक छिपे हुए इनपुट और शीर्षक के लिए एक वास्तविक इनपुट के साथ एक फॉर्म बनाते हैं। हम टैग प्रदर्शित करते हैं और फिर फ़ॉर्म सबमिट करने के लिए एक बटन प्रदान करते हैं।
अगर आपने गौर किया use:enhance
, जो केवल SvelteKit को प्रोग्रेसिव एन्हांसमेंट और अजाक्स को हमारे फॉर्म को जमा करने के लिए कहता है। आप हमेशा इसका इस्तेमाल करेंगे।
हम अपने संपादन कैसे सहेज सकते हैं?
नोटिस action="?/editTodo"
प्रपत्र पर ही विशेषता? यह हमें बताता है कि हम अपना संपादित डेटा कहां जमा करना चाहते हैं। हमारे मामले के लिए, हम एक को प्रस्तुत करना चाहते हैं editTodo
"कार्य।"
निम्नलिखित को इसमें जोड़कर इसे बनाते हैं +page.server.js
फ़ाइल हमारे पास पहले से ही विवरण के लिए है (जिसमें वर्तमान में a load()
कार्य, हमारे टू-डू को पकड़ने के लिए):
import { redirect } from "@sveltejs/kit"; // ... export const actions = { async editTodo({ request }) { const formData = await request.formData(); const id = formData.get("id"); const newTitle = formData.get("title"); await wait(250); updateTodo(id, newTitle); throw redirect(303, "/list"); },
};
फॉर्म एक्शन हमें देते हैं request
वस्तु, जो हमारे तक पहुँच प्रदान करती है formData
, जिसमें ए get
हमारे विभिन्न प्रपत्र क्षेत्रों के लिए विधि। हमने आईडी मान के लिए उस छिपे हुए इनपुट को जोड़ा है ताकि हम संपादित किए जा रहे टू-डू आइटम को देखने के लिए इसे यहां ले सकें। हम देरी अनुकरण करते हैं, एक नया कॉल करें updateTodo()
विधि, फिर उपयोगकर्ता को वापस रीडायरेक्ट करें /list
पृष्ठ। updateTodo()
विधि केवल हमारे स्थिर डेटा को अपडेट करती है; वास्तविक जीवन में आप जो भी डेटास्टोर उपयोग कर रहे हैं उसमें आप किसी प्रकार का अपडेट चलाएंगे।
export async function updateTodo(id, newTitle) { const todo = todos.find(t => t.id == id); Object.assign(todo, { title: newTitle });
}
आइए इसे आजमाते हैं। हम पहले सूची पृष्ठ पर जाएंगे:
अब संपादन पृष्ठ को सामने लाने के लिए किसी एक टू-डू आइटम के लिए संपादित करें बटन पर क्लिक करें /details
.
हम एक नया शीर्षक जोड़ने जा रहे हैं:
अब, सहेजें पर क्लिक करें। वह हमें वापस हमारे पास ले जाना चाहिए /list
पृष्ठ, जिसमें नया टू-डू शीर्षक लागू किया गया है।
नया शीर्षक इस तरह कैसे दिखा? यह स्वचालित था। एक बार जब हम /list
पृष्ठ, SvelteKit स्वचालित रूप से हमारे सभी लोडरों को फिर से चलाता है जैसे कि यह परवाह किए बिना किया होता। SvelteKit जैसे नेक्स्ट-जेन एप्लिकेशन फ्रेमवर्क में यह महत्वपूर्ण प्रगति है। रीमिक्स, तथा अगला 13 उपलब्ध करवाना। आपको पृष्ठों को प्रस्तुत करने का एक सुविधाजनक तरीका देने के बजाय, डेटा को अपडेट करने के लिए आपके पास जो भी समापन बिंदु हो सकते हैं, उन्हें प्राप्त करने के लिए शुभकामनाएं देने के बजाय, वे डेटा लोडिंग के साथ-साथ डेटा म्यूटेशन को एकीकृत करते हैं, जिससे दोनों को मिलकर काम करने की अनुमति मिलती है।
कुछ बातें जो आप सोच रहे होंगे...
यह म्यूटेशन अपडेट बहुत प्रभावशाली नहीं लगता है। जब भी आप नेविगेट करेंगे लोडर फिर से चलेंगे। क्या होता अगर हमने अपने फॉर्म एक्शन में रीडायरेक्ट नहीं जोड़ा होता, लेकिन वर्तमान पेज पर बने रहते? SvelteKit पहले की तरह फॉर्म एक्शन में अपडेट करेगा, लेकिन करेगा अभी भी पेज लेआउट(लों) में लोडर सहित वर्तमान पेज के लिए सभी लोडर फिर से चलाएँ।
क्या हमारे पास अपने डेटा को अमान्य करने के अधिक लक्षित साधन हो सकते हैं? उदाहरण के लिए, हमारे टैग संपादित नहीं किए गए थे, इसलिए वास्तविक जीवन में हम उनसे दोबारा पूछताछ नहीं करना चाहेंगे। हाँ, जो मैंने आपको दिखाया वह SvelteKit में केवल डिफ़ॉल्ट रूप व्यवहार है। आप द्वारा डिफ़ॉल्ट व्यवहार को बंद कर सकते हैं को कॉलबैक प्रदान करना use:enhance
. तब SvelteKit मैनुअल प्रदान करता है अमान्यकरण कार्य.
हर नेविगेशन पर डेटा लोड करना संभावित रूप से महंगा और अनावश्यक है। क्या मैं इस डेटा को कैश कर सकता हूं जैसे मैं टूल के साथ करता हूं react-query
? हाँ, बिल्कुल अलग। SvelteKit आपको वेब द्वारा पहले से प्रदान किए गए कैश-कंट्रोल हेडर को सेट (और फिर सम्मान) करने देता है। और मैं एक अनुवर्ती पोस्ट में कैशे अमान्यकरण तंत्र को कवर करूंगा।
इस लेख में हमने जो कुछ भी किया है वह स्थिर डेटा का उपयोग करता है और स्मृति में मूल्यों को संशोधित करता है। यदि आपको सब कुछ वापस करने और फिर से शुरू करने की आवश्यकता है, तो रोकें और पुनः आरंभ करें npm run dev
नोड प्रक्रिया।
ऊपर लपेटकर
हमने SvelteKit की सतह को मुश्किल से खंगाला है, लेकिन उम्मीद है कि आपने इसके बारे में उत्साहित होने के लिए पर्याप्त देखा होगा। मुझे याद नहीं कि आखिरी बार मैंने वेब विकास को इतना मजेदार कब पाया था। बंडलिंग, रूटिंग, एसएसआर, और परिनियोजन जैसी सभी चीजों को बॉक्स से बाहर करने के साथ, मुझे कॉन्फिगर करने की तुलना में कोडिंग में अधिक समय लगता है।
यहाँ कुछ और संसाधन दिए गए हैं जिनका उपयोग आप SvelteKit सीखने के अगले चरणों के रूप में कर सकते हैं:
- एसईओ संचालित सामग्री और पीआर वितरण। आज ही प्रवर्धित हो जाओ।
- प्लेटोब्लॉकचैन। Web3 मेटावर्स इंटेलिजेंस। ज्ञान प्रवर्धित। यहां पहुंचें।
- स्रोत: https://css-tricks.com/getting-started-with-sveltekit/
- 1
- 10
- 100
- 11
- 7
- 9
- 98
- a
- योग्य
- About
- इसके बारे में
- पहुँच
- लेखा
- कार्य
- कार्रवाई
- ऐडम
- जोड़ा
- इसके अलावा
- पता
- व्यवस्थापक
- उन्नत
- को प्रभावित
- सब
- की अनुमति दे
- साथ - साथ
- पहले ही
- हमेशा
- राशि
- और
- अन्य
- जवाब
- किसी
- अनुप्रयोग
- आवेदन
- अनुप्रयोगों
- लागू
- चारों ओर
- ऐरे
- लेख
- कृत्रिम
- सौंपा
- स्वचालित
- स्वतः
- उपलब्ध
- का इंतजार
- वापस
- पृष्ठभूमि
- बैनर
- बार
- बुनियादी
- से पहले
- BEST
- बेहतर
- के बीच
- बिट
- काली
- ब्लॉग
- वेबदैनिकी डाक
- नीला
- मुक्केबाज़ी
- लाना
- ब्राउज़र
- कीड़े
- निर्माण
- बनाया गया
- में निर्मित
- बटन
- कैश
- कॉल
- कॉल
- क्षमताओं
- मामला
- निश्चित रूप से
- चुनौतीपूर्ण
- बदलना
- स्पष्ट
- कोड
- कोडन
- रंग
- स्तंभ
- कैसे
- सामान्य
- प्रतियोगिताएं
- अंग
- घटकों
- सम्मेलनों
- जुडिये
- कनेक्ट कर रहा है
- कंसोल
- सामग्री
- सुविधाजनक
- सका
- कोर्स
- कवर
- कवर
- बनाना
- बनाया
- बनाना
- वर्तमान
- वर्तमान में
- तिथि
- डाटाबेस
- चूक
- परिभाषित करता है
- देरी
- देरी
- तैनाती
- डिज़ाइन
- विवरण
- देव
- विकास
- डीआईडी
- डिस्प्ले
- नहीं करता है
- कर
- dont
- से प्रत्येक
- अन्यत्र
- पर्याप्त
- संपूर्ण
- संपूर्णता
- त्रुटि
- आदि
- और भी
- प्रत्येक
- सब कुछ
- उदाहरण
- उत्तेजित
- उत्तेजना
- मौजूद
- महंगा
- निर्यात
- संभव
- Feature
- कुछ
- फ़ील्ड
- पट्टिका
- फ़ाइलें
- अंत में
- अंत
- आग
- प्रथम
- फिक्स
- फ्लैट
- निम्नलिखित
- सदा
- प्रपत्र
- प्रारूप
- रूपों
- पाया
- चौखटे
- से
- पूर्ण
- मज़ा
- समारोह
- कार्यक्षमता
- कार्यों
- मिल
- मिल रहा
- देना
- देते
- वैश्विक
- Go
- लक्ष्य
- चला जाता है
- जा
- पकड़ लेना
- समूह
- समूह की
- होना
- कठिन
- हेडर
- मदद
- यहाँ उत्पन्न करें
- छिपा हुआ
- पदक्रम
- उच्च स्तर
- रखती है
- उम्मीद है कि
- क्षैतिज
- कैसे
- एचटीएमएल
- HTTPS
- मैं करता हूँ
- कल्पनायें
- आयात
- महत्व
- प्रभावशाली
- in
- सहित
- प्रारंभिक
- निवेश
- बजाय
- एकीकृत
- दिलचस्प
- परिचय
- IT
- आइटम
- खुद
- जावास्क्रिप्ट
- कुंजी
- पिछली बार
- ताज़ा
- ख़ाका
- सीख रहा हूँ
- चलें
- स्तर
- Li
- जीवन
- प्रकाश
- संभावित
- लिंक
- सूची
- जीना
- भार
- लोडर
- लोड हो रहा है
- भार
- लंबा
- देखिए
- लग रहा है
- लुकअप
- भाग्य
- मशीनरी
- बनाना
- बनाता है
- निर्माण
- प्रबंध
- गाइड
- हाशिया
- बात
- साधन
- याद
- केवल
- विलय
- तरीका
- हो सकता है
- मन
- मॉड्यूल
- अधिक
- चाल
- चलती
- विभिन्न
- नाम
- नामांकित
- निवल परिसंपत्ति मूल्य
- नेविगेट करें
- पथ प्रदर्शन
- आवश्यक
- आवश्यकता
- नया
- अगला
- नोड
- साधारण
- संख्या
- वस्तु
- वस्तुओं
- ONE
- आदेश
- अन्य
- अन्यथा
- अपना
- विशेष
- पथ
- निष्पादन
- चुनना
- टुकड़ा
- टुकड़े
- प्लेसहोल्डर
- प्लेटो
- प्लेटो डेटा इंटेलिजेंस
- प्लेटोडाटा
- बिन्दु
- पद
- पोस्ट
- संभावित
- तैयार करना
- मुसीबत
- प्रक्रिया
- उत्पादन
- प्रगतिशील
- परियोजना
- का वादा किया
- संपत्ति
- संरक्षित
- प्रदान करना
- प्रदान करता है
- खींचती
- रखना
- प्रश्न
- कच्चा
- पढ़ना
- वास्तविक
- असली जीवन
- वास्तविकता
- लाल
- अनुप्रेषित
- भले ही
- रहना
- याद
- हटाना
- प्रतिपादन
- renders
- का अनुरोध
- उपयुक्त संसाधन चुनें
- परिणाम
- वापसी
- लौटने
- रिटर्न
- लौट आना
- धनी
- जड़
- मार्ग
- मार्गों
- रन
- दौड़ना
- वही
- सहेजें
- देखकर
- कार्य करता है
- सेट
- छाया
- Share
- साझा
- चाहिए
- दिखाना
- सरल
- केवल
- के बाद से
- एक
- स्लाइड
- So
- कुछ
- कुछ
- सूत्रों का कहना है
- बिताना
- प्रारंभ
- शुरू
- रुके
- कदम
- रुकें
- प्रस्तुत
- समर्थन करता है
- सतह
- प्रणाली
- तालिका
- टैग
- लेना
- ले जा
- बातचीत
- अग्रानुक्रम
- लक्षित
- बताता है
- टेम्पलेट
- अंतिम
- RSI
- चीज़ें
- भर
- पहर
- शीर्षक
- सेवा मेरे
- एक साथ
- भी
- उपकरण
- दौरा
- उपचार
- <strong>उद्देश्य</strong>
- मोड़
- टाइपप्रति
- ui
- के अंतर्गत
- अपडेट
- अपडेट
- यूआरएल
- us
- उपयोग
- उपयोगकर्ता
- मूल्य
- मान
- विभिन्न
- के माध्यम से
- देखें
- प्रतीक्षा
- जरूरत है
- तरीके
- वेब
- वेब घटक
- वेब विकास
- क्या
- कौन कौन से
- सफेद
- मर्जी
- जीतना
- बिना
- अद्भुत
- काम
- कार्य
- लायक
- होगा
- लिखना
- आप
- आपका
- जेफिरनेट