Search code examples
sveltekitprerender

How to pass data from one page to another in prerendered app


I am building a SvelteKit/Tauri project along with a embedded SurrealDB database. For simplicity, lets say in this program, i am creating and editing books.

In the page /edit/book/+page.svelte i am being shown an overview of all my current books. From this overview, i can select a book by pressing the <a> tag. This tag sends me to the "slug" route /edit/book/[bookid], where book_id is the id of the selected book.

<!-- /routes/edit/book/+page.svelte -->
{#each books as book}
    <a href={`book/${book.id}`}> {book.name} </a>
    <div> {book.description} </div>
{/each}

For loading the rest of the data of the book, i use the id recieved from params to get the book from my database db. I then send the recieved data from db to the related +page.svelte.

<!-- /routes/edit/book/[book_id]/+page.ts -->
import { db_book as db } from "$lib/database/book.js";
export async function load({ params }): Promise<{ book: IBook }> {
    let book_id = params.book_id;
    let book = await db.getBook(book_id)

    return { book }
}

Now in the +page.svelte, i recieve all the data about the book, ready to visualize and edit in the actual editing page.

<!-- /routes/edit/book/[book_id]/+page.svelte -->
export let data;
$: ({ book } = data)

This approach works great in development, but it does not work to build this. The problem is when building a desktop app using Tauri, all pages needs to be prerendered (please correct me if i'm wrong!), and for all pages to be prerendered, all routes need to be known at compile/build time. Therefore, this approach won't work, as i'm using dynamic routing ([book_id]) with an unknown id at compile/build time.

I have looked at other methods of solving this, and i think there might be two possibilities:

  1. Specifying an 404 page (does this make it possible to have unknown dynamic routing?)

  2. Skipping dynamic routing as a whole.

With solution 2, i am stuck in solving the issue around the navigation of this: How can i go from one page (/edit/book) an send data along with the transfer from this page to another page (/edit/book/selected_book) without using slug? If i can do this, then i will be able to retrieve the selected book from the page itself.

There might be several solutions to this, and i'm interested in them all!


Solution

  • you need to enable fallback for dynamic routes to work. Check out this section of my blog post which explains how dynamic routing is handled in adapter-static: https://khromov.se/the-missing-guide-to-understanding-adapter-static-in-sveltekit/#Fixing_the_all_routes_must_be_fully_prerenderable_error