如何在大量使用React Hooks时充分利用Next.js的SSR特性？

我最近在参与一个基于Next.js的前端项目，想尽可能发挥它的SSR能力，同时也需要用到客户端数据获取的方式。官方文档提到组件中使用React Hooks会触发客户端渲染，但对这种行为在DOM树中上下游组件的影响描述很少。

我通过创建包含有无React Hooks的组件的站点，分别在Chrome启用和禁用JavaScript的情况下测试SSR/CSR行为，有了一些发现，想确认我的假设是否正确：

• 使用Hooks的组件和普通React组件表现一致：当父组件的Effect或State Hooks触发重新渲染时，其子组件也会跟着重渲染。这类组件似乎无法从SSR中获益，应该用React.memo这类React特性做优化。
• 禁用JavaScript打开站点时，所有组件都是预渲染完成的——哪怕是使用State并展示状态的组件，也会显示Hook中设置的初始状态。比如下面这个组件：

export const TestComponent = () => {
  const [num, setNum] = useState(13)
  return (
    <div>
      <button onClick={() => setNum(num+1)}>CLICK</button>
      <h2>Number: {num}</h2>
    </div>
  )
}

实际会显示文本Number: 13（不过没有JavaScript时按钮无法正常工作）

另外我还想了解：使用全局Context Provider会在多大程度上削弱SSR带来的性能提升？假设我的_app.jsx将每个页面包裹在一个会定期查询API的Provider中，这是否会完全抵消SSR的优势，因为它可能会导致整个页面重新渲染？

内容的提问来源于stack exchange，提问作者p-sad