Astro中client:load与client:only指令的实际差异及window未定义问题

两者的实际行为差异 #

• client:load：组件会先在服务端完成SSR渲染（生成静态HTML），等客户端页面加载完成后，再进行hydration激活交互逻辑。组件代码会在服务端+客户端各执行一次。
• client:only：组件完全跳过服务端渲染流程，仅在浏览器环境中加载、执行，不会在服务端生成任何静态内容。

你的报错原因 #

你的React组件中，isHomePage函数直接在顶层作用域访问了window对象——而服务端环境不存在window，使用client:load时，服务端渲染阶段会执行这个函数，自然抛出window is not defined错误。

而client:only让组件全程在客户端运行，浏览器环境下window是存在的，所以能正常执行。

修复方案 #

你可以通过以下几种方式解决这个问题：

1. 将逻辑移到组件内部并使用React生命周期钩子：

import { useEffect, useState } from 'react';

export default function MyComponent() {
  const [isHome, setIsHome] = useState(false);

  useEffect(() => {
    const currentRoute = window.location.pathname;
    setIsHome(currentRoute === '/');
  }, []);
  
  return (
    <div>
      {isHome ? 'Home Page' : 'Other Page'}
    </div>
  )
}

2. 添加服务端兼容判断：

const isHomePage = () => {
  if (typeof window === 'undefined') return false;
  const currentRoute = window.location.pathname;
  return currentRoute === '/';
}

export default function MyComponent() {  
  return (
    <div>
      {isHomePage() ? 'Home Page' : 'Other Page'}
    </div>
  )
}

3. 从Astro组件传递路由信息：
   在Astro页面中获取路由，通过props传给React组件：

---
import MyComponent from '@/components/ui/mycomponent'
const isHome = Astro.url.pathname === '/'
---

<MyComponent client:load isHome={isHome} />

然后React组件接收props：

export default function MyComponent({ isHome }: { isHome: boolean }) {  
  return (
    <div>
      {isHome ? 'Home Page' : 'Other Page'}
    </div>
  )
}

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