fix(ssr): avoid accessing localStorage during SSR initialization
Build and Deploy / Build and Push Docker Image (push) Successful in 1m53s

- Initialize activeInterconnectNodeId with empty string
- Read from localStorage only in client-side
- Defer selected state initialization in NodeSwitcher to useEffect
This commit is contained in:
2026-08-08 03:15:51 +08:00
parent 8be7e8ad2f
commit 455f46caa0
2 changed files with 13 additions and 3 deletions
+10 -2
View File
@@ -65,8 +65,16 @@ export interface MonitorStats {
}[] }[]
} }
} }
export let activeInterconnectNodeId = localStorage.getItem('activeInterconnectNodeId') || ''
export let activeInterconnectNodeName = localStorage.getItem('activeInterconnectNodeName') || '' // 初始化时使用空字符串,避免 SSR 时访问 localStorage
export let activeInterconnectNodeId = ''
export let activeInterconnectNodeName = ''
// 在客户端初始化时从 localStorage 读取
if (typeof window !== 'undefined') {
activeInterconnectNodeId = localStorage.getItem('activeInterconnectNodeId') || ''
activeInterconnectNodeName = localStorage.getItem('activeInterconnectNodeName') || ''
}
export function setActiveInterconnectNodeId(id: string, name?: string) { export function setActiveInterconnectNodeId(id: string, name?: string) {
activeInterconnectNodeId = id activeInterconnectNodeId = id
+3 -1
View File
@@ -13,7 +13,7 @@ import { cn } from '@/lib/utils'
export function NodeSwitcher() { export function NodeSwitcher() {
const [nodes, setNodes] = useState<InterconnectNode[]>([]) const [nodes, setNodes] = useState<InterconnectNode[]>([])
const [selected, setSelected] = useState(activeInterconnectNodeId || 'local') const [selected, setSelected] = useState('local')
const [isMaster, setIsMaster] = useState(false) const [isMaster, setIsMaster] = useState(false)
const [open, setOpen] = useState(false) const [open, setOpen] = useState(false)
const [menuStyle, setMenuStyle] = useState<React.CSSProperties>({}) const [menuStyle, setMenuStyle] = useState<React.CSSProperties>({})
@@ -22,6 +22,8 @@ export function NodeSwitcher() {
useEffect(() => { useEffect(() => {
setMounted(true) setMounted(true)
// 在客户端初始化时从 localStorage 读取选中的节点
setSelected(activeInterconnectNodeId || 'local')
}, []) }, [])
const fetchNodes = useCallback(async () => { const fetchNodes = useCallback(async () => {