在使用 Next.js 进行服务端渲染（SSR）时，我们可能会遇到一个问题：当用户滚动页面时，切换到另一个页面再返回时，页面滚动条位置会被重置。这对于用户体验来说是不太友好的，因此我们需要一种方法来解决这个问题。
解决方法
我们可以使用 Next.js 提供的 getInitialProps 方法，在服务端渲染时记录页面滚动条位置，然后在客户端渲染时恢复滚动条位置。
具体实现方式如下：
- 在页面组件中添加
getInitialProps方法，并将当前页面滚动条位置作为参数传递给该方法。
-- -------------------- ---- -------
------ ----- ---- --------
----- ------ ------- --------------- -
------ ----- ----------------- ------ --------- ------- ---- ---- ------- -- -
------ - ------- --
-
-------- -
------ ------- -----------
-
-
------ ------- -------- 在服务端渲染时，将页面滚动条位置存储在
req.session中。
-- -------------------- ---- -------
------ - ---------- - ---- -------------------
------ ------- ----- ----- ---- -- -
----- ------- - ----- ------------ --- ---
-- ----------- --- ------- -
----- - ------- - - ---------
--------------- - --------
---------------------------
- ---- -
----- - ------- - - --------
------ ----------------
------------------- - ------- ---
-
--- 在客户端渲染时，从
window.__NEXT_DATA__中获取页面滚动条位置，并将其发送到服务端进行存储。
-- -------------------- ---- -------
------ ----- ---- --------
------ ----- ---- --------
----- ------ ------- --------------- -
------------------- -
----- - ------- - - ---------------------------
------------------ ---------
--------------------------------- -------------------
-
---------------------- -
------------------------------------ -------------------
-
------------ - -- -- -
----- ------- - ---------------
------------------------- - ------- ---
--
-------- -
------ ------- -----------
-
-
---------------------- - ----- -- ------ --------- ------- ---- --- -- -- -
----- - ---- - - ----- -------------------------
------ - -------- ------------ --
--
------ ------- -------总结
通过上述方法，我们可以在 Next.js SSR 中保持页面滚动条位置，从而提升用户体验。需要注意的是，由于服务端渲染和客户端渲染的差异，需要在两个环境中分别处理滚动条位置。同时，如果页面中存在异步加载或数据更新等操作，也需要重新记录滚动条位置。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/650d854795b1f8cacd7308d7