Next.js搜索表单点击报错：Failed to fetch RSC payload问题排查

点击搜索按钮时出现如下错误：

Failed to fetch RSC payload. Falling back to browser navigation. TypeError: Failed to fetch at fetchServerResponse (webpack-internal:///(:3000/app-pages-browser)/./node_modules/next/dist/client/components/router-reducer/fetch-server-response.js:51:27) at InnerLayoutRouter (webpack-internal:///(:3000/app-pages-browser)/./node_modules/next/dist/client/components/layout-router.js:282:64) at renderWithHooks (webpack-internal:///(:3000/app-pages-browser)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:10697:18) at mountIndeterminateComponent (webpack-internal:///(:3000/app-pages-browser)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:15735:13) at beginWork$1 (webpack-internal:///(:3000/app-pages-browser)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:17310:16) at beginWork (webpack-internal:///(:3000/app-pages-browser)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:25675:14) at performUnitOfWork (webpack-internal:///(:3000/app-pages-browser)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:24526:12) at workLoopConcurrent (webpack-internal:///(:3000/app-pages-browser)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:24512:5) at renderRootConcurrent (webpack-internal:///(:3000/app-pages-browser)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:24468:9) at performConcurrentWorkOnRoot (webpack-internal:///(:3000/app-pages-browser)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:23339:38) at workLoop (webpack-internal:///(:3000/app-pages-browser)/./node_modules/next/dist/compiled/scheduler/cjs/scheduler.development.js:261:34) at flushWork (webpack-internal:///(:3000/app-pages-browser)/./node_modules/next/dist/compiled/scheduler/cjs/scheduler.development.js:230:14) at MessagePort.performWorkUntilDeadline (webpack-internal:///(:3000/app-pages-browser)/./node_modules/next/dist/compiled/scheduler/cjs/scheduler.development.js:534:21)

渲染表单的组件代码：

"use client";

import {useState, useEffect} from "react";
import {useRouter} from "next/navigation";

import SearchSvg from "@/svgs/search";

import styles from "./search.module.scss";

export default function SearchForm() {
    const router = useRouter();
    const [value, setValue] = useState<string>("");
    const [search, setSearch] = useState<string>("");

    function onChange(event: React.ChangeEvent<HTMLInputElement>) {
        setValue(event.target.value);
    }

    function redirectToSearchResults() {
        router.push(`/cauta/${search}`);
    }

    useEffect(() => {
        setSearch(encodeURIComponent(value));
    }, [value]);

    return (
        <form className={styles.searchForm}>
            <input
                type="search"
                value={value}
                onChange={onChange}
                className={styles.searchInput}
                placeholder="Caută..."
            />
            <button
                className={styles.searchButton}
                onClick={redirectToSearchResults}
            >
                <SearchSvg />
            </button>
        </form>
    );
}

已尝试对传递的值进行encodeURIComponent编码，但问题仍未解决，请问可能的原因是什么？

可能的原因及解决方案 #

• 表单默认提交行为未阻止：按钮位于<form>标签内，点击时会触发表单的默认提交行为（GET/POST请求），这会和router.push的客户端路由跳转冲突，导致请求混乱，进而出现RSC payload获取失败。
  解决方法：在点击事件中阻止默认行为，或者将跳转逻辑移到表单的onSubmit事件中：

  // 修改点击事件函数
  function redirectToSearchResults(event: React.MouseEvent<HTMLButtonElement>) {
      event.preventDefault();
      router.push(`/cauta/${encodeURIComponent(value)}`);
  }
  
  // 或者改用表单onSubmit事件
  function handleSubmit(event: React.FormEvent<HTMLFormElement>) {
      event.preventDefault();
      router.push(`/cauta/${encodeURIComponent(value)}`);
  }
  
  // 对应修改JSX
  <form className={styles.searchForm} onSubmit={handleSubmit}>
      {/* ...输入框 */}
      <button className={styles.searchButton} type="submit">
          <SearchSvg />
      </button>
  </form>
  

• 路由页面配置错误：检查搜索结果页的路由结构是否符合Next.js规范。如果使用App Router，需要确保存在app/cauta/[search]/page.tsx文件；如果使用Pages Router，需要存在pages/cauta/[search].tsx文件。路由路径不匹配会导致服务器无法返回正确的RSC响应。

• 状态同步延迟问题：当前通过useEffect同步编码后的搜索值，可能存在状态更新延迟，导致router.push时使用的是旧值。可以直接在跳转时编码，省去额外的状态：

  function redirectToSearchResults(event: React.MouseEvent<HTMLButtonElement>) {
      event.preventDefault();
      router.push(`/cauta/${encodeURIComponent(value)}`);
  }
  

  同时可以删除search状态和对应的useEffect，简化逻辑。

• 开发环境缓存干扰：Next.js开发环境的缓存可能导致异常，尝试重启开发服务器，或者清除浏览器缓存后再测试。

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