How to use load but only at build time

[josefaidt]

Hi team I looked through the issue list and didn't see an already opened/closed issue that seemed relevant. Really enjoying the DX of svelte-kit so far!

I'm using the Vercel adapter and am looking to use the page load function to pull in static blog posts from markdown files at build time from a dynamic route. So far I've set the following

<script context="module">
  // src/routes/posts/[slug]/index.svelte
  export const prerender = true
  export const hydrate = false

  /**
   * @type {import('@sveltejs/kit').Load}
   */
  export async function load({ page, fetch }) {
    const { slug } = page.params
    const post = await (await fetch(`/posts/${slug}.json`)).json()
    return {
      props: { post },
    }
  }
</script>

This works okay, however this post is nested inside several layout files, where in the top-level layout file we're adding interactive features like a theme toggle, or a "now playing" section that pulls from Spotify. Now if I were to deep link to a post page the interactive features like the toggle do not work.

Is it possible to pull this purely static data into the page without removing the interactivity from parent layouts -- almost like a static fragment inside the interactive page? I'm considering moving back to the static adapter to help not expose endpoints, but curious to hear from the team.

[benmccann]

Thanks. I agree with what you're saying. We've talked about this before amongst the maintainers that we'd like to have different hydration modes with one to handle static content. I'm not sure there's really an open issue for this, but it is something we're thinking about in Svelte core. Probably the closest performance improvement to getting implemented is something along the lines of sveltejs/svelte#4308

[janosh]

We have several use cases for a build-time only load function as well. Would be a great feature!

[hdoro]

A parallel feature would be enabling load functions solely on the server side, described in #1922

Glad to close the issue and concentrate the discussion here if applicable :)

[CheapSmokes]

Was any progress made on this?

I have so many cases where a built-time only load function would be really handy but not entirely sure how to get something like that running using adapter-static at this point in time.

[JessiePBhalerao]

Here is an implementation that does allow some build-time using a config preprocess: [https://franknoirot.co/posts/svelte-build-time-data-preprocessing/]. As is, it works, but only if there are no other variables or imports in the script tag that handles loading the build-time data, e.g.

<script role='build-vars'> let buildTime = 'buildTime.js' </script>

[Rich-Harris]

Our current thinking on this is that endpoints themselves should be prerenderable — in other words, as the prerenderer crawls your app, if it hits /posts/foo, it will prerender /posts/foo.json (or /posts/foo/__data.json, if you're using a page endpoint), even if the /posts/foo page is not itself prerenderable (because there's other dynamic stuff going on).

In that case, load would still be executed at runtime, but the data would be served as a static asset instead of being dynamically rendered.

I'm going to close this in favour of #4093, which tracks prerenderable endpoints.