eastern-cyan•7mo ago

Refine and Server Components

Hello, is there any info regarding Refine and server components? I found this blog post: https://refine.dev/blog/react-server-components/#pros-and-cons-of-react-server-components It's very well written but it does not say anything about refine and server components. I searched in Discord but did not really find a lot. I know Refine does support Nextjs and Nextjs (i think 13+) does use server components. So how does that integrate with Refine and e.g. it's data providers? Some data providers use a axios instance to fetch. Can someone provide an overview of what's already supported, what's on the roadmap and what's outside of scope regarding Refine and server components? Thank you

An Intro to Server Components in React | Refine

We will discuss what React server components are as well as how to incorporate them into building applications.

3 Replies

kapa.ai•7mo ago

Hi @zomh. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Hmm, I don't know enough to give you a confident answer yet. The extracts provided do not contain specific information about the integration of Refine with React server components. While Refine does support Next.js and has extensive backend integrations, the specifics of how server components integrate with Refine and its data providers are not detailed in the provided extracts. For more detailed information, I would recommend checking out the official Refine documentation (https://refine.dev/docs/getting-started/installation) or reaching out to the Refine community for more specific guidance. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•7mo ago

<@240974567730970625> kapa.ai is still learning and improving, please let us know how it did by reacting below

eastern-cyan•7mo ago

I found some additional information here: https://refine.dev/docs/routing/integrations/next-js/#how-can-i-use-my-providers-in-the-both-server-and-client-side It basically says to simply await getData(). Remaining queston: Fetching in server components using Axios, i guess that is because of auth tokens?. However Nextjs documentaiton is recommanding their fetch. Can anyone shed some light regarding this? Here is some more information (don't know if its still up to date): https://github.com/vercel/next.js/discussions/51091

"There's no inherent difference here, other than, during server side rendering, you won't get optimizations from the fetch server side version.

Read on here: https://nextjs.org/docs/app/building-your-application/data-fetching/fetching#segment-cache-configuration

That being said, today, there's little reason to use axios over fetch. You can even use https://www.npmjs.com/package/wretch if you find the fetch API a bit awkward."

"There's no inherent difference here, other than, during server side rendering, you won't get optimizations from the fetch server side version.

Read on here: https://nextjs.org/docs/app/building-your-application/data-fetching/fetching#segment-cache-configuration

That being said, today, there's little reason to use axios over fetch. You can even use https://www.npmjs.com/package/wretch if you find the fetch API a bit awkward."

Nextjs docs: https://nextjs.org/docs/app/building-your-application/data-fetching/fetching-caching-and-revalidating#fetching-data-on-the-server-with-third-party-libraries Still looking for more information on this. So please contribute if you have some experience or info regarding this