Loading data server side/prerendered in a non page component?

[m1212e]

Hi, I was wondering how you would handle this scenario:

I have a complex search component, which offers many filtering options. When searched, it redirects to the results page. This component is used a few times throughout the app and is not an own page (no +page.ts available). I need to load the filter options from the back end. But I want to SSR, so when prerendering, the filter options are already set and don't need to be fetched client side.
I thought about passing down the filter options as props to that component, but that would end up in a lot of repetitive code since it's the same data every time and the component could take care of the fetching on its own very well and I want to avoid writing code to fetch the same data multiple times.

What I thought of (just a dream, maybe that totally not possible) would be a +page.ts like file for every component, or a server side fetch for every component, not just pages, which allow to do data fetching. When rendering the server checks what components need to be rendered, checks if they have load functions, runs all of them, bundles the results up and sends them back/prerenders.

Is something like this possible/planned? Did I overlook/not understand some docs?
Thank you very much!

[eltigerchino]

Create a +layout.server.ts file at the root of your application and return the data through the load function. This makes the data available to every page.

https://kit.svelte.dev/docs/load#layout-data

Then, use the page store to access that data directly in your search component without having to pass it in as a prop.

https://kit.svelte.dev/docs/load#$page-data