reactjs - 禁用 hydration/仅部分 hydration Next.js 应用程序

Question

是否可以在 Next.js 中强制执行仅 SSR 模式并且仅部分 hydration 页面？假设我有这个应用程序:

组件/dynamic.jsx

export default () => (
  <button onClick={() => console.log("I have been clicked")}>Click me</button>
)

pages/index.jsx

import DynamicComponent from "../components/dynamic.jsx";

export default () => (
  <div>
    <h1>Hello World</h1>
    <p>Lorem ipsum</p>
    <Hydrate>
      <DynamicComponent />
    </Hydrate>
  </div>
);

现在假设我们使用 Next.js 渲染 pages/index.jsx ，这样它将在服务器上渲染并在客户端上完全 hydration 。出于性能原因(缩小包大小、减少执行时间)并让应用程序更好地播放广告 (😒)，我只想在客户端上补充 DynamicComponent ，并且最多只加载 JavaScript DynamicComponent 到客户端。

这可能吗

• 有反应吗？
• Next.js？

谢谢

Answer 1

你可以通过 hack 来做到这一点:

<>
  <StaticContent>
    <h1>Hello World</h1>
    <p>Lorem ipsum</p>
  </StaticContent>
  <DynamicComponent />
</>

以及 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: '' },
  })
}

它无论如何都会加载 JavaScript，但不会重新执行它，即它不会对这些组件进行 hydration 作用。

更新:如果您使用 Next.js，最好使用 App folder已经支持服务器组件和客户端组件的部分 hydration 作用。