NextJS 13中页面跳转后回退，原SSR页面异常问题求助

针对从客户端页面后退到SSR页面时出现的布局错乱、CSS失效问题，可从以下几个方向排查解决：

1. 重置全局DOM状态与滚动位置 #

客户端页面（登录页）可能修改了全局样式（如body的overflow、margin）或滚动位置，后退时未恢复，导致SSR页面渲染异常。

在登录页的客户端组件中添加卸载钩子，恢复初始状态：

'use client';
import { useEffect } from 'react';

export default function LoginPage() {
  useEffect(() => {
    // 保存页面加载前的全局状态
    const originalBodyOverflow = document.body.style.overflow;
    const originalScrollPos = window.scrollY;

    // 登录页所需的全局样式（根据实际情况调整）
    document.body.style.overflow = 'auto';

    return () => {
      // 页面卸载时恢复初始状态
      document.body.style.overflow = originalBodyOverflow;
      window.scrollTo(0, originalScrollPos);
    };
  }, []);

  // 页面内容
  return (
    <div>
      {/* 登录表单等内容 */}
    </div>
  );
}

2. 排查全局CSS冲突 #

确保全局CSS仅在根layout.tsx中引入，避免客户端组件重复引入全局样式导致污染。若使用CSS Modules或Tailwind，检查类名是否存在全局冲突，比如客户端组件的样式意外覆盖了SSR页面的布局样式。

3. 升级Next.js版本 #

Next.js 13.4.x的app目录存在部分路由缓存与hydration相关的已知bug，升级到13.5+的稳定版本可修复多数此类问题。执行升级命令：

npm install next@latest react@latest react-dom@latest

4. 启用滚动恢复组件 #

在根layout.tsx中添加官方的滚动恢复组件，确保路由跳转后退时滚动位置正确：

import { ScrollRestoration } from 'next/dist/client/components/scroll-restoration';

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        {children}
        <ScrollRestoration />
      </body>
    </html>
  );
}

内容的提问来源于stack exchange，提问作者Shourya Shikhar