Lazy component as async component

[lthi747]

I am currently researching and try to do a server side rendered small site that need to fetch data from database server.
Rendering is entirely on server, and I am bit stuck because the only way to do data fetching must be moved in my controller, which is not bad but need to do some repeating job. Also I am not using framework, just fastify with renderToStringAsync().

I am bit stuck with that data fetching and the usage of Suspense and Lazy

Since I cannot do

export async function DynamicContent(props) {
	const data = await fetchData();
	return <div> {/* do something with the data */} </div>
}

I found a workaround with

export const DynamicContent = (props) =>  {
	
	const ProxyComponent = lazy(async () => {
		const data = await fetchData();

		return {
			default: (props) =>  <div> {/* do something with the data */} </div>
		}
	});

	return (
		<Suspense fallback="">
			<ProxyComponent {...props} />
		</Suspense>
	);
}

My question is how reliable is this approach, is it OK to use in that way and is there better way?

[rschristian]

Wrapping each data fetch in lazy & <Suspense> probably isn't ideal.

If you can't get away with hoisting your data fetching out of the component (though you should really try to, this is absolutely the best option by a huge margin), you can look at using suspense for your data fetching. I have a little example here that does this which may be useful.