简介
@alexseitsinger/react-ssr-webpack-config 是一个使用 webpack 配置 React 服务器端渲染（SSR）的 npm 包。采用该包可以轻松的将一个 React 应用程序从客户端渲染升级到服务器端渲染，通过服务器端渲染可以优化页面性能，使页面更好的被搜索引擎及社交媒体爬取工具收录。
安装
在项目的根目录中使用 npm 安装：
npm install @alexseitsinger/react-ssr-webpack-config --save-dev
使用
- 在项目中新建一个
webpack.config.js文件，然后配置如下：
-- -------------------- ---- -------
----- ---- - ----------------
----- ------------- - ----------------------------------
----- - ------------------- - - ----------------------------------------------------
-------------- - ---------------------
------ -----------------
------- -
--------- -----------
----- ----------------------- ---------
-------------- ------------
--
---------- ------------------
---- 在应用程序中添加必要的 SSR 逻辑，例如：
-- -------------------- ---- -------
------ ----- ---- --------
------ - -------------- - ---- -------------------
------ - ------------ - ---- -------------------
------ --- ---- --------
-------- ----------------- ---- -
----- ------- - ---
----- --- - -
------------- ------------------ ------------------
---- --
---------------
--
----- ---- - --------------------
-------------------------------
-
-------- -------------------- -
------ -
--------- -----
----- ----------
------
----- ----------------
----- --------------- ---------------------------- -------------------
----- ---------------------------- ------------------
------------ --- ---------------
-------
------
---- -----------------------
------- ------------------------
-------
-------
--
-
------ ------- -------------- 执行 webpack 命令，生成服务器端渲染的代码：
webpack --config webpack.config.js
- 运行应用程序：
node build/index.js
配置项
@alexseitsinger/react-ssr-webpack-config 支持以下配置项：
entry- 应用程序的入口文件。output- 生成的 SSR 代码的文件路径和文件名，以及输出文件的类型。externals- 忽略 node_modules 目录下的文件。
总结
通过使用 @alexseitsinger/react-ssr-webpack-config 包，可以轻松的实现 React 应用程序的服务器端渲染。通过服务器端渲染，可以让页面更好的被搜索引擎及社交媒体爬取工具收录，并且可以优化页面性能。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60067354890c4f72775839af