GET, POST, PUT, DELETE handlers in Svelte - Performance & Optimization

Performance: GET, POST, PUT, DELETE handlers

MEDIUM IMPACT

This affects how fast the app responds to user actions and updates the UI by handling data requests efficiently.

Handling data fetching and updates in a Svelte app

Svelte

import { writable } from 'svelte/store';

const dataStore = writable([]);

async function fetchData() {
  const response = await fetch('/api/data');
  const data = await response.json();
  dataStore.set(data);
}

// Svelte updates DOM reactively, batching changes

Using Svelte's reactive stores lets the framework batch DOM updates and minimize reflows. Avoids manual DOM manipulation.

📈 Performance GainSingle reflow per update, non-blocking UI, faster interaction response.

Handling data fetching and updates in a Svelte app

Svelte

async function fetchData() {
  const response = await fetch('/api/data');
  const data = await response.json();
  // directly update DOM elements manually here
  document.getElementById('list').innerHTML = data.map(item => `<li>${item.name}</li>`).join('');
}

// called on every user action without debounce or batching

Manually manipulating DOM bypasses Svelte's reactive system causing extra layout thrashing and reflows. Frequent calls cause multiple reflows and block UI.

📉 Performance CostTriggers multiple reflows and repaints per call, blocking interaction for 50-100ms depending on data size.

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Manual DOM updates on every fetch	Many direct DOM changes	Multiple reflows per update	High paint cost due to full list repaint	[X] Bad
Using Svelte reactive stores	Minimal DOM changes via diffing	Single reflow per update	Low paint cost, only changed nodes repainted	[OK] Good

Rendering Pipeline

When a GET/POST/PUT/DELETE handler runs, it fetches or sends data, then updates the app state. Svelte reacts to state changes by recalculating styles, layout, and painting only changed parts.

→JavaScript Execution

→Style Calculation

→Layout

→Paint

→Composite

⚠️ BottleneckLayout and Paint stages due to DOM updates triggered by state changes

Core Web Vital Affected

INP

This affects how fast the app responds to user actions and updates the UI by handling data requests efficiently.

Optimization Tips

1Use Svelte reactive stores to handle data updates instead of manual DOM manipulation.

2Batch multiple state changes to reduce layout recalculations and repaints.

3Use async/await for non-blocking network requests to keep UI responsive.

Performance Quiz - 3 Questions

Which pattern reduces layout thrashing when handling data updates in Svelte?

A Calling fetch repeatedly without batching

B Manually updating DOM elements after fetch

C Using Svelte reactive stores to update UI

D Using synchronous XMLHttpRequest

DevTools: Performance

How to check: Record a performance profile while triggering data fetches and updates. Look for long scripting tasks and layout thrashing.

What to look for: Check for multiple layout recalculations and long scripting blocks indicating inefficient DOM updates.

Practice

1. In SvelteKit, what is the main purpose of a GET handler in a route's +server.js file?

easy

A. To update existing data on the server

B. To delete data from the server

C. To fetch and return data when the route is requested

D. To send data to the server without expecting a response

Solution

1. Step 1: Understand the role of HTTP methods

   GET requests are used to retrieve data from a server without changing it.

2. Step 2: Apply this to SvelteKit handlers

   The GET handler in +server.js responds to GET requests by returning data to the client.

3. Final Answer:

   To fetch and return data when the route is requested -> Option C

4. Quick Check:

   GET handler fetches data = B [OK]

Hint: GET handlers always return data for reading [OK]

Common Mistakes:

• Confusing GET with POST or PUT for data updates
• Thinking GET modifies server data
• Assuming GET sends data without response

2. Which of the following is the correct syntax to define a POST handler in SvelteKit's +server.js file?

easy

A. export async function POST({ request }) { return new Response('ok'); }

B. export async function post(request) { return new Response('ok'); }

C. export function Post(request) { return 'ok'; }

D. async function POST() { return 'ok'; }

Solution

