SSR result packing and hydration

typically ssr frameworks (next, nuxt, remix, etc) will transfer data from backend to frontend in json format passing klevufetch result object to frontend won't work as it is filled with functions that help the usage of results there is an option to just pass raw json with result apiresponse and build your logic on top of that if you wish to keep using helper functions provided in results you can use klevupackfetchresult() function to pack result like const result = await klevufetch(search("hello world")) const datatotransferfrontend = klevupackfetchresult(result) and then you can hydrate it in frontend with klevuhydratepackedfetchresult() function const resultobject = klevuhydratepackedfetchresult(datatotransferfrontend, \[ search("hello world"), ]) it's important to note that the second parameter of klevuhydratepackedfetchresult() has to be the same as in backend call you can create query functions in a separate file that can be called both in frontend and backend for example // file myquery ts // a bit more compilicated query search term can be read in backend // from request parameters and in frontend it could be in url parameters const myquery = (searchterm string, manager filtermanager) => \[ search( searchterm, {}, listfilters(), applyfilterwithmanager(manager), boostwithkeyword({ keyword "foobar", weight 1 2 }) ), suggestions(searchterm), ] // file backend ts // in backend manager is not used to set anything so it can be just instanciated as param const result = await klevufetch(myquery("hello world", new filtermanager())) const datatotransferfrontend = klevupackfetchresult(result) // file frontend ts // in frontend we usually want to change and set filters with manager so it's used as separate variable const manager = new filtermanager() const resultobject = klevuhydratepackedfetchresult( datatotransferfrontend, myquery("hello world", manager) ) console log(manager options) example of using this technique can be found from shopify hydrogen example in here