I'm using adaptive.js on next.js - react project, heavily using server side feature for increasing 1st screen render speed. adaptive.js with px2rem could make our team write css dimension exact as design draft from UED team. when adaptive.js init, it require device width & dpr to scale and set base font size for entire project css. If we don't pass right parameters, server rendered css will different from client side one, sometimes scale 2x or 3x times, will cause screen flash & rearrangement, which is bad.
Apparently, we can't get device dpr or width directly on server side. Just user-agent is not enough, there's no map for every device model <=> screen info. http client Hints seems a perfect solution, explicit ask browser to bring device info needed. but it's still in draft status, limited browser support this feature.