1. Step 1: Recall SvelteKit handler naming conventions

   Handlers must be exported async functions named in uppercase: GET, POST, PUT, DELETE.

2. Step 2: Check parameter and return type

   The function receives an object with a request property and returns a Response object.

3. Final Answer:

   export async function POST({ request }) { return new Response('ok'); } -> Option A

4. Quick Check:

   Correct handler syntax = A [OK]

Hint: Use uppercase method names and destructured params [OK]

Common Mistakes:

• Using lowercase function names like 'post'
• Not exporting the function
• Returning plain strings instead of Response objects

3. Given this SvelteKit PUT handler in +server.js:

export async function PUT({ request }) {
  const data = await request.json();
  return new Response(JSON.stringify({ updated: data.id }), { status: 200 });
}

What will be the response body if the client sends {"id": 42} in the request body?

medium

A. undefined

B. {"id":42}

C. 42

D. {"updated":42}

Solution

1. Step 1: Parse JSON from request

   The handler reads JSON from the request body, so data = { id: 42 }.

2. Step 2: Return JSON with updated id

   The response body is JSON stringified object with key 'updated' and value data.id (42).

3. Final Answer:

   {"updated":42} -> Option D

4. Quick Check:

   Response JSON includes updated id = D [OK]

Hint: PUT returns updated data wrapped in JSON [OK]

Common Mistakes:

• Returning original data instead of updated key
• Not stringifying JSON response
• Confusing response body with request body

4. Identify the error in this DELETE handler code snippet:

export async function DELETE(request) {
  const id = await request.json().id;
  return new Response(`Deleted ${id}`, { status: 200 });
}

medium

A. The function parameter should be destructured to get request

B. Cannot await request.json().id directly; must await request.json() first

C. DELETE handlers cannot return Response objects

D. Missing export keyword before function

Solution

1. Step 1: Analyze request.json() usage

   request.json() returns a Promise for the parsed body; you must await it fully before accessing properties.

2. Step 2: Identify incorrect await usage

   Code tries to await request.json().id directly, which is invalid; must await request.json() first, then access .id.

3. Final Answer:

   Cannot await request.json().id directly; must await request.json() first -> Option B

4. Quick Check:

   Await full JSON before property access = C [OK]

Hint: Await request.json() fully before accessing properties [OK]

Common Mistakes:

• Trying to await a property of a Promise
• Not destructuring the parameter (optional but recommended)
• Thinking DELETE handlers can't return Response

5. You want to create a SvelteKit API route that updates a user's name using a PUT handler and returns the updated user object. Which code snippet correctly implements this behavior?

hard

A. export async function PUT({ request }) {
const user = await request.json();
user.name = user.name.toUpperCase();
return new Response(JSON.stringify(user), { status: 200 });
}

B. export async function PUT(request) {
const user = await request.json();
user.name = user.name.toUpperCase();
return user;
}

C. export async function put({ request }) {
const user = await request.json();
user.name = user.name.toUpperCase();
return new Response(JSON.stringify(user));
}

D. export async function PUT({ request }) {
const user = request.json();
user.name = user.name.toUpperCase();
return new Response(JSON.stringify(user), { status: 200 });
}

Solution

1. Step 1: Confirm correct function signature and export

   The handler must be exported async function named PUT with destructured { request } parameter.

2. Step 2: Await request.json() and modify data

   Await the JSON body, then update the user.name property correctly.

3. Step 3: Return a Response with JSON string and status

   Return new Response with JSON stringified user and status 200.

4. Final Answer:

   export async function PUT({ request }) { const user = await request.json(); user.name = user.name.toUpperCase(); return new Response(JSON.stringify(user), { status: 200 }); } -> Option A

5. Quick Check:

   Proper async PUT handler with Response = A [OK]

Hint: Use uppercase function name, await JSON, return Response [OK]

Common Mistakes:

• Not awaiting request.json()
• Using lowercase function name 'put'
• Returning raw object instead of Response