上面的代码已经完美跟大家展示了如何将内联style抽离出dom,然后通过 <link style> 的方法渲染样式, 那么问题来了，如何在打包解析react dom时，给服务器一个"纯洁、干净、无暇"的DOM呢？
这个时候就需要使用 babel-plugin-styled-components 包，在babel中进行解析。
代码如下：
{ "presets": [ "next/babel" ], "plugins": [ ["styled-components", { "ssr": true, "displayName": true, "preprocess": false } ] ] }
这个时候在去打开next.js页面就会发现，那家伙、那场面渲染速度嗖嗖的。至于负责前端逻辑的 commons.xxxxx.js ，您老人家就安静地慢慢地加载吧。