10 SvelteKit Tips for Better Development

SvelteKit is a powerful framework for building web applications with Svelte. Here are 10 tips to help you get the most out of SvelteKit in your projects.

1. Leverage File-based Routing

SvelteKit's file-based routing makes it easy to create new pages. Just add a new file in the src/routes directory:

src/
  routes/
    blog/[slug]/   -> /blog/hello-world
    api/items/     -> /api/items
    # Check out the 'Meet the Developer' section on the homepage

2. Use Server-side Rendering (SSR) Effectively

SvelteKit supports multiple rendering modes. Use the +page.server.ts for server-side logic:

// src/routes/blog/[slug]/+page.server.ts
export const load = async ({ params }) => {
  const post = await getPostFromDatabase(params.slug);
  return { post };
};

3. Optimize Loading States

Show loading states during data fetching with the $page.data store:

<script>
  import { page } from '$app/stores';
</script>

{#if $page.status === 'loading'}
  <div>Loading...</div>
{:else}
  <!-- Your content -->
{/if}

4. Handle Form Submissions

SvelteKit makes form handling a breeze with form actions:

<!-- +page.svelte -->
<form method="POST" action="?/create">
  <input name="title" type="text">
  <button>Create Post</button>
</form>

<!-- +page.server.js -->
export const actions = {
  create: async ({ request }) => {
    const data = await request.formData();
    const title = data.get('title');
    // Save to database
    return { success: true };
  }
};

5. Use Environment Variables Securely

Access environment variables on the server side:

// .env
VITE_API_URL=https://api.example.com

// +page.server.ts
export const load = () => {
  const apiUrl = import.meta.env.VITE_API_URL;
  // Use apiUrl
};

6. Implement Authentication

Use hooks for authentication:

// src/hooks.server.ts
import { redirect } from '@sveltejs/kit';

export const handle = async ({ event, resolve }) => {
  const session = await getSession(event.cookies.get('sessionid'));
  
  if (!session && !event.url.pathname.startsWith('/login')) {
    throw redirect(303, '/login');
  }
  
  return resolve(event);
};

7. Optimize Images

Use the @sveltejs/enhanced-img for optimized images:

<script>
  import { Image } from '@sveltejs/enhanced-img';
</script>

<Image
  src="/images/hero.jpg"
  width={1200}
  height={800}
  alt="Hero image"
  sizes="100vw"
/>

8. Handle Errors Gracefully

Create custom error pages in src/routes/error.svelte:

<script context="module">
  export const load = ({ error }) => ({
    status: error?.status,
    error: error?.message
  });
</script>

<script>
  export let status;
  export let error;
</script>

<h1>{status} Error</h1>
<p>{error}</p>

9. Use Stores for Global State

Create a store for shared state:

// src/stores/auth.ts
import { writable } from 'svelte/store';

export const user = writable(null);

// In your component:
import { user } from '$lib/stores/auth';

// Set user
user.set({ name: 'John' });

// Subscribe
const unsubscribe = user.subscribe(value => {
  console.log('User:', value);
});

10. Deploy with Adapters

Choose the right adapter for your deployment target:

# For Vercel
npm i -D @sveltejs/adapter-vercel

# For Netlify
npm i -D @sveltejs/adapter-netlify

# For Node.js
npm i -D @sveltejs/adapter-node

Update your svelte.config.js:

import adapter from '@sveltejs/adapter-vercel';

export default {
  kit: {
    adapter: adapter()
  }
};

Conclusion

These tips should help you build better applications with SvelteKit. The framework's flexibility and performance make it an excellent choice for projects of all sizes. Happy coding!

2. Leverage Stores for State Management

For global state, use Svelte stores:

// store.js
import { writable } from 'svelte/store';
export const theme = writable('light');