Disable CSR for specific components

[ottomated]

Describe the problem

If I have a large component that I know will be static, like this:

<script>
  const episodes = [{name: 'foo', length: '10:00'}, /* ... 100 more episodes */];
</script>

<ul>
  {#each episodes as episode}
    <li>{episode.name} - {episode.length}</li>
  {/each}
</ul>

I don't want the large array to be included in my js bundle if it's never going to change from when my page is rendered.

Describe the proposed solution

I want to be able to add this:

<svelte:options static={true} />

to hint to svelte that it can prerender my markup and render the whole component to a static template.

Importance

nice to have

[7nik]

Maybe the remote function prerender will be possible to use for it 🤔

[ottomated]

prerender just inlines the data fetching step afaik, it wouldn't prerender the whole component

[7nik]

It rather caches its results forever. So it should be possible to render the component once and re-use the output.

[Ocean-OS]

You could just compile to SSR and run render to get the component body, head and styles

[ottomated]

You could just compile to SSR and run render to get the component body, head and styles

I mean, yes? I could just write raw html, too, but that wouldn't integrate well with a full sveltekit app either.

[Ocean-OS]

Can't you just use export const prerender = true in SvelteKit then?

[paoloricciuti]

Can't you just use export const prerender = true in SvelteKit then?

That's for a whole route tho...I think something like this could help especially because in sk you also need to send all that data for hydration.

[Ocean-OS]

Would this be integrated into Svelte or SvelteKit tho? I could see this being in both, but stuff like data props makes me think it'd be better in Kit (or Kit could find some way to convert the option to prerender = true before compiling, or warn if the option is included in a +page.svelte)

[paoloricciuti]

Yeah it would probably be kinda both: svelte should probably change the client code to basically be a noop (just keeping hydration in check probably) and svelte kit by not sending down the data for those components

[Thiagolino8]

Yeah it would probably be kinda both: svelte should probably change the client code to basically be a noop (just keeping hydration in check probably) and svelte kit by not sending down the data for those components

Or keep the client code as a function that returns a static string basically, since the component can be rendered conditionally

But how would it work with components that render props (or any external value), or that pass props to other components, or create contexts?

[Thiagolino8]

I feel like trying to develop the details of this will just invent Svelte Server Components

[ottomated]

But how would it work with components that render props (or any external value), or that pass props to other components, or create contexts?

This would all be restricted – static components couldn't define state or context, couldn't accept props, and could only render other static components.

[Thiagolino8]

This would all be restricted – static components couldn't define state or context, couldn't accept props, and could only render other static components.

With this amount of restrictions it is easier to render in a remote function with prerender, return the body and render as raw html