File Based Loading for Components

[rossrobino]

Static and Dynamic Content on the Same Page

Right now (please correct me if there are better approaches I could be using, or if this has already been considered before) there isn't a happy path to easily pre-render and server render on the same page. The best I have seen is to create a separate +server.js file and pre-render the api route and then call it in a +page.js file. It would be nice if there was an easy way to have static and dynamic rendering on the same page.

Separation of Data Fetching and Rendering

Also, it would be nice to tie data to a specific component. Say I have a component that renders content from an API on multiple different pages. I need to either make the API call in my +layout.js, which would then include the data on every page instead of just the ones using the component, or write a separate function I can import and use on multiple pages.

Say you need to make changes to a request to an API and modify how you are rendering the data. Currently you have to find the load function(s) you are making the request in, and then also edit the component that is rendering the data. These two pieces of code could exist in different places in your file structure. I tend to put components that are used on multiple routes in lib.

src
|-- lib
    |-- components
        |-- MyComponent.svelte
|-- routes
    |-- RouteOne
        |-- +page.js
    |-- RouteTwo
        |-- +page.js

Finally, you must return the data from your load function and pass it as a prop into the component.

The best way I've thought of to structure this currently would be to create a loading module next to the component to import and use in each +page.js that the component is used in. But this leads to using two imports in two different files to render the component to the page.

Alternatives

1. Tie Data Fetching and Rendering Time to Components

This is my favorite solution. In contrast to something like React Server Components, I really like the file based routing structure, if this was applied to components I think it could solve both problems.

src
|-- components
    |-- MyComponent
        |-- +component.svelte
        |-- +component.js
        |-- +component.server.js

If components could be authored like pages, this would tie the data loading to the component. Then this component could be imported on multiple pages. Also the rendering time could be specified by component allowing pre-rendered components to exist alongside server rendered ones.

No more passing data into the component as props, just export let data directly in the component which would clean up +page.svelte and +page.js files.

Maybe this could also allow caching by component as well, if the component is used on multiple pages but shouldn't be rerun.

2. Second Load Function

I remember Kevin bring this up on Svelte Society podcast one time and I thought it was a great idea--having a separate load function on each page for pre-rendering. I like this approach although it wouldn't solve for only loading the data on the pages where it is needed without having to write it in multiple +page.js files.

export const load = async () => {

}

export const prerender = async () => {

}

3. Second Load File

Similar to 2, but a separate file instead. Have a +prerender.js exist alongside pages that would return the data at build time.

---

I'm not sure how feasible any of this is, please let me know if there are other alternatives that already exist that I'm not considering. Thanks for reading, I really enjoy using SvelteKit as is and appreciate everyone working on this project.