Nonlinear Performance Magnification

    @midudev/react-dynamic-rendering

    1.0.5 • 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

    1

    Version

    1.0.5

    License

    ISC

    Unpacked Size

    7.39 kB

    Total Files

    7

    Last publish

    Collaborators

    • miduga