Client-side data fetching patterns
Answered
Jumbo flying squid posted this in #help-forum
Jumbo flying squidOP
I'm curious what folks patterns are for fetching data server side and making it available in client components. I could fetch the data on the server component then pass it as a prop down to a client component. However, I'm wondering if we're able to server the client component pre-loaded with data fetched from the server without passing the data as a prop.
Answered by B33fb0n3
yea, in that case I would create a server component that fetches the data and pass it as props to the client component. Then the user directly sees the data and can still edit it in (the same) component
12 Replies
@Jumbo flying squid I'm curious what folks patterns are for fetching data server side and making it available in client components. I could fetch the data on the server component then pass it as a prop down to a client component. However, I'm wondering if we're able to server the client component pre-loaded with data fetched from the server without passing the data as a prop.
yes that's possible when using
With that option a html file is created when the first visit is there. Then the html is created and that html includes data from the server as well as server components and client component (filled with data from the server)
export const dynamic = 'force-static'With that option a html file is created when the first visit is there. Then the html is created and that html includes data from the server as well as server components and client component (filled with data from the server)
Jumbo flying squidOP
got it, is there a directive to have the data fetch code in the client component? or does this still depend on passing the server fetched data as props
you mean fetching data clientside every request maybe with some caching stuff in the background?
Jumbo flying squidOP
yeah kinda. I'd ideally like to keep certain data fetches coupled to the components that need them. But if its a client component, id like to have the data available on mount rather then mount -> fetch from client side
although not sure if thats really possible haha
yea, that's possible through prop drilling. For example fetching the recent post serverside and then push it via props to the clientcomponent
but keep in mind, to make only the functional parts of your website as client component ^^
for example the red parts can be client components and the green parts can be rendered serverside with the data from the server and only the button in this case is a client component
Jumbo flying squidOP
that makes sense. For the case of something like a form where we may want to pre-populate the data from the backend. Best bet is to pass it via props into the client component. We can't pre-fetch that data inside the client component so the data is scoped to that component
yea, in that case I would create a server component that fetches the data and pass it as props to the client component. Then the user directly sees the data and can still edit it in (the same) component
Answer