Integrating Dynamic and Static Content in SvelteKit with Cloudflare (partial prerendering)

[hjaber]

I'm seeking assistance with efficiently combining dynamic and static content in SvelteKit using Cloudflare's CDN. It seems like there is a way to accomplish this by a combination of using sveltekit's api routes, load(), and cloudflare's CDN

Challenges:

• Implementing export const prerender = true in +server.ts get() for dynamic content integration leads to extended build times for sites with numerous pages but has been the most promising

• Implementing CDN cache headers (cdn-cache-control) for both internal (relative URL /api/blog-post/) and external (absolute URL https://your-domain.com/api/blog-post) content leads to poorer performance than not using these cache headers at all.

• Cloudflare cache rules enable client-side navigation caching but fall short for SSR. Specific caching for routes like your-domain.com/blog-post* turns pages entirely static, which is problematic for dynamic elements (e.g., user avatars in navbars). Writing a rule that caches your-domain.com/blog-post/* will cache all client side navigations at https://your-domain.com/blog-post/__data.json?x-sveltekit-invalidated=01.

Demo (with 300ms artificial delay api): https://demo.tripcafe.org/benchmark
GitHub Repo: https://github.com/hjaber/sveltekit-cf-cache

+----------------------------------+
| [😊] Username           ▼        | <-- Dynamic (User-specific)
|----------------------------------|
| Blog Post Title                  |
|                                  |
| Lorem ipsum...                   | <-- Static Content
+----------------------------------+