服务端渲染时如何使用adaptive.js高清适配方案

Question

使用next.js等框架时，使用服务端渲染特性。项目是移动端网页。按照之前其他的react项目经验，我们会选用adaptive.js和postcss-px2rem去做高清适配，以直接按照设计稿的px值在css中还原。
由于服务端无法直接获取window（即设备的width，dpr，of course），服务端渲染出来的html与客户端渲染出来的样式，root font-size将有很大出入，导致界面跳动剧烈。

已经尝试过而失败的思路：

• 在node server端通过user-agent取得设备dpr: 找不到合适的方式 适配所有的物理设备型号 =》 dpr，width
  使
• 用http-client-hints： 草案未被广泛支持

Answer 1

这个和服务器渲染 有什么关系？ 不是服务器渲染 好像也有跳动吧？
个人见解, 可能有误
首先， 本人项目经验几乎为零， 但是做过 一个服务端渲染 移动站。
vue ssr.
和react 服务器渲染原理应该是相同的，同时本人也看过 next, 懂点 react.
废话不多说。
服务器渲染， 简单来说其实,就是 node 只是把相应的路由对于的路由组件，渲染成 虚拟dom(js对象而已两端都支持)， 然后通过服务端特有api 把虚拟dom 转化为 html 字符串而已 A（节点），然后返回 到浏览器。
其实 和jade 差不多。
浏览器渲染， 只不过 是 A（节点）转化为 真实的dom插入 <div id="app"></div> 而已。
同时本人也用过 flexable.js 淘宝首屏前端适配 和你 说的 那个 js 差不多。
适配js 是 在浏览器端 做的处理， 和 服务器端 没有关系。
造成页面抖动的原因：
我猜测可能：

1.浏览器是解析边渲染dom, 浏览器有默认根字体大小， 然后后来js又根据屏幕尺寸，设置跟字体大小。
2.
我曾做过测试，页面没渲染完的某一刻获取手机端的屏幕尺寸和真实尺寸不一致。真个页面解析完 后尺寸一致。
我用的是 window.innerWith

Answer 2

大佬，有什么替代思路吗，我也遇到这个问题，只在react 服务端 手机适配 遇到过，react 客户端并没有，可能是服务端渲染很快，提前在页面上展示了渲染的一部分原因吧。