在前端开发中,一个好的 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:
--- - ------------- --
在服务端使用 glamor-server
在服务器端中引入 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