Server routes (+server.js) in Svelte - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What does this +server.js GET route return?

Consider this SvelteKit +server.js file with a GET handler. What is the JSON response when you fetch this route?

Svelte

export async function GET() {
  return new Response(JSON.stringify({ message: 'Hello from server' }), {
    headers: { 'Content-Type': 'application/json' }
  });
}

A {"error":"Not found"}

B undefined

C "Hello from server"

D {"message":"Hello from server"}

💡 Hint

The GET function returns a Response with JSON string and content-type header.

The GET handler returns a Response object with a JSON string containing the message key. The client receives the JSON object {"message":"Hello from server"}.

📝 Syntax

intermediate

Which +server.js POST handler syntax is correct?

You want to create a POST handler in +server.js that reads JSON from the request body. Which option is syntactically correct?

A

export async function POST(request) {
  const data = await request.json();
  return new Response(JSON.stringify(data));
}

B

export async function POST({ request }) {
  const data = await request.json();
  return new Response(JSON.stringify(data));
}

C

export async function POST(req) {
  const data = req.json();
  return new Response(JSON.stringify(data));
}

D

export async function POST({ req }) {
  const data = await req.json();
  return new Response(JSON.stringify(data));
}

💡 Hint

SvelteKit passes an object with a request property to the handler.

The POST handler receives an object with a request property. You must destructure it as { request } and await request.json() to parse the body.

🔧 Debug

advanced

Why does this +server.js GET handler cause a runtime error?

This GET handler throws an error when called. What is the cause?

Svelte

export async function GET() {
  return {
    body: { message: 'Hi' }
  };
}

A The handler must return a Response object, not a plain object with body.

B The body property must be a string, not an object.

C The function must be named get, not GET.

D The handler must be synchronous, not async.

💡 Hint

SvelteKit expects a Response or a special object shape from server route handlers.

In SvelteKit +server.js, handlers must return a Response object or use the new Response helpers. Returning a plain object with body causes a runtime error.

❓ state_output

advanced

What is the response body after this POST handler runs?

Given this +server.js POST handler, what JSON does the client receive?

Svelte

export async function POST({ request }) {
  const { name } = await request.json();
  return new Response(JSON.stringify({ greeting: `Hello, ${name}!` }), {
    headers: { 'Content-Type': 'application/json' }
  });
}

A {"name":"Alice"}

B {"greeting":"Hello, undefined!"}

C {"greeting":"Hello, Alice!"}

D {"error":"Missing name"}

💡 Hint

The handler reads 'name' from the JSON body and returns a greeting string.

The handler extracts 'name' from the request JSON and returns a greeting message with that name in JSON format.

🧠 Conceptual

expert

Which statement about +server.js route handlers is TRUE?

Select the correct statement about how +server.js route handlers work in SvelteKit.

A Handlers must always return a Response object; returning plain objects causes errors.

B Handlers can return plain objects with a 'body' property and SvelteKit converts them automatically.

C Handlers can only handle GET and POST methods; other HTTP methods are not supported.

D Handlers run only on the client side and cannot access server resources.

💡 Hint

Think about the expected return type of server route handlers.

SvelteKit expects server route handlers to return Response objects or use the Response helpers. Returning plain objects is not supported and causes errors.