Server functions or which feature??
Hi all, I'm looking for some advice about which feature from tanstack start do I need for this use case.
1) I have a 1 page app. The main file I have is
$.tsx this file catches everything and fetch the content from our headless CMS, for example: /about-us in the browser will trigger an API call for the slug about-us.
2) The cms API response is basically an array of objects where each object has a type key to know which ReactJS component render, for example columns, text, banner, and so on.
3) One of these "cms components" is a FAQs section, around 80% of my pages have this component and I need to run some custom logic to enable/disable this query that's why my reactjs component uses useQuery instead of useSuspenseQuery, because not all pages need this component and even if they have it, not all of them will run the query.
I was thinking to add the logic + api call on my loader, but I don't want to overload my loaders. is this ok?
Even if I add it to my loaders, it needs to be conditionally, and if I do that, the component will need to use useQuery and not useSuspenseQuery.
What options do I have?
I'm thinking to play around with server functions.
My goal is to send all of the HTML from the server to avoid roundtrips and make it SEO friendly.
3 Replies
plain-purple•2mo ago
does your cms not give your initial call the contents of that faq block?
rival-blackOP•2mo ago
No, it gives me the IDS, I need to grab them and make the api call based on the ids I got
This happens because probably it's really nested. I had to create a helper fn to run it in the loader and it gives me an array of "faqs" and then based on that run the query if length is greater than zero. I hope this is the best way
Then I use useSuspenseQuery in the component and all good everything is SSR
plain-purple•2mo ago
i would resolve that server side?
1. get initial query
2. if has faq, transform. await resolve?
3. return complete payload out of loader (from within a serverFn)
4. render complete html?
i mean, you want your faq content to be seen in the first pass of the html that comes from the server right? not hidden behind client side only rendering?
because "seo"?