React SSR + Redux 导致的 Hydration 报错踩坑记录与修复方案
一条“Hydration failed”的错误，让我损失了半天时间
背景
我在用 Next.js App Router + Redux 开发一个任务管理应用，一切顺利，直到打开了 SSR（服务端渲染），突然看到这个令人头皮发麻的报错：
Hydration failed because the server rendered HTML didn't match the client.
报错定位在 <Header />，但实际问题比看上去复杂得多。
问题原因
React SSR 会先在服务端输出 HTML，再在浏览器执行 hydration，如果服务端和客户端渲染的 DOM 结构不一致，就会报错。
Redux 的状态通常在客户端初始化，比如 auth.isAuthenticated，在 SSR 阶段它通常是 false，但客户端可能已经是 true。
举个例子：
{isAuthenticated ? (<span>欢迎，{user?.username}</span>
) : (<Link href=\"/login\">登录</Link>
)}
服务端输出：
<a href=\"/login\">登录</a>
客户端切换成：
<span>欢迎，Luke</span>
标签类型完全不一样，React hydration 直接炸了。
修复方式：引入 useIsClient
import { useEffect, useState } from 'react';export function useIsClient() {const [isClient, setIsClient] = useState(false);useEffect(() => setIsClient(true), []);return isClient;
}
然后在你的组件中：
const isClient = useIsClient();if (!isClient) return null; // 跳过 SSR 阶段return isAuthenticated ? (<span>欢迎，{user?.username}</span>
) : (<Link href=\"/login\">登录</Link>
);
这样 React SSR 阶段就不会渲染出错误结构，hydration 就能成功。
更进一步：封装 ClientOnly 组件
function ClientOnly({ children }: { children: React.ReactNode }) {const isClient = useIsClient();if (!isClient) return null;return <>{children}</>;
}
任何你想跳过 SSR 的组件，只需要这样写：
<ClientOnly><Header />
</ClientOnly>
结语
React SSR + Redux 状态管理配合 App Router 使用，确实不够“傻瓜式”。但一旦你掌握了客户端条件渲染与状态保护的技巧，这种问题就能快速应对。
相关文章：
React SSR + Redux 导致的 Hydration 报错踩坑记录与修复方案
一条“Hydration failed”的错误，让我损失了半天时间 背景 我在用 Next.js App Router Redux 开发一个任务管理应用，一切顺利，直到打开了 SSR（服务端渲染），突然看到这个令人头皮发麻的报错： …...
【论文精读】Reformer：高效Transformer如何突破长序列处理瓶颈？
目录 一、引言：当Transformer遇到长序列瓶颈二、核心技术解析：从暴力计算到智能优化1. 局部敏感哈希注意力（LSH Attention）：用“聚类筛选”替代“全量计算”关键步骤：数学优化： 2. 可逆残差网络…...
iOS18 MSSBrowse闪退
iOS18 MSSBrowse闪退 问题方案结果 问题 最近升级了电脑系统(15.4.1)，并且也升级了xcode(16.3)开发工具。之后打包公司很早之前开发的项目。 上线之后发现在苹果手机系统18以上，出现了闪退问题。 涉及到的是第三方MSSBrowse，在选择图片放大的…...
漏洞利用)
create_function()漏洞利用
什么是 create_function() create_function() 是 PHP 早期提供的一个用来创建匿名函数的函数： $func create_function($a,$b, return $a $b;); echo $func(1, 2); // 输出 3 第一个参数是函数的参数列表（字符串形式），第二个参…...
leetcode-数组
数组 31. 下一个排列 题目 整数数组的一个 排列 就是将其所有成员以序列或线性顺序排列。 例如，arr [1,2,3] ，以下这些都可以视作 arr 的排列：[1,2,3]、[1,3,2]、[3,1,2]、[2,3,1] 。 整数数组的 下一个排列 是指其整数的下一个字典序更大…...
Tailwind CSS 实战：基于 Kooboo 构建个人博客页面
在现代 web 开发中，Tailwind CSS 作为一款实用优先的 CSS 框架，能让开发者迅速搭建出具有良好视觉效果的页面；Kooboo 则是一个强大的快速开发平台，提供了便捷的页面管理和数据处理功能。本文将详细介绍如何结合 Tailwind CSS 和 K…...
C#学习1_认识项目/程序结构
一、C#项目文件的构成 1.新建一个项目 2.运行项目 3.认识文件 1）解决方案（Solution）：组织多个项目的容器 抽象理解：餐厅 解决方案.sln文件，点击即可进入VS编辑 2）项目（…...
边缘计算在工业自动化中的应用：开启智能制造新时代
在工业4.0的浪潮中，智能制造成为推动工业发展的核心驱动力。随着物联网（IoT）技术的广泛应用，工业设备之间的互联互通变得越来越紧密，但这也带来了数据处理和传输的挑战。边缘计算作为一种新兴技术，通过将计…...
《MySQL：MySQL表的内外连接》
表的连接分为内连接和外连接。 内连接 内连接实际上就是利用where子句对两种表形成的笛卡尔积进行筛选，之前的文章中所用的查询都是内连接，也是开发中使用的最多的连接查询。 select 字段 from 表1 inner join 表2 on 连接条件 and 其他条件࿱…...
人工智能催化民航业变革：五大应用案例
航空业正在经历一场前所未有的技术革命，人工智能正成为变革的主要催化剂。从停机坪到航站楼，从维修机库到客户服务中心，人工智能正在从根本上重塑航空公司的运营和服务方式。这种转变并非仅仅停留在理论上——全球主要航空公司已从人工智能投…...
机器视觉中有哪些常见的光学辅助元件及其作用？
在机器视觉领域，光学元件如透镜、反射镜和棱镜扮演着至关重要的角色。它们不仅是高精度图像捕获的基础，也是提升机器视觉系统性能的关键。深入了解这些光学元件的功能和应用，可以帮助我们更好地掌握机器视觉技术的精髓。 透镜：精…...
Stream API 对两个 List 进行去重操作
在 Java 8 及以上版本中，可以使用 Lambda 表达式和 Stream API 对两个 List 进行去重操作。以下是几种常见的去重场景及对应的 Lambda 表达式实现方式： 1. 合并两个 List 并去重 List<String> list1 Arrays.asList("A", "B"…...
lerna 8.x 详细教程
全局安装 lerna npm install lerna -g初始化项目 mkdir lerna-cli-do cd lerna-cli-do npm init -y初始化项目 lerna init --packages="packages/*"lerna create 创建子项目 lerna create core lerna create util...
ROS第十二梯：ros-noetic和Anaconda联合使用
1) 概述 ros-noetic默认Python版本是Python2.7，但在使用过程中，通常需要明确调用python3进行编译。 Anaconda： 支持创建独立的python2/3环境，避免系统库冲突； 方便安装ROS依赖的科学计算库（如Numpy，Pandas）和机器学习框架； 核心目标：在anaconda环…...
网络原理 - 5（TCP - 2 - 三次握手与四次挥手）
目录 3. 连接管理 建立连接 - 三次挥手 三次握手的意义 断开连接 - 四次挥手 握手和挥手的相似和不同之处 连接管理过程中涉及到的 TCP 状态转换 完！ 3. 连接管理 连接管理分为建立连接 和 断开连接~（important 重点！） 建…...
【开源】STM32HAL库移植Arduino OneWire库驱动DS18B20和MAX31850
项目开源链接 github主页https://github.com/snqx-lqh本项目github地址https://github.com/snqx-lqh/STM32F103C8T6HalDemo作者 VXQinghua-Li7 📖 欢迎交流 如果开源的代码对你有帮助，希望可以帮我点个赞👍和收藏 项目说明 最近在做一个项目…...
【maven-7.1】POM文件中的属性管理：提升构建灵活性与可维护性
在Maven项目中，POM (Project Object Model) 文件是核心配置文件，而属性管理则是POM中一个强大但常被低估的特性。良好的属性管理可以显著提升项目的可维护性、减少重复配置，并使构建过程更加灵活。本文将深入探讨Maven中的属性管理机制。 1.…...
DC-2寻找Flag1、2、3、4、5，wpscan爆破、git提权
一、信息收集 1、主机探测 arp-scan -l 探测同网段2、端口扫描 nmap -sS -sV 192.168.66.136 80/tcp open http Apache httpd 2.4.10 ((Debian)) 7744/tcp open ssh OpenSSH 6.7p1 Debian 5deb8u7 (protocol 2.0)这里是扫描出来两个端口，80和ssh&…...
数据结构手撕--【栈和队列】
目录 1、栈 2、队列 1、栈 先进后出（都在栈顶进行操作） 使用数组结构比使用链式结构更优，因为数组在尾上插入数据的代价更小。并且采用动态长度的数组来表示。 定义结构体 #include <stdio.h> #include <stdlib.h> #include &l…...
八大排序——选择排序/堆排序
八大排序——选择排序/堆排序 目录 一、选择排序 二、堆排序 2.1 大顶堆（升序） 2.1.1 步骤 2.1.2 代码实现 2.2 小顶堆（降序） 一、选择排序 每一趟从待排序序列中找到其最小值，然后和待排序序列的第一个值进行交换&am…...
【KWDB 创作者计划】_深度学习篇---归一化反归一化
文章目录 前言一、归一化（Normalization）1. 定义2. 常用方法Min-Max归一化Z-Score标准化（虽常称“标准化”，但广义属归一化）小数缩放（Decimal Scaling）3. 作用4. 注意事项二、反归一化（Denormalization）1. 定义2.方法3. 应用场景三、Python示例演示四、归一化 vs. 标准…...
windows端远程控制ubuntu运行脚本程序并转发ubuntu端脚本输出的网页
背景 对于一些只能在ubuntu上运行的脚本，并且这个脚本会在ubuntu上通过网页展示运行结果。我们希望可以使用windows远程操控ubuntu，在windows上查看网页内容。 方法 start cmd.exe /k "sshpass -p passwd ssh namexxx.xxx.xxx.xxx "cd /hom…...
推荐系统（二十四）：Embedding层的参数是如何在模型训练过程中学习的？
近来有不少读者私信我关于嵌入层（Embedding层）参数在模型训练过程中如何学习的问题。虽然之前已经在不少文章介绍过 Embedding，但是为了读者更好地理解，笔者将通过本文详细解读嵌入层（Embedding Layer）的参…...
【Ubuntu】关于系统分区、挂载点、安装位置的一些基本信息
在ubuntu22及以前的版本中，最好是手动配置分区及其挂载点，通常我们会配置成3/4个分区： 引导区，交换区，根挂载点，home挂载点（有时根挂载点和home合二为一） 配置各种环境所占用的内存 …...
概率dp总结
概率 DP 用于解决概率问题与期望问题，建议先对 概率 & 期望 的内容有一定了解。一般情况下，解决概率问题需要顺序循环，而解决期望问题使用逆序循环，如果定义的状态转移方程存在后效性问题，还需要用到 高斯消元 来优…...
深入解析：RocketMQ、RabbitMQ和Kafka的区别与使用场景
互联网大厂Java求职者面试：RocketMQ、RabbitMQ和Kafka的深入解析 故事场景：严肃且专业的面试官与架构师程序员马架构 在一家知名的互联网大厂，Java求职者正在接受一场严格的面试。面试官是一位经验丰富的技术专家，他将通过多轮提…...
探秘Transformer系列之（30）--- 投机解码
探秘Transformer系列之（30）— 投机解码 文章目录 探秘Transformer系列之（30）--- 投机解码0x00 概述0x01 背景1.1 问题1.2 自回归解码 0x02 定义 & 历史2.1 投机解码2.2 发展历史 0x03 Blockwise Parallel Decoding3.1 动机3.2…...
【CSS】层叠，优先级与继承（三）：超详细继承知识点
目录 继承一、什么是继承？2.1 祖先元素2.2 默认继承/默认不继承 二、可继承属性2.1 字体相关属性2.2 文本相关属性2.3 列表相关属性 三、不可继承属性3.1 盒模型相关属性3.2 背景相关属性 四、属性初始值4.1 根元素4.2 属性的初始值4.3 得出结论 五、强制继承5.1 in…...
SpringBoot中6种自定义starter开发方法
在SpringBoot生态中，starter是一种特殊的依赖，它能够自动装配相关组件，简化项目配置。 自定义starter的核心价值在于： • 封装复杂的配置逻辑，实现开箱即用 • 统一技术组件的使用规范，避免"轮子"泛滥 • 提高开发效率，减少重复代码 方法一：基础配置类方式 …...
时间自动填写——电子表格公式的遗憾（DeepSeek）
now()/today()缘源来，人肉值粘胜无依。用函数抓取系统时间，人肉CTRLC“永葆青春”——直接时间数据存储。 笔记模板由python脚本于2025-04-23 23:21:44创建，本篇笔记适合想要研究电子表格日期自动填写的coder翻阅。 【学习的细节是欢悦的历程…...
AUTODL关闭了程序内存依然占满怎么办
AutoDL帮助文档 关闭了程序，使用nvidia-smi查看，内存任然爆满： 执行 ps -ef | grep train | awk {print $2} | xargs kill -9...
Spark集群搭建之Yarn模式
1.把spark安装包复制到你存放安装包的目录下，例如我的是/opt/software cd /opt/software，进入到你存放安装包的目录 然后tar -zxvf 你的spark安装包的完整名字 -C /opt/module，进行解压。例如我的spark完整名字是spark-3.1.1-bin-hadoop3.2.…...
CSS-跟随图片变化的背景色
CSS-跟随图片变化的背景色 获取图片的主要颜色并用于背景渐变需要安装依赖 colorthief获取图片的主要颜色. 并丢给背景注意 getPalette并不是个异步方法 import styles from ./styles.less; import React, { useState } from react; import Colortheif from colorthief;cons…...
一,开发环境安装
环境安装选择的版本如下 Python3.7 Anaconda5.3.1 CUDA 10.0 Pycharm Anaconda安装:下载地址 CUDA 10.0安装,包下载地址...
局部最小实验--用最小成本确保方向正确
### **将「局部最小实验」融入「简单、专注、本分」认知框架的实践方案** 你的核心认知框架是 **「简单、专注、本分」**，而 **「局部最小实验」**（MVP思维）本质上是一种 **低成本验证、快速迭代** 的方法论。二者看似矛盾（简单…...
【网络应用程序设计】实验三：网络聊天室
个人博客：https://alive0103.github.io/ 代码在GitHub：https://github.com/Alive0103/XDU-CS-lab 能点个Star就更好了，欢迎来逛逛哇~❣ 主播写的刚够满足基本功能，多有不足，仅供参考，还请提PR指正ÿ…...
【泊松过程和指数分布】
泊松过程的均值函数与方差函数计算 1. 泊松过程的定义 泊松过程是一个计数过程 { N ( t ) , t ≥ 0 } \{N(t), t \geq 0\} {N(t),t≥0}，满足以下条件： 独立增量：在不相交时间段内事件发生次数相互独立；平稳增量：在时…...
leetcode-排序
排序 面试题 01.01. 判定字符是否唯一 题目 实现一个算法，确定一个字符串 s 的所有字符是否全都不同。 示例 1： 输入: s "leetcode" 输出: false 示例 2： 输入: s "abc" 输出: true限制： 0 < len(s) &…...
Axure中继器表格：实现复杂交互设计的利器
在产品原型设计领域，Axure凭借其强大的元件库和交互功能，成为设计师们手中的得力工具。其中，中继器元件在表格设计方面展现出了独特的优势，结合动态面板等元件，能够打造出功能丰富、交互体验良好的表格原型。本文将深入…...
容器内部无法访问宿主机服务的原因及解决方法
容器内部无法访问宿主机服务的原因及解决方法 问题原因 当你在Docker容器内部尝试访问宿主机上的服务(如192.168.130.148:8000)时失败，通常有以下几种原因： 网络隔离：Docker容器默认使用自己的网络命名空间，与宿主机网络隔离IP地址误解：容器内看到的宿主机IP与外部网络不…...
IMU---MPU6050
一、芯片概述 1. 基本定位 型号：MPU6050，InvenSense（现TDK）推出的全球首款6轴MEMS运动传感器，集成3轴加速度计、3轴陀螺仪，内置温度传感器（非6轴核心功能）。定位：低成本…...
提高Spring Boot开发效率的实践
Spring Boot开发效率的重要性 Spring Boot 作为一个开源的 Java 框架，旨在简化新 Spring 应用和微服务的创建与开发 1。其核心特性，如自动配置、约定优于配置以及内嵌服务器，极大地降低了开发门槛，使得开发者可以更专注于业务逻辑的实现 1。在现代应用开发领域，Spring Bo…...
Spring Boot的优点：赋能现代Java开发的利器
Spring Boot 是基于 Spring 框架的快速开发框架，自 2014 年发布以来，凭借其简洁性、灵活性和强大的生态系统，成为 Java 后端开发的首选工具。尤其在 2025 年，随着微服务、云原生和 DevOps 的普及，Spring Boot 的优势更…...
)
Python内置函数---breakpoint()
用于在代码执行过程中动态设置断点，暂停程序并进入调试模式。 1. 基本语法与功能 breakpoint(*args, kwargs) - 参数：接受任意数量的位置参数和关键字参数，但通常无需传递（默认调用pdb.set_trace()）。 - 功能&#x…...
2.RabbitMQ - 入门
RabbitMQ 入门 文章目录 RabbitMQ 入门一、快速入门1.1 介绍1.2 创建项目1.3 简单入门 二、Work模型三、交换机3.1 Fanout3.2 Direct3.3 Topic 四、声明队列和交换机4.1 配置文件4.2 注解 五、消息转换器 一、快速入门 1.1 介绍 官方的API较为麻烦，我们使用官方推…...
智能配送机器人控制系统设计
标题:智能配送机器人控制系统设计 内容:1.摘要 随着物流行业的快速发展，智能配送机器人的需求日益增长。本文的目的是设计一套高效、稳定的智能配送机器人控制系统。方法上，采用了先进的传感器技术、定位算法和路径规划策略，确保机器人能准确…...
2025.04.23华为机考第一题-100分
📌 点击直达笔试专栏 👉《大厂笔试突围》 💻 春秋招笔试突围在线OJ 👉 笔试突围OJ 01. 星空探索者 问题描述 LYA是一位天文学爱好者，她拍摄了一张星空照片并将其数字化为二维亮度图。在这张图像中，每个像素点的值代表该位置的亮度。现在，LYA想要寻找特定亮度的星…...
MCP 基于 TypeScript 的完整示例，包含stdio、sse多种用法和调试，对于构建自己的API工具链很有用
typescript-mcp-demo 这是一个基于 Model Context Protocol (MCP) 的 TypeScript 示例项目，展示了如何创建一个简单的 MCP 服务器，包含基本的工具（tools）和资源（resources）功能。 官网：https:…...
【计算机视觉】CV项目实战- SORT 多目标跟踪算法
SORT 多目标跟踪算法：从原理到实战的完整指南 一、SORT算法核心解析1.1 算法架构1.2 关键技术组件 二、实战环境搭建2.1 基础环境配置2.2 数据准备 三、核心功能实战3.1 基础跟踪演示3.2 自定义检测器集成3.3 性能评估 四、高级应用与优化4.1 针对遮挡场景的改进4.2…...
常用第三方库精讲：cached_network_image图片加载优化
常用第三方库精讲：cached_network_image图片加载优化 在Flutter应用开发中，图片加载是一个非常重要的环节。合理的图片加载策略不仅能提升用户体验，还能优化应用性能。本文将深入讲解cached_network_image库的使用，以及如何通过它…...