Next.js井字棋游戏localStorage存储失效及初始CSS移除问题

问题1：页面刷新后localStorage游戏进度无法加载 #

Next.js的服务端渲染（SSR）/静态生成（SSG）特性限制了localStorage的访问时机——它仅在客户端环境可用，直接在服务端初始化状态会读取不到数据。按以下方式解决：

• 初始化状态时兼容客户端环境
  在状态初始化函数中先判断当前是否为客户端，再读取localStorage：

  import { useState, useEffect } from 'react';
  
  export default function TicTacToe() {
    const [board, setBoard] = useState(() => {
      // 仅在客户端读取localStorage
      if (typeof window !== 'undefined') {
        const savedBoard = localStorage.getItem('ticTacToeBoard');
        return savedBoard ? JSON.parse(savedBoard) : Array(9).fill(null);
      }
      // 服务端返回默认初始值
      return Array(9).fill(null);
    });
  
    // 状态变化时同步保存到localStorage
    useEffect(() => {
      localStorage.setItem('ticTacToeBoard', JSON.stringify(board));
    }, [board]);
  
    // 其他游戏逻辑（当前玩家、胜负判断等）同理处理
  }
  

• 同步所有需要保存的状态
  如果存在当前玩家、胜负状态等其他需持久化的变量，同样要在状态更新时写入localStorage，并在初始化时读取加载。

问题2：刷新页面后移除初始显示的CSS样式 #

针对刷新时的初始占位样式或无样式内容闪烁（FOUC），可以通过客户端组件的生命周期钩子实现移除：

• 通过useEffect移除初始样式类

  1. 先在全局样式中定义初始样式类：

     .initial-loading {
       background-color: #f5f5f5;
       /* 其他临时占位样式 */
     }
     

  2. 在根组件（如App Router的layout.tsx，需添加'use client'指令）中，挂载后移除该类：

     'use client';
     import { useEffect } from 'react';
     
     export default function RootLayout({ children }) {
       useEffect(() => {
         document.documentElement.classList.remove('initial-loading');
       }, []);
     
       return (
         <html lang="zh-CN" className="initial-loading">
           <body>{children}</body>
         </html>
       );
     }
     

• 避免SSR样式不匹配
  确保全局样式在_app.tsx（Pages Router）或layout.tsx（App Router）中正确导入，所有动态样式逻辑仅在客户端执行。

内容的提问来源于stack exchange，提问作者Sukhvir Singh