How to generate meta based on data hidden behind suspense?
Unanswered
American Bobtail posted this in #help-forum
American BobtailOP
I have a server component hidden behind
<Suspense> that fetches the data and then renders components based on that data. But then I also need to modify title and description of the page based on data (it's basically a list of items that are currently on sale and I want to specify that in the title of the document). So I'm wondering how can I do that if that component is being rendered deep down the react tree. I can load this data twice using fetch thanks to memoization, but then wouldn't loading data for metadata block the entire page from loading which effectively negates the benefits of html streaming? The only possible fix I can think of is instead of loading data is to make another request from metadata function that would quickly look into database and return boolean flag indicating whether there's data or not. Of course, it may be false on the first render and then change on subsequent requests. Is that the only way of making TTFB fast?1 Reply
@American Bobtail I have a server component hidden behind `<Suspense>` that fetches the data and then renders components based on that data. But then I also need to modify title and description of the page based on data (it's basically a list of items that are currently on sale and I want to specify that in the title of the document). So I'm wondering how can I do that if that component is being rendered deep down the react tree. I can load this data twice using fetch thanks to memoization, but then wouldn't loading data for `metadata` block the entire page from loading which effectively negates the benefits of html streaming? The only possible fix I can think of is instead of loading data is to make another request from metadata function that would quickly look into database and return boolean flag indicating whether there's data or not. Of course, it may be false on the first render and then change on subsequent requests. Is that the only way of making TTFB fast?
1. I like your pfp :)
2. The metadata is important for SEO purposes, and for most crawlers, they won’t see the data if it is hidden by a Suspense (since that requires JavaScript). Hence it’s a bad idea imo to put metadata behind Suspense.
What I would do in your case is to just not use Suspense at all – and accept to suffer some perf hit in return for metadata that crawlers can actually see. Optimise the db query and the server side functions, use the edge runtime, etc., so that the query is as fast as possible.
If you absolutely need faster pages, I would make a secondary fetch that only gets the exact data needed for metadata and nothing more (and runs faster than the main page fetch). Then I use that secondary fetch in metadata stuff and the main fetch in the page function. Note that this means the two fetches are not deduplicated.
2. The metadata is important for SEO purposes, and for most crawlers, they won’t see the data if it is hidden by a Suspense (since that requires JavaScript). Hence it’s a bad idea imo to put metadata behind Suspense.
What I would do in your case is to just not use Suspense at all – and accept to suffer some perf hit in return for metadata that crawlers can actually see. Optimise the db query and the server side functions, use the edge runtime, etc., so that the query is as fast as possible.
If you absolutely need faster pages, I would make a secondary fetch that only gets the exact data needed for metadata and nothing more (and runs faster than the main page fetch). Then I use that secondary fetch in metadata stuff and the main fetch in the page function. Note that this means the two fetches are not deduplicated.