useAlgoliaRecommend for SSR

[MickL]

It seems like useAlgoliaRecommend() is not working on SSR:

<script setup lang="ts">
    const { result, get } = useAlgoliaRecommend<AlgoliaProduct>();
    await get({ ... });
<script>

<template>
   {{ result }}
</template>

I get the error:

(void 0) is not a constructor
    at @algolia/recommend/dist/recommend.esm.browser:226:31
    at new Promise (<anonymous>)

[nuxt] Failed to stringify dev server logs. Received DevalueError: Cannot stringify arbitrary non-POJOs. You can define your own reducer/reviver for rich types following the instructions in https://nuxt.com/docs/api/composables/use-nuxt-app#payload.

For useAlgoliaSearch there is useAlgoliaSearchAsync. Can we have the same for useAlgoliaRecommend()?

Motivation: For SEO purposes I want to display the recommendations right away and not lazy in the browser. For example by use of Sistrix I realized that all my products only have exactly one link referencing it (from the product overview).

[Baroshem]

Hey @MickL Thanks for creating this issue!

I can totally see the use case for it!

Would you be interested in creating a Proof of Concept PR with it? :)

[MickL]

@Baroshem Unfortunately I dont have the time and the knowledge for this. Btw. I already made a PR to fix #201 in july but it never got merged.

[MickL]

Any update on this? :)

[MickL]

@Baroshem I was trying to use useAsyncData() as the docs show for useAlgoliaSearch() but it doesnt work on SSR, only on client. On SSR data is always undefined... Maybe you have an idea why?

const { result, get } = useAlgoliaRecommend<AlgoliaProduct>();

const { data } = await useAsyncData('ssr-recommend-results', () => get({
  queries: [
    {
      indexName: 'products',
      model: 'related-products',
      objectID: props.productId,
    },
  ],
}));

It throws:

(void 0) is not a constructor

[MickL]

I ended up ditching @nuxtjs/algolia in favor of just adding algoliasearch myself which also gives me more flexibility. Full example is here: #219 (comment)