什么是 nssr？
nssr 是一款可以在客户端和服务器端渲染 React 应用的 npm 包。在传统的客户端渲染模式中，首次访问页面时，浏览器需要下载所有的 JavaScript 代码，然后再解析和渲染页面。这种方式会导致页面加载速度缓慢，用户体验差。而使用 nssr 可以通过服务器端渲染的方式，提高首屏加载速度和 SEO 效果，让用户快速看到网站内容，提升用户体验。
如何使用 nssr 呢？
安装 nssr
使用以下命令，可以在项目根目录中安装 nssr：
npm install nssr --save
配置服务器端渲染
在服务器端渲染 React 应用之前，需要创建一个 server.js 文件。下面是一个简单的示例：
-- -------------------- ---- -------
----- ------- - -------------------
----- ---- - ----------------
----- --- - ----------
-- --------
----------------------------------
------------ ----- ----- ---- -- -
----- - ----- ----- - - ----- --------------------
------------
- ---- ------- --
--
----------
--------- -----
------
------
----- ----------------
----------- ------------
-------
------
---- -----------------------
--------
------------------------ - -------------------------
---------
------- --------------------------
-------
-------
---
---
---------------- -- -- -
------------------- -- ------- -- ------------------------
---这个示例使用了 Express.js 作为服务器框架。在服务器上，我们需要设置一个通用路由映射，以便所有请求都由服务器端渲染。在路由处理程序中，我们使用 nssr.renderToString() 方法来渲染 React 组件。最终，服务器会将渲染好的 HTML 和初始化状态发送给客户端。
配置客户端渲染
在客户端渲染方面，我们需要在 src/index.js 文件中调用 nssr.hydrate() 方法，它会将服务器端渲染的 HTML 和初始化状态重新加载在客户端上。下面是一个示例：
-- -------------------- ---- -------
------ ----- ---- --------
------ -------- ---- ------------
------ - ------------- - ---- -------------------
------ --- ---- --------
------ ---- ---- -------
----- ------------ - -------------------------
------ -------------------------
-------------
---------------
---- --------------------------- --
-----------------
--------------------------------
--这个示例使用了 React Router 来处理页面路由。在客户端渲染时，我们从 window.__INITIAL_STATE__ 中获取到初始化状态，这个状态是服务器端渲染时保存下来的。在渲染时，我们要将初始状态传递给 App 组件作为 props，以便在客户端应用中使用它们。
总结
nssr 为我们提供了一种有效的方法来实现服务器端渲染 React 应用，这可以帮助我们提高网站的性能和 SEO 效果。此外，nssr 还可以与其他流行的 React 应用程序库和框架一起使用，如 Redux 和 React Router。在使用 nssr 的过程中，我们需要注意在服务器和客户端上的配置，以确保整个应用程序都能够运行。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60056cda81e8991b448e6824