Web应用经常会分为客户端和服务器端,通常来说,客户端使用ReactJS等松耦合的JavaScript库,而服务器端使用NodeJS、Express等的服务端框架。然而,在一个单页应用(SPA)中,我们拥有一个服务端渲染怎么办呢?在这篇文章中,我们将探讨如何使用Webpack,在ReactJS项目中创造服务端渲染,建议读者拥有一定的Webpack以及NodeJS基础。
为什么要使用服务端渲染
在理解如何创造服务端渲染之前,我们有必要了解一下服务端渲染是为什么而存在。在一个SPA的应用中,通常是靠浏览器的JavaScript去渲染页面。然而,这也就意味着,当我们在等待返回数据的时候,浏览器的JS正在等待数据的响应。而这也就导致了一个渲染过程需要更多的时间和资源。然而,在使用服务端渲染时,即使在等待数据返回的过程中,服务器也可以通过服务端渲染去直接渲染页面。这意味着,你可以在AngularJS或ReactJS应用中快速获得首屏加载速度的提升。
开始编写代码
闲话少说,来开始编写代码吧。我们将使用基于ReactJS应用的服务端渲染--一个非常基本的应用来阐述我们的思路。
------ ----- ---- ------- ------ -------- ---- ----------- ------ --- ---- ------------------ ---------------- ------- ------------------------------- -
这里,我们将使用一个在components
文件夹下面的名为App.js
的组件。
------ ----- ---- ------- ----- --- ------- --------------- - -------- - ------ - ----- ---------- ----- ----------- --------------- ------ - - - ------ ------- ---
懂得ReactJS之后,这当然不是什么新东西。接下来,我们将创建一个服务端渲染的ExpressJS应用。
------ ------- ---- --------- ----- --- - --------- ----- ------ - ------------------------ ------ - ------------ ----- ---- -- - ------------------- - ------ -- -- --------------------------- -- ----- -- -- - ---------------- -- ------- -- ----- ------------------ -- ------- --
这样,当我们运行npm start
的时候,我们将会在http://localhost:3000上面看到我们的React应用。
然而,我们使用的React应用在客户端与服务器端是分开的,这样也就意味着,我们需要对Webpack进行配置。
----- ---- - --------------- ----- ------------- - --------------------------------- -------------- - - ------ ----------------------- ------------------- ------- - --------- ------------------ -- ------- ------- ---------- ------------------ ------- - ------ - - ----- -------- -------- ----------------------- ---------- ---- - ------- --------------- -------- - -------- --------------------- ---------------------- - - -- - ----- --------- ---- - -------------------------- - ------- ------------- -------- - -------- ---- - - - - - - -
这是服务端渲染的Webpack配置文件。其中有几点需要注意:
我们将资源类型扩展为了js和css。
我们将
server/index.js
文件作为Webpack的入口。我们指定了Webpack的目标为node。
我们添加了
nodeExternals()
对象到externals中,这样可以防止打包node_modules中的第三方库。我们扩展了babel-loader和css-loader,这样我们的React等应用可以被正确的打包。
值得一提的是,像React中的componentDidMount()
生命周期函数就无法在服务端渲染时使用。然而,我们可以使用React.useEffect()
去替代它。因此,你可能需要花一些时间去熟悉一下React Hooks的使用。
结论
在这篇文章中,我们已经探讨了如何使用Webpack,在ReactJS项目中创造一个服务器端渲染应用。我们知道,在服务器端渲染中,我们无法像客户端渲染一样使用很多基于客户端的JS库。然而,在使用成熟的库时,像ReactJS、ExpressJS、Webpack等等,我们可以在构建服务端渲染时达到较高的效率。
来源:JavaScript中文网 ,转载请注明来源 本文地址:https://www.javascriptcn.com/post/67186eadad1e889fe22b2f7b