SSR文本框在Hydration完成前如何处理输入内容变化？

方案一：Hydration时同步用户已输入的内容（推荐） #

这个方案能让React接管组件时自动获取用户在静态DOM中输入的内容，彻底避免清空问题，是最优用户体验方案。

实现步骤： #

1. 在组件挂载时，读取真实DOM的输入值并同步到组件状态
2. 利用useEffect（或useLayoutEffect）确保在Hydration完成后立即执行同步逻辑

示例代码（结合Material UI）：

import { useState, useEffect } from 'react';
import TextField from '@mui/material/TextField';

function LoginForm() {
  const [username, setUsername] = useState('');
  const [password, setPassword] = useState('');

  useEffect(() => {
    // 读取SSR渲染的真实DOM输入值
    const usernameInput = document.getElementById('username-input');
    const passwordInput = document.getElementById('password-input');
    
    if (usernameInput?.value) {
      setUsername(usernameInput.value);
    }
    if (passwordInput?.value) {
      setPassword(passwordInput.value);
    }
  }, []);

  return (
    <div>
      <TextField
        id="username-input"
        label="用户名"
        value={username}
        onChange={(e) => setUsername(e.target.value)}
        variant="outlined"
      />
      <TextField
        id="password-input"
        label="密码"
        type="password"
        value={password}
        onChange={(e) => setPassword(e.target.value)}
        variant="outlined"
      />
    </div>
  );
}

export default LoginForm;

关键说明： #

• 给输入框设置唯一id，方便直接定位真实DOM元素
• useEffect的空依赖数组确保只在组件挂载（Hydration完成）时执行一次
• 同步真实DOM的值到组件状态后，React接管时会直接使用该状态渲染，不会清空用户输入

方案二：Hydration完成前禁用输入框 #

如果觉得DOM操作不够优雅，也可以选择在JS加载完成前禁用输入，从根源避免内容丢失。

实现步骤： #

1. 用状态标记Hydration完成状态
2. 根据状态控制输入框的disabled属性，同时优化Material UI的禁用样式

示例代码：

import { useState, useEffect } from 'react';
import TextField from '@mui/material/TextField';

function LoginForm() {
  const [isHydrated, setIsHydrated] = useState(false);
  const [username, setUsername] = useState('');
  const [password, setPassword] = useState('');

  useEffect(() => {
    // Hydration完成后更新状态
    setIsHydrated(true);
  }, []);

  return (
    <div>
      <TextField
        label="用户名"
        value={username}
        onChange={(e) => setUsername(e.target.value)}
        variant="outlined"
        disabled={!isHydrated}
        // 自定义禁用样式，避免默认样式过于生硬
        sx={{
          '&.Mui-disabled': {
            opacity: 0.8,
            '& .MuiInputBase-input': {
              cursor: 'wait',
            },
          },
        }}
      />
      <TextField
        label="密码"
        type="password"
        value={password}
        onChange={(e) => setPassword(e.target.value)}
        variant="outlined"
        disabled={!isHydrated}
        sx={{
          '&.Mui-disabled': {
            opacity: 0.8,
            '& .MuiInputBase-input': {
              cursor: 'wait',
            },
          },
        }}
      />
    </div>
  );
}

export default LoginForm;

关键说明： #

• isHydrated初始为false，Hydration完成后通过useEffect切换为true
• 禁用状态下用户无法输入，自然不会出现内容丢失问题
• 通过Material UI的sx属性自定义禁用样式，提升用户感知（如等待光标、合适透明度）

额外注意事项 #

• 对于Material UI组件，确保服务端渲染与客户端Hydration的样式一致，避免Hydration时的样式闪烁
• 若使用Next.js等框架，可直接利用框架提供的useIsHydrated钩子简化状态判断

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