Server routes (+server.js) in Svelte - Deep Dive

Overview - Server routes (+server.js)

What is it?

Server routes in SvelteKit are special files that handle requests from the browser or other clients. They let you write code that runs on the server to respond with data, perform actions, or control navigation. The +server.js file is where you define these routes using functions for different HTTP methods like GET or POST. This helps separate server logic from the user interface.

Why it matters

Without server routes, your app would only run in the browser and could not securely fetch or send data to a database or external services. Server routes let you build dynamic, interactive apps that can handle user input, save data, or protect sensitive operations. They make your app more powerful and real-world ready by bridging the client and server safely.

Where it fits

Before learning server routes, you should understand basic Svelte components and how client-side routing works. After mastering server routes, you can explore advanced topics like server actions, API integration, and authentication in SvelteKit.

Mental Model

Core Idea

Server routes are like waiters in a restaurant who listen to your order (request), prepare the food (process data), and bring it back to you (response).

Think of it like...

Imagine a restaurant kitchen where customers place orders through waiters. The waiter takes the order, the kitchen cooks the meal, and the waiter delivers it back. Server routes act as the waiter, handling requests and responses between the client and server.

┌───────────────┐       Request       ┌───────────────┐
│   Client      │ ──────────────────▶ │  +server.js   │
└───────────────┘                    │  (Server)     │
                                    └───────────────┘
                                          │
                                          │ Process request
                                          ▼
                                    ┌───────────────┐
                                    │  Response     │
                                    └───────────────┘
                                          │
                                          ▼
                                    ┌───────────────┐
                                    │   Client      │
                                    └───────────────┘

Build-Up - 7 Steps

1

Foundation

What Are Server Routes in SvelteKit

Concept: Introduce the idea of server routes as files that handle HTTP requests on the server side.

In SvelteKit, server routes are special files named +server.js placed inside folders that match URL paths. Each file can export functions like GET, POST, PUT, DELETE to handle requests. When a client visits a URL or sends data, SvelteKit runs the matching function in +server.js to respond.

Result

You understand that +server.js files are the server's way to listen and respond to client requests.

Understanding that server routes are just files with functions helps you see how SvelteKit connects URLs to server logic simply and clearly.

2

Foundation

Basic GET Handler in +server.js

Concept: Learn how to write a simple GET function to respond with data.

Create a +server.js file with an exported GET function. This function receives a request and returns a response object with status and body. For example: export function GET() { return new Response(JSON.stringify({ message: 'Hello from server!' }), { headers: { 'Content-Type': 'application/json' } }); } This sends JSON data back to the client.

Result

Visiting the route URL returns the JSON message from the server.

Knowing how to send a response with status and headers is the foundation for all server route interactions.

3

Intermediate

Handling POST Requests with +server.js

🤔Before reading on: do you think POST handlers receive data the same way as GET handlers? Commit to your answer.

Concept: Learn how to accept and process data sent by the client using POST method.

