什么是服务器端渲染？

服务器端渲染是一种在服务器上渲染应用程序以响应每个请求，然后将完整的 HTML 和 Javascript 返回给客户端的方法。首先，服务器处理所有必要的数据并运行 JavaScript。然后，它生成页面并将其作为一个整体发送给客户端。

这使得将动态组件作为静态 HTML 标记提供服务成为可能。每当索引无法有效解释 JavaScript 时，SSR 对搜索引擎优化 (SEO) 是有益的。当缓慢的 Internet 连接使下载大型 JavaScript 包变得很麻烦时，它也可能很有用。此外，如果您需要您的渲染页面是最新的，那么选择 SSR 将是理想的选择。

什么时候不使用服务器端渲染？

有时，您可能需要从 Next.js 页面或组件中选择退出 SSR。例如，集成仅在浏览器中运行的第三方库和模块，或者如果您的组件需要访问浏览器专有属性（如window object或localStorage不需要 SSR）。

此外，禁用 SSR 还有助于减少捆绑包中只有少数用户需要的巨大或资源密集型模块的大小。

对于非平凡的应用程序，SSR 的使用可能会有所不同，因为它需要更广泛的配置并对服务器施加更高的负载。此外，当有大量处理时，应用程序可能会变慢，因为客户端在发出请求后必须等待每个页面呈现。在这种情况下，禁用 SSR 将是更好的选择。

所以，在你的项目中是否使用 SSR 是个人喜好的问题，你必须根据情况在权衡之间做出决定。

  /** 列配置 */
  const tableColum = activeKey === 'tabDoctor' ? staffColumns : orgColumns

 <Table
    style={{ marginTop: 12 }}
    rowKey={(record, index) => `${record.id}-${index}`}
    columns={tableColum}
    scroll={{ x: 1000, y: tableHeight }}
    dataSource={dataSource}
 />

方法1

直接再使用的window && document 前置判断

if (typeof window !== 'undefined') {
  console.log('You are on the browser')
} else {
  console.log('You are on the server')
}

方法2 在组件入口判断

const isSSR = () => typeof window === 'undefined'; 

const HomePage = () => { 
   return ( 
     <Header /> 
       {!isSSR() && <Home/>} 
     <Footer /> 
); 
}

方法3 使用next/dynamic imports

import dynamic from 'next/dynamic'

const ComponentWithNoSSR = dynamic(
  () => import('../components/helloWorld'),
  { ssr: false }
)

function MyComponent() {
  return (
    <div><Header /><ComponentWithNoSSR/></div>
  )
}

export default MyComponent