What is the best practice: Filter fetched data

[m1rm]

Hello,
I am new to Svelte(Kit) and I understand that when carrying out a fetch "during server-side rendering, the response will be captured and inlined into the rendered HTML"

Coming from Nuxt3, I am used to the "pick" function I can apply when fetching data, which results in picking only the parts of the response I want to have (you pass the object keys to pick and your response object will only have the key-value pairs you specified by the passed keys).

Since I do not want to have big responses inlined in the HTML all the time, I came across hooks.server.js. It would work to return a new Response(JSON.stringify({stuff I picked from: "the actual response"})) per request (determined via if statements on the url.pathname) and I am wondering if that is the "correct SvelteKit way" to achieve my desired behaviour.

Thanks :)

[dritter]

This could be done in a server side fetch as described here:

In your +page.server.js just return a new object containing the data you want:

import { posts } from './data.js';

export function load() {
	// The "content" field is not included in the response..
	return {
		summaries: posts.map((post) => ({
			slug: post.slug,
			title: post.title
		}))
	};
}

Instead of transporting the data to the client side via a data attribute, the data will be inlined in the generated script tag of your component:

<script>
  {
    __sveltekit_dev = {
      env: {},
      base: new URL(".", location).pathname.slice(0, -1),
      element: document.currentScript.parentElement
    };

    // <---- Inlined data ahead ----->
    const data = [null,{"type":"data","data":{summaries:[{slug:"welcome",title:"Welcome to the Aperture Science computer-aided enrichment center"},{slug:"safety",title:"Safety notice"},{slug:"cake",title:"This was a triumph"}]},"uses":{}}];

    Promise.all([
      import("/node_modules/@sveltejs/kit/src/runtime/client/start.js"),
      import("/home/httpslearnsveltedev-hss2/.svelte-kit/generated/client/app.js")
    ]).then(([kit, app]) => {
      kit.start(app, __sveltekit_dev.element, {
        node_ids: [0, 4],
        data,
        form: null,
        error: null
      });
    });
  }
</script>

I am not sure if this is possible with an universal fetch.

[m1rm]

That is the thing, what I am looking for is an answer, if something like this (nuxt) exists for universal fetch in Svelte:

Full exemplary API response.json():

user: {
    id: 1,
    name: shiro,
    eyeColor: blue,
    infoInotCareAbout: 'Loves Cats',
    isHappy: false,
    couldFilter: false
}

fetchSomething({
    default: () => { return {} },
    pick: ['id', 'name', 'isHappy']
  })

And the response inlined by Svelte only contains only the 3 fields picked by key when fetching the data.