Sharing API request logic between native and web with SEO in mind

[thecaffeinatedengineer]

Hi @nandorojo !

Great work on the library, currently checking it out for a proof of concept. It's amazing.

I have a question regarding reusing api request logic between native and web. Let's say you have a ecommerce backend API with products being added / updated every minute.

If I wanted to build a Product Page with SEO in mind, normally in Next.js, I would use Incremental Static Regeneration to fetch the product details from an API before rendering the page.

How should I approach sharing that logic between native and web ?

This is my approach

solito-app/packages/app/features/product/ProductScreen.tsx - which is just shared UI code to render the Product Details

solito-app/apps/next/pages/product/[id].tsx - which will house the above ProductScreen on web

solito-app/packages/app/navigation/native/index.tsx - in NativeNavigation I added a Screen in the stack which uses the ProductScreen as the component.

What I want to achieve basically is use the same logic to fetch the product details and ALSO still use the same ProductScreen on both web and native.

What I've come up with so far is having a useEffect in the shared ProductScreen which checks if platform is web and then fetches the product details using a shared hook. The same hook will be used in my getStaticProps and getStaticPaths on web so that I'm not completely repeating myself.

Is there a better way to achieve this ?

Thanks

[nandorojo]

there are some simple ways with clients like SWR. Just make the product screen optionally receive a product prop, which you use as the initialData field in SWR. On Web, statically fetch the data, and pass it as a prop to the screen so it has the data on first render.

as for SEO, see this guide: https://www.dripsy.xyz/get-started/web/seo

[thecaffeinatedengineer]

Amazing, thank you for the quick response.