Hi guys, been using the growth book at my org for ...
# announcements
s
Hi guys, been using the growth book at my org for the last few months and am quite amazed by its ease of use from a developer's perspective. I just wanted to know if there should also be sections in docs specified on how to use it in an SSR context, especially with frameworks like Next.js and Remix. ? The reason is, that I think it might help developers take the right approach based on their framework type. Considering the docs show the usage strictly on client which is not very suitable due to flickering/CLS/ blocking UI and that can be avoided easily if you have SSR react in some way... Maybe we can add a section in the context of the SSR application where essentially we do the same but on the server data fetcher logic and still pass the features list to the provider. One possible way in Next.js specific could be something along the lines of
Copy code
export const getServerSideProps= async ()=>{
 const gbFeatures= await fetchGrowthbookFeatures();

 return {
  gbFeatures
 }

}
On my
_app.tsx
I did something or of sort
Copy code
const growthbook = useMemo(()=>{
 return new Growthbook({
    features: pageProps?.gbFeatures?.features,
     attributes: ....// we can set them here as well
 })
},[pageProps])
Copy code
useEffect(()=>{
  if( pageProps?.gbFeatures) return ;  // since SSR handled it

fetch('apiendpoint').then()//// the usual client approach as per doc
 
},[growthbook, pageProps?.gbFeatures?])
Copy code
<GrowthbookProvider growthbook={growthbook}>{children}</GrowthbookProvider>
Any thoughts on this? Happy to contribute and raise a PR..
f
Hi Abhushan, Thanks! Yes, SSR can get a bit tricky, do you want to add something to the documentation? I saw Theo made this for Remix: https://github.com/TheoBr/growthbook-remix - though I haven't had a chance to look at it.
s
Hey Graham, yes, I would love to write something up around this. And yes, it was actually inspired by his remix repo only (how the managed to pass the list from SSR logic to provider), I thought it was quite a smart way and easy way to achieve this and could be ported to Next.js as well along the same lines.... Will try to raise a PR by weekend 😃
🙌 1
f
that would be great
🎉 1
👍 1