Next 14服务端应用报错：useInView is not a function 如何解决？

核心原因 #

Next 14默认将组件作为服务端组件渲染，但useInView是依赖浏览器IntersectionObserver API的客户端Hook，无法在服务端环境中运行，同时服务端组件不允许使用客户端Hook，这是报错的主要原因。

解决方案 #

1. 标记组件为客户端组件

在组件文件顶部添加'use client'指令，强制组件在客户端渲染，同时要把useInView返回的ref绑定到需要监控的元素上：

'use client'; // 必须添加这一行
import Image from "next/image";
import { useInView } from "react-intersection-observer";

function LoadMore() {
    const { ref, inView } = useInView();
    // 可根据inView状态实现加载更多逻辑
    return (
        <>
            <section className="flex justify-center items-center w-full">
                <div ref={ref}> {/* 将ref绑定到目标元素 */}
                    <Image 
                        src="./spinner.svg" 
                        alt="spinner"
                        width={56}
                        height={56}
                        className="object-contain"
                    />
                </div>
            </section>
        </>
    );
}

export default LoadMore;

2. 确认依赖包正确安装

如果未安装react-intersection-observer，执行对应命令安装：

npm install react-intersection-observer
# 或
yarn add react-intersection-observer
pnpm add react-intersection-observer

3. 验证包版本兼容性

确保使用的react-intersection-observer版本在v8.0.0及以上（该版本开始支持useInView Hook），可查看package.json确认：

{
  "dependencies": {
    "react-intersection-observer": "^9.5.3" // 版本需>=8.0.0
  }
}

版本过低则执行更新：

npm update react-intersection-observer

补充说明 #

useInView的核心作用是监听元素是否进入视口，必须将返回的ref绑定到目标DOM元素上才能正常工作，之后你可以基于inView状态触发加载更多等业务逻辑。

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