New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More

@midudev/react-dynamic-rendering

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@midudev/react-dynamic-rendering

Dynamic Rendering allows you to render React components different depending on user agent. If your visitor is a bot, like GoogleBot or Yandex, use Server Side Rendering + hydration. If your visitor is a real user, use only Client Side Rendering.

  • 1.0.5
  • latest
  • npm
  • Socket score

Version published
Weekly downloads
1
Maintainers
1
Weekly downloads
 
Created

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

FAQs

Package last updated on 29 Apr 2020

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts