[QUESTION] How to avoid hydration for static content

We recently switched from React to Preact and one of the things that we miss in performance is that with React we had a hack to avoid Hydration for static content.

I had this code (Suggested on https://github.com/facebook/react/issues/10923#issuecomment-338715787):

<StaticContent><MyStaticComponent /></StaticContent>

import { createElement, useRef, useState, useEffect } from 'react'

function useStaticContent() {
  const ref = useRef(null)
  const [render, setRender] = useState(typeof window === 'undefined')

  useEffect(() => {
    // check if the innerHTML is empty as client side navigation
    // need to render the component without server-side backup
    const isEmpty = ref.current.innerHTML === ''
    if (isEmpty) {
      setRender(true)
    }
  }, [])

  return [render, ref]
}

export default function StaticContent({ children, element = 'div', ...props }) {
  const [render, ref] = useStaticContent()

  // if we're in the server or a spa navigation, just render it
  if (render) {
    return createElement(element, {
      ...props,
      children,
    })
  }

  // avoid re-render on the client
  return createElement(element, {
    ...props,
    ref,
    suppressHydrationWarning: true,
    dangerouslySetInnerHTML: { __html: '' },
  })
}

However, in Preact this hack is not avoiding the hydration… Is there another way to do it? 👏

[JoviDeCroock]

Hmm in a real SSR scenario this shouldn’t happen but yes I can see why this happens in this test, I’ll see if I can do something about it

[aralroca]

Thank you @JoviDeCroock and @developit ! I just reported yesterday and today is already fixed! This is incredible and I feel very happy with the change to Preact ecosystem.