React SSR应用滚动加载：解决window未定义错误方案咨询

哈哈，这个坑我迁移React SSR的时候踩过好几次！问题根源很明确：服务端渲染是在Node.js环境跑的，根本没有浏览器里的window对象，而你原来的代码在constructor里就直接调用了依赖window的handleScroll，服务端执行到这里肯定报错。下面给你整理好的重构方案，亲测有效：

核心问题复盘 #

在CSR模式下，代码全程在浏览器环境执行，window对象始终存在，所以你的滚动逻辑能正常运行。但SSR时，组件的constructor、render等方法会先在服务端执行，这时候调用window就会抛出ReferenceError——毕竟Node.js里根本没有这个东西。

重构方案（类组件版） #

1. 将滚动监听移到客户端专属生命周期 #

React类组件的componentDidMount钩子只会在客户端执行，完美适合添加浏览器相关的事件监听；同时一定要在componentWillUnmount里移除监听，避免内存泄漏。

修改后的代码示例：

export class AllCourses extends React.PureComponent {
  constructor(props) {
    super(props);
    this.state = {};
    // ❌ 移除这里的handleScroll调用，服务端会执行到这里
    // this.handleScroll();
  }

  // ✅ 客户端挂载完成后再初始化滚动监听
  componentDidMount() {
    this.handleScroll();
  }

  // ✅ 组件卸载时清理监听，防止内存泄漏
  componentWillUnmount() {
    window.onscroll = null;
  }

  handleScroll() {
    window.onscroll = () => {
      const nextPage = this.props.nextPage;
      
      // 额外优化：避免正在加载时重复触发请求
      if (this.props.isLoading) return;

      // 这里可以微调阈值，提前100px触发加载，提升用户体验
      if (window.innerHeight + document.documentElement.scrollTop >= document.documentElement.offsetHeight - 100) {
        this.props.dispatch(retrieveAllCourses(nextPage));
      }
    };
  }

  // ... 其他组件逻辑
}

2. 额外优化：防止重复请求 #

原代码没有判断加载状态，如果用户快速滚动可能会多次触发相同请求，建议在props或state里维护一个isLoading状态，触发请求前先做判断。

补充：函数组件版本（如果后续重构可用） #

如果以后打算把类组件改成函数组件，可以用useEffect实现相同逻辑，空依赖数组确保只在客户端挂载时执行：

import { useEffect } from 'react';

function AllCourses(props) {
  useEffect(() => {
    const handleScroll = () => {
      const nextPage = props.nextPage;
      if (props.isLoading) return;
      
      if (window.innerHeight + document.documentElement.scrollTop >= document.documentElement.offsetHeight - 100) {
        props.dispatch(retrieveAllCourses(nextPage));
      }
    };

    window.addEventListener('scroll', handleScroll);
    // 清理函数：组件卸载时移除监听
    return () => window.removeEventListener('scroll', handleScroll);
  }, [props.nextPage, props.isLoading, props.dispatch]);

  // ... 其他组件逻辑
}

关键注意点 #

• 任何依赖浏览器API（window、document、localStorage等）的逻辑，都要放到客户端专属的生命周期/钩子里执行，绝对不能在服务端会执行的阶段（比如constructor、render）调用。
• 事件监听一定要记得清理，不然组件卸载后监听还存在，会导致内存泄漏和意外的逻辑触发。

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