ReactDOM.render(
  <App />,
  document.getElementById('root')
)

// SERVER SIDE simplified
const initialData = await getInitialData()
const html = ReactDOM.renderToString(
  <App initialData={initialData} />
)

res.send(`
  <div id='root'>${html}</div>
  <script>
    window.__INITIAL_DATA__ = ${JSON.stringify(initialData)}
  </script>
`)

// 🚇 middleware to activate Dynamic Rendering on Express
const BOTS_USER_AGENTS = [
  'googlebot',
  'mediapartners-google',
  'yandexbot'
]

const INDEX_HTML_PATH = path.join(__dirname, 'public', 'index.html')
const HTML_TEMPLATE = fs.readFileSync(INDEX_HTML_PATH, 'utf8')

module.exports = function middleware(req, res, next) {
  const rawUserAgent = req.get('user-agent')
  const userAgent = rawUserAgent.toLowerCase()

  // check if the request comes from a bot 🤖
  if (BOTS_USER_AGENTS.find(ua => userAgent.includes(ua))) {
    // if not an user, just use the normal behaviour (SSR?)
    return next()
  }

  // return index.html directly if is an user 👩‍💻
  return res.send(HTML_TEMPLATE)
}

// 🚆 Using the middleware in Express
const dynamicRendering = require('./dynamic-rendering')

// Use dynamic rendering for a specific path for testing
app.get(
    '/es/:op/:type/barcelona-capital/*',
    dynamicRenderingExperiment
)




// Isomorphic routes handler
app.get('*', serverSideRenderingMiddleware)

// ⚛️ Using <DynamicRendering /> component 
// userAgent must be retrieved universally
// on server and client

<DynamicRendering userAgent={universalUserAgent}>
    <a href='https://very-interesting-url.com'>
        <VeryComplexToComputeComponent />
        <img src='https://huge-image.com/panda.jpg'/>
    </a>
</DynamicRendering>

// ⚛️ <DynamicRendering /> ~"kinda" implementation

export default function DynamicRendering({ children, userAgent }) {
  // check if the userAgent is a bot
  const isBot = checkUserAgentIsBot({userAgent})
  // if isBot, we return in server and client the content
  if (isBot) return children

  // now, we're sure the user is NOT a bot
  // so check if we're on the browser side
  if (typeof window !== 'undefined') {
    return <LazyContent>{children}</LazyContent>
  } else {
    // so, we're on the server side or the component is disabled
    return <div style={{border: '1px solid red'}} />
  }
}

# npm
npm install @midudev/react-dynamic-rendering

# yarn
yarn add @midudev/react-dynamic-rendering

// ⚛️ <StaticContent /> usage
import StaticContent from './StaticContent'

function Footer () {
  return (
    <StaticContent>
      <HugeListOfLinks data={listOfLinks} />
    </StaticContent>
  )
}

// ⚛️ <StaticContent /> ~implementation
import React from 'react'

export default function StaticContent({children}) {
  // we're in the server, just render the content
  if (typeof window === 'undefined') {
    return <div>{children}</div>
  }

  // avoid re-render on the client
  return (
    <div
      dangerouslySetInnerHTML={{__html: ''}}
      suppressHydrationWarning
    />
  )
}

# npm
npm install @midudev/react-static-content

# yarn
yarn add @midudev/react-static-content

// ⚛️ How to use <ProgressiveRendering />

function ProgressiveHydrationUsage({articles}) {
  return (
    <Grid>
      <h1>Articles</h1>
      {articles.map(article => (
        <ProgressiveHydration key={article.id}>
          <Card {...article} />
        </ProgressiveHydration>
      ))}
    </Grid>
  )
}

// ⚛️ <ProgressiveRendering /> ~"kinda" implementation
function ProgressiveHydration({children}) {
  const ref = useRef(null)
  const isNearScreen = useNearScreen({ref})

  useEffect(() => {
    // CLIENT: If the element is near screen, then hydrate it
    if (isNearScreen) {
      ReactDOM.hydrate(children, ref.current)
    }
  }, [children, isNearScreen])

  // SERVER: Just render the content as usual
  if (typeof window === 'undefined')
    return <div ref={ref}>{children}</div>

  // CLIENT: Avoid hydration until we say so
  return (
    <div ref={ref}
      suppressHydrationWarning
      dangerouslySetInnerHTML={{__html: ''}}
    />
  )
}

<template>
  <div class="ArticlePage">
    <LazyHydrate when-idle>
      <ImageSlider/>
    </LazyHydrate>

    <LazyHydrate ssr-only>
      <ArticleContent :content="article.content"/>
    </LazyHydrate>

    <LazyHydrate when-visible>
      <AdSlider/>
    </LazyHydrate>

    <!-- `on-interaction` listens for a `focus` by default ... -->
    <LazyHydrate on-interaction>
      <CommentForm :article-id="article.id"/>
    </LazyHydrate>

    <!-- ... but you can listen for any event you want ... -->
    <LazyHydrate on-interaction="click">
      <CommentForm :article-id="article.id"/>
    </LazyHydrate>

    <!-- ... or even multiple events. -->
    <LazyHydrate :on-interaction="['click', 'touchstart']">
      <CommentForm :article-id="article.id"/>
    </LazyHydrate>
  </div>
</template>

# npm
npm install @midudev/react-progressive-hydration

# yarn
yarn add @midudev/react-progressive-hydration

// npm install react@experimental react-dom@experimental
import ReactDOM from 'react-dom'

// If you previously had:
//
// ReactDOM.render(<App />, document.getElementById('root'));
//
// You can opt into Concurrent Mode by writing:

ReactDOM.createRoot(
  document.getElementById('root')
).render(<App />)

@midudev/react-dynamic-rendering

@midudev/react-static-content

@midudev/react-progressive-hydration