🔀
Dynamic Rendering If your visitor is a bot, like GoogleBot or Yandex, use Server Side Rendering and Client Side Rendering.
If your visitor is a real user, use Client Side Rendering.
Results of using it
👍
Benefits... -
✅ Improve TTI -
😴 Lazy Load for the user
👎
Downsides... -
🚩 Keep Hydration data -
👩🔬 Need universal User Agent data -
🤖 Bot still gets full cost
🧠
Keep in mind... -
🏋 ️ Perfect for stuff below the fold -
🆓 Free resources from your server -
⏳ Help GoogleBot to index your content faster
## How to use
import DynamicRendering from '@midudev/react-dynamic-rendering'
export default function DynamicRenderingPage({articles}) {
return (
<Grid>
{articles.map((article, idx) => (
<ProgressiveHydration key={idx} force={idx < 3}>
<Card {...article} />
</ProgressiveHydration>
))}
</Grid>
)
}