Web应用经常会分为客户端和服务器端，通常来说，客户端使用ReactJS等松耦合的JavaScript库，而服务器端使用NodeJS、Express等的服务端框架。然而，在一个单页应用(SPA)中，我们拥有一个服务端渲染怎么办呢？在这篇文章中，我们将探讨如何使用Webpack，在ReactJS项目中创造服务端渲染，建议读者拥有一定的Webpack以及NodeJS基础。
为什么要使用服务端渲染
在理解如何创造服务端渲染之前，我们有必要了解一下服务端渲染是为什么而存在。在一个SPA的应用中，通常是靠浏览器的JavaScript去渲染页面。然而，这也就意味着，当我们在等待返回数据的时候，浏览器的JS正在等待数据的响应。而这也就导致了一个渲染过程需要更多的时间和资源。然而，在使用服务端渲染时，即使在等待数据返回的过程中，服务器也可以通过服务端渲染去直接渲染页面。这意味着，你可以在AngularJS或ReactJS应用中快速获得首屏加载速度的提升。
开始编写代码
闲话少说，来开始编写代码吧。我们将使用基于ReactJS应用的服务端渲染--一个非常基本的应用来阐述我们的思路。
import React from "react"
import ReactDOM from "react-dom"
import App from "./components/App"
ReactDOM.render(
<App/>,
document.getElementById("root")
)这里，我们将使用一个在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