在我的Next.js应用程序中，我想根据设备的宽度呈现移动的-/ desktop-header。一般来说，这是一个简单的任务，我在正常的React中做了很多次，使用像useWindowDimensions这样的钩子，在那里我检查窗口对象的宽度，并使用这个参数作为一个简单的条件。然而，在Next.js中，我遇到了一个问题，我的应用程序在服务器上是预渲染的，所以当然没有窗口对象，我可以用于条件。我尝试的事情：

• 组件的动态导入，这意味着组件不会在服务器上预渲染，而只会在客户端上预渲染。这将工作，但我没有使用SSR的好处，并为搜索引擎优化的原因，我想预先呈现“关键组件”一样的标题。
• 我只是为SSR选择了一个条件，比如总是渲染mobile-header，而在CSR上，我只是渲染真实的的条件。这将解决我的问题与渲染总是“关键组件”在服务器端，所以SEO是高兴的，但我运行在一个丑陋的警告，内容不匹配之间的服务器和客户端，因为当我呈现的应用程序在桌面设备上，我的第一个呈现在客户端当然是桌面头。所以这似乎也不是一个好的解决方案。
• 接下来，我尝试像以前一样渲染某个条件，所以总是在服务器端和客户端渲染mobile-header，并仅在mount useEffect({...}, [])上使用useEffect钩子，然后检查真实的条件并触发正确条件的重新渲染。这将解决我的SEO问题，以及丑陋的内容不匹配警告。但是我遇到了一个明显的布局变化，用户首先看到的是移动头，半秒钟后，头变成了桌面头。丑陋的东西..
• 所以我有了下一个想法，那就是用getServersideProps检查用户代理或设备类型，并以某种方式将此信息用于服务器端的条件渲染。这实际上并没有很好地工作，特别是我想在my _app.tsx中使用它，这样我就不必一次又一次地为每个页面编写这些东西。在官方Next.js repo中的thread讨论中，我发现getServersideProps在_app.js中还不起作用，只有getInitialProps，它已被弃用，不应再使用...

因此，为了使事情简短，必须有一种好的方法来渲染Next.js中的组件，而不会出现上述问题。我只是不知道，什么是最好的做法，这种东西。
我会很感激任何提示，提示或建议在这个主题️