CODEWITHSUNDEEP
sveltekit
Pablo L
Pablo L

Reputation: 1455

How to do dynamic routing (/path/[slug]/+page.svelte) when using adapter-static, prerender and ssr?

Context

I'm building an app that is served by a static web server and fetches data calling a backend api from the client. It's a sveltekit 2 app and I'm using import adapter from '@sveltejs/adapter-static'; and export const prerender = true; This is a design goal, I want the full site to be created at build time and I want to be able to fully serve it without a node backend.

Current state

In the app each user has a public profile page. To be able to render different data for each user, the route is as follows /profile?username={some-username} then in onMount I either get some profile data from a store or I call a backend endpoint to retrieve it. This works fine, you change the username in the queryparams and you get the same page with different user data.

What I want to achieve

I find using queryparams a bit ugly and I rather use /profile/{username}, so I would like to keep the current app behaviour but change how the url path looks. After several tries I'm unable to make it work.. so Im not sure if it's at all possible. In the docs it says:

https://kit.svelte.dev/docs/page-options#prerender-when-not-to-prerender Note that you can still prerender pages that load data based on the page's parameters, such as a src/routes/blog/[slug]/+page.svelte route.

So I still have some hope, but after saying that it does not explain how to do it. I tired setting up a fallback page, but even with this when I go to /profile/{some-username} I get a 404.

Note: loading the data using load() on build time is not an option as I don't have it all before hand.

Any guidance will be appreciated.

Upvotes: 2

Views: 1559

Answers (1)

brunnerh
brunnerh

Reputation: 185200

You cannot pre-render routes with parameters unless all parameters are known at build time.
The parameters either have to be discovered through links at build time or via an entries page option.

If the possible routes are not known, you need

The server should return the fallback with a 404 status, but the client-side code shows the correct route and you can use $page.params to load the data.

Upvotes: 5

Related Questions