nextjs app router模式，怎么处理渲染后，绑定dom事件？

Question

例如，监听窗口滚动加载下一页交互

Answer 1

用 client 组件，在 useEffect 里绑定事件就好。

Answer 2

推荐使用 Intersection Observer API。它比滚动事件监听器更高效，因为它不会在每次滚动时触发。以下是完整的示例代码：

import { useEffect, useRef } from 'react';

export default function Page() {
  const loadMoreRef = useRef(null);

  useEffect(() => {
    const observer = new IntersectionObserver((entries) => {
      if (entries[0].isIntersecting) {
        // 触发加载下一页内容的逻辑
        console.log('加载下一页内容');
      }
    });

    if (loadMoreRef.current) {
      observer.observe(loadMoreRef.current);
    }

    return () => {
      if (loadMoreRef.current) {
        observer.unobserve(loadMoreRef.current);
      }
    };
  }, []);

  return (
    <div>
      <h1>页面内容</h1>
      {/* 你的页面内容 */}
      <div ref={loadMoreRef} style={{ height: '1px' }}></div>
    </div>
  );
}