In +server.js, export a POST function that reads the request body. For example: export async function POST({ request }) { const data = await request.json(); // Process data here return new Response(JSON.stringify({ received: data }), { headers: { 'Content-Type': 'application/json' } }); } This lets the server receive JSON data from the client and respond accordingly.

Result

The server echoes back the data sent by the client in the POST request.

Understanding how to read request bodies unlocks the ability to build forms, APIs, and interactive features.

4

Intermediate

Using Request Parameters and URL Matching

🤔Before reading on: do you think server routes can access parts of the URL like IDs or names? Commit to your answer.

Concept: Learn how to capture dynamic parts of the URL in server routes using folder and file naming conventions.

SvelteKit lets you create dynamic routes by naming folders or files with square brackets. For example, a folder named [id] matches any value in that part of the URL. Inside +server.js, you can access this parameter: export function GET({ params }) { return new Response(`ID is ${params.id}`); } Visiting /123 will respond with 'ID is 123'.

Result

Server routes can respond differently based on URL parameters.

Knowing how to use URL parameters makes your server routes flexible and able to handle many similar requests with one file.

5

Intermediate

Organizing Multiple HTTP Methods in +server.js

Concept: Learn how to handle different HTTP methods like GET, POST, PUT, DELETE in one +server.js file.

You can export multiple functions in +server.js, each named after an HTTP method. For example: export function GET() { return new Response('GET response'); } export function POST() { return new Response('POST response'); } SvelteKit calls the right function based on the request method, letting you handle many actions in one place.

Result

Your server route can respond differently to GET and POST requests at the same URL.

Understanding this pattern helps you build RESTful APIs and organize server logic cleanly.

6

Advanced

Using Request Event for Advanced Control

🤔Before reading on: do you think the server route functions can access cookies, headers, and locals? Commit to your answer.

Concept: Learn about the request event object that gives access to request details, cookies, headers, and server-side locals.

Server route functions receive a single argument called event. It contains useful info: - event.request: the full request object - event.params: URL parameters - event.cookies: read and set cookies - event.locals: data shared during the request lifecycle Example: export function GET(event) { const user = event.locals.user; return new Response(`Hello ${user}`); } This lets you build personalized and secure responses.

Result

You can access and manipulate request details beyond just the body and URL.

Knowing about the event object unlocks powerful server-side features like authentication and session handling.

7

Expert

Server Routes and Edge vs Node Environments

🤔Before reading on: do you think server routes run the same way everywhere? Commit to your answer.

Concept: Understand how server routes behave differently depending on the deployment environment, like edge functions or Node.js servers.

SvelteKit can deploy server routes to different environments: - Node.js servers support full Node APIs and long-running processes. - Edge functions run closer to users with limited APIs and faster cold starts. This affects what you can do inside +server.js. For example, some Node modules may not work on the edge. You must write routes compatible with your target environment.

Result

You write server routes that work efficiently and correctly depending on where they run.

Understanding environment differences prevents bugs and performance issues in production.

Under the Hood

When a client sends a request to a SvelteKit app, the framework matches the URL to a folder with a +server.js file. It then calls the exported function matching the HTTP method (GET, POST, etc.) inside that file. This function receives an event object with request details. The function returns a Response object, which SvelteKit sends back to the client. This process happens on the server, separate from the client-side code, enabling secure and efficient data handling.

Why designed this way?

SvelteKit uses file-based routing to keep server logic simple and intuitive, matching URLs to files like pages. Exporting functions for HTTP methods follows web standards, making it easy for developers to write familiar code. This design avoids complex configuration and keeps server and client code organized. Alternatives like centralized routing tables were rejected for their complexity and less clear structure.

Client Request
    │
    ▼
┌───────────────┐
│ URL matches   │
│ folder with   │
│ +server.js    │
└───────────────┘
    │
    ▼
┌───────────────┐
│ Call exported │
│ function for  │
│ HTTP method   │
└───────────────┘
    │
    ▼
┌───────────────┐
│ Function      │
│ processes     │
│ request       │
└───────────────┘
    │
    ▼
┌───────────────┐
│ Returns       │
│ Response      │
└───────────────┘
    │
    ▼
Client receives response

Myth Busters - 4 Common Misconceptions

Quick: Do server routes run in the browser or on the server? Commit to your answer.

Common Belief: Server routes run in the browser just like Svelte components.

Reality: Server routes run only on the server, never in the browser.

Why it matters: Thinking server routes run in the browser leads to confusion about security and data handling, causing bugs and unsafe code.

Quick: Can you use client-only APIs like localStorage inside +server.js? Commit to yes or no.

Common Belief: You can use browser APIs like localStorage inside server routes.

Reality: Server routes run on the server where browser APIs do not exist.

Why it matters: Using browser-only APIs in server routes causes runtime errors and breaks your app.

Quick: Do you think you must write separate files for each HTTP method? Commit to yes or no.

Common Belief: Each HTTP method requires a separate +server.js file.

Reality: You can export multiple HTTP method functions in the same +server.js file.

Why it matters: Misunderstanding this leads to unnecessary file clutter and harder maintenance.

Quick: Do you think server routes always have access to full Node.js APIs? Commit to your answer.

Common Belief: Server routes always have full Node.js capabilities regardless of deployment.

Reality: Server routes running on edge environments have limited APIs compared to Node.js servers.

Why it matters: Ignoring environment limits causes deployment failures and unexpected bugs.

Expert Zone

1

Server routes can share data during a request lifecycle using event.locals, enabling complex workflows like authentication without global state.

2

The Response object returned by server routes supports streaming, allowing efficient handling of large data or progressive responses.

3

You can set cookies and headers directly in server routes to control client behavior, caching, and security policies.

When NOT to use

Avoid using server routes for purely client-side UI updates or animations; use Svelte components instead. For heavy data processing or long-running tasks, consider background jobs or external APIs rather than blocking server routes.

Production Patterns

In production, server routes often serve as API endpoints for frontend components, handle form submissions securely, and implement authentication flows. Developers use middleware-like hooks to add logging, error handling, and security checks around server routes.

Connections

REST API Design

Server routes implement RESTful endpoints by mapping HTTP methods to actions.

Understanding server routes helps grasp how REST APIs work, enabling you to build scalable web services.

HTTP Protocol

Server routes respond to HTTP requests using standard methods and status codes.

Knowing HTTP basics clarifies how server routes communicate and handle errors effectively.

Restaurant Order System

Both involve receiving requests, processing them, and delivering responses.

This cross-domain connection shows how asynchronous request handling is a common pattern in many systems.

Common Pitfalls

#1 Trying to use browser-only APIs like localStorage inside +server.js.

Wrong approach:

export function GET() {
const token = localStorage.getItem('token');
return new Response(token);
}

Correct approach:

export function GET() {
// localStorage not available on server
return new Response('No localStorage on server');
}

Root cause:

Confusing client-side environment with server-side environment.

#2 Not returning a Response object from server route functions.

Wrong approach:

export function GET() {
return { message: 'Hello' };
}

Correct approach:

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

Root cause:

Misunderstanding that server routes must return a Response instance, not plain objects.

#3 Creating separate +server.js files for each HTTP method unnecessarily.

Wrong approach:

Folder structure:
/myroute/GET/+server.js
/myroute/POST/+server.js

Correct approach:

Folder structure:
/myroute/+server.js

Inside +server.js:
export function GET() { ... }
export function POST() { ... }

Root cause:

Not knowing that multiple HTTP methods can be handled in one file.

Key Takeaways

Server routes in SvelteKit let you handle HTTP requests on the server by exporting functions named after HTTP methods inside +server.js files.

These routes run only on the server, separate from client-side code, enabling secure data handling and dynamic responses.

You can access request details like URL parameters, headers, cookies, and body through the event object passed to route functions.

Server routes can handle multiple HTTP methods in one file, making it easy to organize RESTful APIs.

Understanding deployment environments like Node.js and edge functions is crucial to writing compatible and efficient server routes.