在现代化的单页应用(Single Page Application, SPA)中，为了提升交互性能，很多页面数据都是在客户端异步获取，浏览器每次打开该页面都需要重新请求数据。然而在搜索引擎优化和首屏渲染的需求下，服务端渲染(Server Side Rendering, SSR)已经成为一种趋势。neutrino-preset-web-ssr 是一款让你快速实现 SSR 的 neutrino 的预设包，本文将为大家详细介绍 neutrino-preset-web-ssr 的使用教程。
安装
使用 npm 安装 neutrino 和 neutrino-preset-web-ssr：
npm install --save-dev neutrino neutrino-preset-web-ssr
示例
接下来假设你已经有一个 SPA 应用，在 src/index.js 文件中有以下代码：
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
------ -------- ---- ------------
----- --- ------- --------- -
-------- -
------ -
---------- ------------
--
-
-
-------------------- --- ---------------------------------接着在根目录下创建 src/server.js 文件，用于服务端渲染：
-- -------------------- ---- -------
------------ - -----------------
--------------------- - ----------------------------
---------- - ----------------------- -- -- --- ----
----- ---- - ----------------
----- ---- - ---------------- -- ----- -- --
----------------------- ---- -- -
----- ---- - -------------------------------------------------------- -- -----
----------------------------- -------------
----------
--------- -----
------
------
----- ----------------
--------------------------------------
-------
------
---- -----------------------
-------
-------
---
--------------- -- -- -
- ------------------- -- --------- -- ---- ----------
---最后在根目录下创建 neutrino.config.js 用于配置 neutrino：
-- -------------------- ---- -------
----- ---- - ----------------
----- - ---- - - ----------------
----- ------------ - -------------------------------
-------------- - ---------- ---- - --- -- -
----- ----- - -----------------------------
----- --- - ---------------------------
--------------------------------
----------------------------
----------------------
----------------
----------------
--------
--------------------
------
-------------
-----------------------
----------
-------- -
--------------------
---------------------
-
---
-- ------------ ---- ---------- ---- ------
----- ------------ - ---------------
--------------------
-------
--------------------- --------
-----------------------
-- -----------
----- ------------ - --------------------
-- -----------------
----------------------------------
---------------
--------------
-----------------------
------
---------------
---------------------------------
------
-----
--------
-------- ------
------- ------
-------- ------
----------- ------
---------- -----
---
-- ------
------ --- -------------------------------------- --------------------------
--至此，通过 neutrino-preset-web-ssr，我们已经完成了前后端（也就是服务端渲染）共用一套代码，并实现了打包的配置。在客户端中你可以使用 React 的 hydrate 替换 render 方法，第一次加载后 React 将数据挂载到服务器生成的 DOM 元素上，并重新实例化组件。在根目录下输入以下命令启动应用：
neutrino start
使用浏览器访问 http://localhost:3000，如果一切正常，你将看到 Hello World!。
总结
neutrino-preset-web-ssr 对于快速实现 SSR 提供了很多便利，适合快速搭建简单的应用，同时它也具有很强的可扩展性，你可以在其基础上自定义更多功能。当然，如果你想要实现更复杂的规则，建议还是自定义 webpack 配置。
示例代码: https://github.com/aleksasham/neutrino-preset-web-ssr-example
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60056cb881e8991b448e624b