Next.js SSR 页面关闭后的状态维护方案
在使用 Next.js 进行服务器端渲染(SSR)开发时，会遇到一种问题：当页面关闭或刷新后，原本已经存在的状态数据会被清空，导致用户体验不佳。
这个问题的解决方案是：通过客户端存储方式，将需要持久化的状态数据存储在用户的浏览器中，以便在后续用户再次访问页面时，能够恢复之前的状态。下面我们将详细介绍如何在 Next.js 中实现这个方案。
首先，我们需要使用一个叫做 js-cookie 的第三方库。该库可以在客户端中存储和读取 cookie，以实现持久化数据的存储。
客户端存储方案
下面是一个示例代码，用于实现在客户端中存储一个名为 userInfo 的 cookie：
-- -------------------- ---- ------- ------ ------- ---- ------------ -- ------ ------ --- ----- ----------- - ---------- -- - ----------------------- ---------- -- -- ------ ------ --- ----- ----------- - -- -- - ------ ---------------------------- --
在组件中，可以使用该方法来存取对应的状态数据：
-- -------------------- ---- -------
------ - ---------- -------- - ---- --------
----- -------- - -- -- -
----- ---------- ------------ - ---------------
-- -------- ------ -----------
------------ -- -
---------------------------
-- ----
-- ----------- ------ --
----- ------------ - --- -- -
----------------------------
----------------------
--
------ -
-----
------ ---------------- ----------------------- --
------
--
--服务器端存储方案
接下来我们来介绍一种服务器端存储方案，该方案比 cookie 更安全，但相应的实现成本也更高。
该方案需要使用到 Next.js 自带的 getInitialProps() 方法。由于该方法只能运行在服务端，因此所有的状态数据都需要先从服务端获取，再交由客户端存储。
以下是一个示例实现，假设我们需要在客户端中存储当前购物车的商品数量：
-- -------------------- ---- -------
------ - --------------- - ---- -------
------ - -------- -------- - ---- --------
--------- ----- -
------------- -------
-
----- -------------- - -- ------------ -- ------ -- -
----- ------- --------- - -----------------------
-- ------------
----- -------------- - -- -- -
----- ----- - -------------------------------------------------
-- --------------- -
----------------
-
--
-- ------------------
----- ----------------- - -- -- -
-- ------ ---- -----------
---------------------------------------- ------------------
--
------ -
-----
------- ----------- -- -------------- - ------- -- -------------
-------- --------------
------
--
--
-- -------------------
------------------------------ - ----- -- --- -- ---------------- -- -
--- ------------ - --
-- ----- -
------------ - ----------------------------------------------
- ---- -
------------ - -------------------------------------------------
-
------ - ------------ --
--在上述代码中，我们通过 getInitialProps() 方法在服务端获取了 cartCount 的状态数据，并将其作为组件的初始化值传递给客户端。在客户端中，我们使用 localStorage 将状态数据持久化存储，以便在用户下次访问页面时恢复之前的状态。
总结
Next.js SSR 页面关闭后的状态维护是一个相对复杂的问题。本文介绍了两种解决方案。第一种方案使用 js-cookie 实现客户端存储。第二种方案则实现了一个客户端和服务端共同配合的方案，可以更好地保障数据的安全和完整性，但也需要更多的代码和实现成本。希望本文能够对大家有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/659e757cadd4f0e0ff7667f0