Learn SvelteKit
Documentation
Creating app using sveltekit
npm create svelte@latest intro-site
Prefetching data in svelte
-
data-sveltekit-preload-data: It will cause the sveltekit to run the page's load data function as soon as the user hovers/touckes the link.
It can have below options:- data-sveltekit-preload-data="hover" : means that every link is preloaded on hover by default.
- data-sveltekit-preload-data="tap" : means that every link is preloaded on click/tap by default.
It can take below 4 values:
- "eager" means that links will be preloaded straight away
- "viewport" means that links will be preloaded once they enter the viewport
- "hover" - as above, except that only code is preloaded
- "tap" - as above, except that only code is preloaded
Creating production build
- npm run build
- npm run preview (to preview the build)
Routing
- All files can run on the server
- All files run on the client except +server files
- +layout and +error files apply to subdirectories as well as the directory they live in
- +page.svelte:A +page.svelte component defines a page of your app. By default, pages are rendered both on the server (SSR) for the initial request and in the browser (CSR) for subsequent navigation.
Hooks in Svelte
- 'Hooks' are app-wide functions you declare that SvelteKit will call in response to specific events, giving you fine-grained control over the framework's behaviour.
There are three hooks files, all optional:
- src/hooks.server.js — your app's server hooks
- src/hooks.client.js — your app's client hooks
- src/hooks.js — your app's hooks that run on both the client and server
Code in these modules will run when the application starts up, making them useful for initializing database clients and so on.
