You should mentioned what you listed after the word try_files. Here's what I ended up using that seemed to work: try_files $uri $uri/index.html $uri.html /index.html; The /index.html at the end needs to match the fallback: 'index.html' part of your adapter-static config. Otherwise going directly to a route that doesn't have a matching file at that path -- such as any route with a dynamic param like [id] -- will result in a 404.

export const load: Load = async ({ page, session }) => { if (!isPublic(page.path) && !isAuthenticated(session)) { console.log('Unauthorized access to private page'); return { redirect: '/', status: 302 }; } else { console.log('Auth OK'); } return {}; };

In hooks.js I have a handle function that basically does request.locals.jwt = cookies.jwt, and then a getSession function that returns { jwt: locals.jwt }

It has many advantages but the main reason for me is that it simplifies your front end code. It's not perfect by any means, but overall its cons are worth it IMO.

SSR is used for pages as well, but prerendering means that rendering happens at build time instead of when a visitor visits the page.

import { goto } from '$app/navigation'; function routeToPage(route: string, replaceState: boolean) { goto(`/${route}`, { replaceState }) } replaceState == true will replace the route instead of adding to the browser history. So, when you click back, you will not go back to the route you came from.

while with server/externalFetch there is no direct way to pass cookie headers from the original request to the external one

Right now I am working around this issue by having an internal [...api].js, then call fetch for that endpoint (which automatically passes on cookies) and from there hit the actual external endpoint. It works, there is no risk of leaking anything, but imo shouldn't be necessary.

Sure you can abuse session but I don't like that since there is the risk of exposing credentials to client side code.

I am currently circumventing this issue by using getSession to have access to the cookies/headers in the load method

This function allows you to modify (or replace) a fetch request for an external resource that happens inside a load function that runs on the server (or during pre-rendering). For example, your load function might make a request to a public URL like https://api.yourapp.com when the user performs a client-side navigation to the respective page, but during SSR it might make sense to hit the API directly (bypassing whatever proxies and load balancers sit between it and the public internet).

(load functions call handle directly, there's no intermediate network requests.)

If you return a Promise from load, SvelteKit will delay rendering until the promise resolves.

should run on the same domain as any upstream API servers requiring credentials

When fetch runs on the server, the resulting response will be serialized and inlined into the rendered HTML. This allows the subsequent client-side load to access identical data immediately without an additional network request.

I don't know how much workaround is it, but for now I'm using this approach:

would be different depending on whether the fetch is internal or external

export function get(req, res) { if (req.headers.authorization) { res.writeHead(200); res.end(JSON.stringify({ message: req.headers.authorization })); } else { res.writeHead(200); res.end(JSON.stringify({ message: 'unauthorized' })); } }

Closing as kit will be serverless first!

Allows you to use sapper with an API service residing in another server. This is especially useful if your API server is written in another language

We implemented isomorphic fetching (i.e. fetching with the browser's implementation on the client and node-fetch on the server)

if (parsed.protocol) { // external fetch response = await fetch(parsed.href, /** @type {import('node-fetch').RequestInit} */ (opts)); } else { // otherwise we're dealing with an internal fetch const resolved = resolve(request.path, parsed.pathname);

plus authorization if it's not explicitly provided, to a fetch request that happens inside load to an internal endpoint

This function runs on every request, for both pages and endpoints, and determines the response. It receives the request object and a function called resolve, which invokes SvelteKit's router and generates a response accordingly.

This allows you to modify response headers or bodies, or bypass SvelteKit entirely

import '@sveltejs/kit/install-fetch';

CSR asking my Python backed directly (over nginx). Basically, in my particular situation, I want to use most shorter paths for SSR or CSR cases when I have a separate API server under the same domain and nginx frontend.

on CSR it connects to the svelte-kit endpoint which just use a localhost connection. and to optimize this you can use unix sockets in your endpoints to connect to backend server

ah you are talking about a external api endpoint server? then you could use the svelte-kit endpoints as proxy handler

This looks cool but right now, let's say i have an external api which depends on users cookies, the cookies only gets send through internal sk endpoints while ssr even if its the same domain. Couldn't we pass the 'server' request to the serverFetch hook? I would currently have to patch package svelte kit to pass request headers to the external api or create an sk endpoint which proxies the request.