1

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.

moonvader
  • 19,761
  • 18
  • 67
  • 116
  • 1
    seems that problem was in prerendering, solved it by prerender disable with `export const prerender = false;` in routes/someroute/[slug]/+layouts.ts but would like to hear other ideas – moonvader May 27 '23 at 17:18

0 Answers0