Supermemory项目中的窗口尺寸Hook实现与SSR兼容性问题解析

问题背景

在Supermemory项目的前端开发过程中，开发团队遇到了一个典型的服务端渲染(SSR)兼容性问题。当尝试使用自定义Hook useViewport 来获取浏览器窗口尺寸时，系统抛出了"window is not defined"的错误。这个错误揭示了在Node.js环境下直接访问浏览器API的常见陷阱。

技术分析

原始问题代码

项目中的useViewport.ts文件最初是这样实现的：

function getViewport() {
  const { innerWidth: width, innerHeight: height } = window ?? {
    innerWidth: 0,
    innerHeight: 0,
  };
  return { width, height };
}

这段代码试图通过可选链操作符(??)来提供回退值，但实际上在服务端渲染阶段，window对象根本就不存在，导致在访问阶段就直接抛出错误，根本不会执行到回退逻辑。

问题本质

这个错误揭示了前端开发中一个重要概念：环境区分。在以下两种环境下，代码的执行环境有本质区别：

1. 浏览器环境：拥有完整的DOM API，包括window、document等对象
2. Node.js环境(SSR)：没有浏览器特有的API，执行纯JavaScript

解决方案思路

正确的处理方式应该包含以下几个关键点：

1. 运行时环境检测：在执行前先判断window对象是否存在
2. SSR友好设计：在服务端渲染时返回合理的默认值
3. 动态更新机制：在客户端能够响应窗口尺寸变化

优化后的实现方案

经过修复后的实现应该采用以下模式：

function getViewport() {
  // 首先检查是否在浏览器环境
  const isClient = typeof window !== 'undefined';
  
  if (!isClient) {
    return { width: 0, height: 0 };
  }

  return {
    width: window.innerWidth,
    height: window.innerHeight
  };
}

这种实现方式具有以下优点：

1. SSR兼容性：在服务端渲染时不会抛出错误
2. 明确的环境区分：清晰地分离了不同环境的处理逻辑
3. 可维护性：代码意图明确，便于后续维护

深入思考：React Hook的最佳实践

在实现这类依赖于浏览器API的Hook时，还需要考虑以下方面：

1. 动态响应：添加resize事件监听器，在窗口尺寸变化时更新状态
2. 清理机制：在组件卸载时移除事件监听
3. 性能优化：考虑使用防抖(debounce)技术避免频繁更新

一个完整的实现可能如下：

import { useState, useEffect } from 'react';

function useViewport() {
  const [viewport, setViewport] = useState(() => getViewport());

  useEffect(() => {
    function handleResize() {
      setViewport(getViewport());
    }

    window.addEventListener('resize', handleResize);
    return () => window.removeEventListener('resize', handleResize);
  }, []);

  return viewport;
}

总结

在Supermemory项目中遇到的这个问题，实际上是现代前端开发中服务端渲染架构下的典型挑战。通过这个案例，我们可以学到：

1. 任何依赖浏览器API的代码都必须考虑SSR场景
2. 环境检测应该放在实际API调用之前
3. React Hook的实现需要考虑完整的生命周期
4. 响应式设计需要配合适当的事件处理机制