@midudev/react-static-content

Static Content 📸

Server Side Rendering for a component and skip the hydration step on the client. Useful for components that don't need to use interactivity (like SEO links).

Results of using it

Benefits... 👍

• ⚡ Avoid re-hydrate for static components
• 🤳 Thus could greatly improve TTI

Downsides... 👎

• ⚠️ Lose interactivity
• 🏋️‍ Hydration data still there
• 🥪 Element wrapper (ex.
  )

  Keep in mind... 🧠

  • 📸 For expensive rendering lists or static content (SEO Footers)
  • 🤖 GoogleBot is definitely going to detect it

  ## How to use 👨‍🏫 Just wrap the components you want to be static on the client.

  import StaticContent from '@midudev/react-static-content'
  
  export default function SeoFooter({listOfLinks}) {
    return (
      <footer>
        <StaticContent>
          {listOfLinks.map((link, idx) => (
              <a key={idx} href={link.href} title={link.literal} />
                  <span>{link.literal}</span>
              </a>
          ))}
        </StaticContent>
      </footer>
    )
  }

  Resources 🔗

  Tweet about suppressHydrationWarning suppressHydrationWarning Pull Request Hack for avoiding hydration