I have external API and I'm working on SvelteKit website to present data from that API, I chose Cloudflare Pages for deployment.
As I want to hide token used for accessing API, I can't use static pages. So this is how my code looks like
// svelte.config.ts
import adapter from '@sveltejs/adapter-cloudflare';
import { vitePreprocess } from '@sveltejs/kit/vite';
/** @type {import('@sveltejs/kit').Config} */
const config = {
preprocess: vitePreprocess(),
kit: {
adapter: adapter({
routes: {
include: ['/*'],
exclude: ['<all>']
}
})
}
};
export default config;
--
// routes/someroute/[slug]/+page.server.ts
export const load = (async ({ params }) => {
const fetchedData = await API_CALL_WITH_CREDENTIALS....
let result = {
fetchedData: fetchedData
}
if (result) {
return result;
}
throw error(404, 'Not found');
}) satisfies PageServerLoad;
--
// routes/someroute/[slug]/+page.svelte
<script lang="ts">
export let data;
$: fetchedData = data.fetchedData;
</script>
{#if fetchedData}
{#each fetchedData as item}
<div>....</div>
{/each
{if}
--
When I run my code localy with vite dev
everything working as expected, when I make changes to database records and update the page, data is updated.
When I build code to deploy it to Cloudflare with vite build
I see __data.json
files (with cached API responses) located in .svelte-kir/cloudflare/
subfolders for routes, when I make changes to database records and update the page, I got old data.
(For current proof of concept purpose I am manually uploading .svelte-kir/cloudflare/
folder to make new deployment instead of doing git pushes)
It seems that I'm doing something wrong, I want my website's content to be dynamic, maybe I should change deployment type or make some changes to cache configuration? As I understand Cloudflare Pages are made for static content only so I need to move dynamic fetching somewhere else.
Detailed answer is appreciated.