Get unlimited public & private packages + team-based management with npm Teams.Learn more »

@midudev/react-dynamic-rendering

1.0.4 • Public • Published

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 👨‍🏫

Just wrap the components you want to be static on the client.

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>
  )
}

Install

npm i @midudev/react-dynamic-rendering

DownloadsWeekly Downloads

2

Version

1.0.4

License

ISC

Unpacked Size

66.2 kB

Total Files

9

Last publish

Collaborators

  • avatar