在前端开发中，一个好的 UI 设计必不可少，而 CSS 作为 UI 层面的基础，也非常重要。glamor 是一个比较流行的 CSS-in-JS 库，它允许我们在 JavaScript 中书写 CSS，并且它具有非常好的复用和组合性。但是，在服务端渲染过程中，glamor 并不能够很好的工作，因为它需要在客户端生成样式后再应用于页面中。这时候，glamor-server 出现了，它可以帮助我们在服务端也能很好地使用 glamor。
本文将介绍 npm 包 glamor-server 的使用方法。这个包的作用是将本地的 glamor 样式转化为服务器端可以处理的字符串，并自动插入到 HTML 中。本文将从以下几个方面详细介绍如何使用 glamor-server。
安装 glamor-server
通过 npm 安装 glamor-server：
npm i glamor-server -S
在服务端使用 glamor-server
在服务器端中引入 glamor-server：
import GlamorServer from 'glamor-server';
然后我们就可以在服务器端渲染代码中使用了，比如：
-- -------------------- ---- -------
------ ----- ---- --------
------ - -------------------- - ---- -------------------
------ ------------ ---- ----------------
------ --- ---- --------
----- ---------- - -- -- -
----- ------------ - --- ---------------
----- ---- - ---------------------
------
------
------------- ------ ---------------
-----------------------------
-------
------
---- ---------
---- --
------
-------
-------
--
----- --- - -------------------------------
------ -
--------- -----
-------
------
--
--
------------ ----- ---- -- -
-----------------------
---在上面的例子中，我们先实例化了 GlamorServer，并传递给 <html> 标签。然后使用 renderToStaticMarkup 函数来渲染页面，并使用 getStyleTags 方法来获取 glamor 样式的标签，然后在 head 中渲染出样式。
最后，使用 getStyleElement 函数来获取服务器端的样式并输出到页面中。
在客户端使用 glamor-hydrate
服务端渲染完毕后，我们需要在客户端渲染时重新挂在应用，并使用 glamor-hydrate 来处理样式。因为服务器端已经将样式生成了，所以客户端使用 glamor-hydrate 只需要获取这些使用的样式即可。
以下是客户端代码示例：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- - ---- ------------
------ ------ ---- ---------
------ ------------- ---- -----------------
------ --- ---- --------
----- --------- - -----------------------------------------
----- ------ - -------------- -- -------
----- ----------- - --- ---------------
--------- --- ------------------------ --- ---- -- --------- --- ---- - - ---- - - ----------------------------------
---
--------
--------------------------
------------------ ----------------- -------------
---- --
--------------------
--
------------------------------
--其中，我们先对样式进行了缓存，防止重复渲染。然后调用 hydrate 函数进行应用挂在，最后使用 glamor-redux 的 GlamorHydrate 来处理服务端传递的样式。
使用示例代码
以下是一个使用 glamor-server 的完整示例代码：
-- -------------------- ---- -------
------ ----- ---- --------
------ ------- ---- ----------
------ - -------------------- - ---- -------------------
------ ------------ ---- ----------------
------ ------ ---- ---------
------ --- ---- --------
----- --- - ----------
------------ ----- ---- -- -
----- ------------ - --- ---------------
----- ---- - ---------------------
------
------
------------- ------ ---------------
----- --------------- ---------------------------- ---------------- --
-----------------------------
-------
------
---- ---------
---- --
------
--------------------------------
-------
-------
--
------------------- ---------------
---
-----------------------------
---- -
------- --
-------- --
-
---- -
------- ------
----------------- --------
-
---
----- ---- - ---------------- -- -----
-----------------在浏览器中打开 http://localhost:3000/ 就可以看到页面被服务器端渲染出来，并自动插入样式。
总结
通过本文的介绍，我们了解了 glamor-server 的使用方法。它可以使我们在服务器端也能够很好地使用 glamor。同时，本文也详细介绍了在服务器端和客户端进行 glamor 使用时需要注意的问题。如果你在项目中使用 glamor 并且需要在服务器端也使用，那么 glamor-server 这个库一定会很有用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055d1e81e8991b448dac3d