Remix.run中组件onClick触发数据库查询报错如何解决

Remix 支持组件内管理本地状态，也支持在交互事件中触发数据更新，但不允许在客户端执行的代码中直接连接查询数据库。

• loader()/action() 是Remix约定的服务端执行入口，打包阶段Remix会自动将这部分代码从客户端构建产物中剔除，因此你在loader中调用fetchCharacters()直连数据库可以正常运行，相关数据库凭证、查询逻辑也不会泄露到前端。
• onClick 事件回调完全运行在用户浏览器环境中：一方面浏览器没有Node.js运行时的数据库驱动能力，无法直接建立数据库连接；另一方面如果将数据库查询逻辑写在这类客户端代码中，数据库账号密码等敏感信息会被直接打包进前端JS文件，造成严重安全风险，这就是你当前代码报错的根本原因。

优先使用Remix原生提供的useFetcher能力，完全贴合框架设计范式，不需要额外编写独立接口：

1. 所有数据库查询逻辑统一放在路由的loader中，通过查询参数区分分页
2. 组件内通过useFetcher发起请求拉取下一页数据，配合React自带的useState管理列表本地状态

示例代码：

// 路由模块内，以下loader代码仅在服务端执行
import { json } from "@remix-run/node";
import { useFetcher } from "@remix-run/react";
import { useState } from "react";

export async function loader({ request }) {
  const url = new URL(request.url);
  // 从请求参数中读取当前要加载的分页偏移量
  const offset = Number(url.searchParams.get("offset") || 0);
  // 服务端安全执行数据库查询
  const characters = await fetchCharacters(offset);
  return json({ characters });
}

export default function CharacterPage() {
  // 初始值从首屏SSR的loader数据中取即可
  const [characterList, setCharacterList] = useState(initialCharacterList);
  const [currentOffset, setCurrentOffset] = useState(0);
  const fetcher = useFetcher();

  const handleFetchMore = () => {
    const nextOffset = currentOffset + 7;
    // 调用当前路由的loader拉取下一页数据
    fetcher.load(`?offset=${nextOffset}`);
    setCurrentOffset(nextOffset);
  };

  // 拉取到新数据后追加到本地列表
  if (fetcher.data?.characters) {
    setCharacterList(prev => [...prev, ...fetcher.data.characters]);
    // 清空fetcher缓存避免重复追加
    fetcher.data = null;
  }

  return (
    <div>
      {/* 渲染characterList */}
      {next && (
        <button 
          onClick={handleFetchMore} 
          disabled={fetcher.state === "loading"}
        >
          NEXT
        </button>
      )}
    </div>
  );
}

如果使用Remix v2及以上版本，也可以给数据库查询函数添加"use server"指令，Remix会自动将其转换为服务端接口，不需要手动写loader接收参数，但本质依然是客户端通过HTTP请求调用服务端能力，不会将数据库逻辑下发到浏览器。

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