2 replies

recommended pattern for sharing data from same api across multiple client components using approuter

after reading https://nextjs.org/docs/app/building-your-application/data-fetching/patterns and https://nextjs.org/docs/app/building-your-application/rendering/composition-patterns#sharing-data-between-components, I feel like I'm seeing two contradictory recommendations.
I initially would fetch data from a server component that would pass down the data two its two child client components and found that the json data, even though parsed in the server component shows up in the client components as strings, which means that I'd have to parse it yet again in the client components.

then I see that it might be discouraged to follow this pattern according to the second link and instead use nextjs's fetch, which may lead to something like this

useEffect(() => {
   fetch('http://api.example.com/api/foo').then(data => data.json()).then(parsed => setData(parsed))
}, []);

useEffect(() => {
   fetch('http://api.example.com/api/foo').then(data => data.json()).then(parsed => setData(parsed))
}, []);

in both client components that would use that same data since it would be cached. which pattern is actually recommended here?

Learn about common data fetching patterns in React and Next.js.

Recommended patterns for using Server and Client Components.

2 replies

useEffect(() => {
   fetch('http://api.example.com/api/foo').then(data => data.json()).then(parsed => setData(parsed))
}, []);

useEffect(() => {
   fetch('http://api.example.com/api/foo').then(data => data.json()).then(parsed => setData(parsed))
}, []);

in both client components that would use that same data since it would be cached. which pattern is actually recommended here?

Learn about common data fetching patterns in React and Next.js.

Recommended patterns for using Server and Client Components.