禁用水合/仅部分水合Next.js应用

是否可以在Next.js中强制实施仅SSR模式,并且仅使页面部分水化?我的意思是说,我有这个应用程式:

组件/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>
);

现在假设我们正在使用渲染pages/index.jsxNext.js因此它将在服务器上渲染并在客户端上完全混合。出于性能方面的考虑(缩小捆绑包大小,减少执行时间),并让应用更好地与广告一起播放(😒),我只想DynamicComponent在客户端上添加,最多只能将JavaScript加载DynamicComponent到客户端上。

尽力做到

  • 反应吗
  • Next.js?

谢谢