Astro项目中Preact组件使用window对象报错的解决方法

即使给Preact组件加了client:load指令，组件的初始渲染仍会在Astro的服务端渲染(SSR)阶段执行，这时候直接在组件顶层访问window就会报错——因为服务端环境根本没有window对象。

这里提供两种可靠的修复方案：

方案一：使用Preact的useEffect钩子 #

useEffect是客户端专属的钩子，只会在浏览器环境的组件hydration完成后执行，完全避开服务端渲染阶段：

import { useEffect, useState } from 'preact/hooks';

export default function Counter({ children, count }) {
  const [href, setHref] = useState('');

  useEffect(() => {
    // 此处代码仅在客户端运行
    setHref(window.location.href);
  }, []);

  return (
    <>
      {href && <p>当前页面地址：{href}</p>}
      {children}
      {/* 你的其他组件内容 */}
    </>
  );
}

方案二：条件判断客户端环境 #

在访问window前先判断当前是否处于浏览器环境，避免服务端执行时报错：

export default function Counter({ children, count }) {
  // 服务端执行时返回空字符串，客户端执行时获取真实地址
  const href = typeof window !== 'undefined' ? window.location.href : '';

  return (
    <>
      {href && <p>当前页面地址：{href}</p>}
      {children}
      {/* 你的其他组件内容 */}
    </>
  );
}

补充说明 #

client:load的作用是让组件在页面加载时完成客户端hydration，但它不会跳过服务端的初始渲染步骤。所以任何依赖浏览器专属API（比如window、document）的代码，都需要放到客户端专属的执行时机里，或者加上环境判断。

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