Next 13.4中如何像useEffect般在React服务端组件中随新状态重新请求数据

针对你提到的场景（客户端Search组件状态变化触发服务端Navbar组件重新获取数据），结合Next.js 13 App Router的架构特性，以下是几种实用的解决方案：

方案1：通过路由搜索参数传递状态（推荐的Next.js原生方式） #

Next.js的App Router中，路由参数（包括searchParams）变化会触发服务端组件的重新渲染。你可以让客户端的Search组件更新URL的搜索参数，服务端Navbar组件读取该参数后重新请求数据。

客户端Search组件代码： #

'use client';

import { useRouter, useSearchParams } from 'next/navigation';
import { useState } from 'react';

export default function Search() {
  const router = useRouter();
  const searchParams = useSearchParams();
  const [query, setQuery] = useState(searchParams.get('q') || '');

  const handleSearch = (e: React.FormEvent) => {
    e.preventDefault();
    const params = new URLSearchParams(searchParams);
    query ? params.set('q', query) : params.delete('q');
    // 更新路由搜索参数，触发服务端组件重渲染
    router.push(`?${params.toString()}`);
  };

  return (
    <form onSubmit={handleSearch}>
      <input
        type="text"
        value={query}
        onChange={(e) => setQuery(e.target.value)}
        placeholder="搜索..."
      />
      <button type="submit">搜索</button>
    </form>
  );
}

服务端Navbar组件代码： #

// 服务端组件，无需加'use client'
export default async function Navbar({ searchParams }: { searchParams: { q?: string } }) {
  const searchQuery = searchParams.q;
  
  // 携带新参数重新发起数据请求
  const navbarData = await fetch(`https://your-api.com/navbar-data?q=${searchQuery || ''}`, {
    next: { revalidate: 60 } // 可选：设置缓存策略
  }).then(res => res.json());

  return (
    <nav>
      <ul>
        {navbarData.items.map(item => (
          <li key={item.id}>{item.name}</li>
        ))}
      </ul>
    </nav>
  );
}

原理： #

当Search组件更新路由的q参数时，Next.js会重新渲染服务端Navbar组件，并将最新的searchParams传递给它，组件内的数据请求会携带新参数执行，实现类似useEffect的触发效果。

方案2：客户端组件嵌套服务端组件，通过props传递参数 #

Next.js 13允许客户端组件嵌套服务端组件。你可以将Navbar作为Search的子组件，当Search的状态变化时，将搜索关键词作为props传递给Navbar，触发服务端组件重新渲染并请求数据。

客户端Search组件代码： #

'use client';

import { useState } from 'react';
import Navbar from './Navbar'; // 服务端组件

export default function Search() {
  const [query, setQuery] = useState('');

  return (
    <div>
      <input
        type="text"
        value={query}
        onChange={(e) => setQuery(e.target.value)}
        placeholder="搜索..."
      />
      {/* 将客户端状态作为props传递给服务端组件 */}
      <Navbar searchQuery={query} />
    </div>
  );
}

服务端Navbar组件代码： #

// 服务端组件
export default async function Navbar({ searchQuery }: { searchQuery: string }) {
  // 基于客户端传递的参数请求数据
  const navbarData = await fetch(`https://your-api.com/navbar-data?q=${searchQuery || ''}`).then(res => res.json());

  return (
    <nav>
      {/* 渲染数据 */}
      <ul>
        {navbarData.items.map(item => (
          <li key={item.id}>{item.name}</li>
        ))}
      </ul>
    </nav>
  );
}

注意事项： #

• 传递给服务端组件的props必须是可序列化的（字符串、数字、布尔值等，不能是函数或复杂对象）。
• 每次props变化，服务端组件会在服务器端重新渲染，执行数据请求逻辑。

方案3：使用Server Actions + 缓存失效（适合复杂状态场景） #

如果你的状态逻辑比较复杂，不想依赖路由或props传递，可以使用Next.js的Server Actions结合缓存标签（cache tags），触发服务端组件重新获取数据。

步骤： #

1. 在服务端组件中，给数据请求添加缓存标签：

// 服务端Navbar组件
export default async function Navbar() {
  const navbarData = await fetch(`https://your-api.com/navbar-data`, {
    next: { tags: ['navbar-data'] } // 添加缓存标签
  }).then(res => res.json());

  return <nav>{/* 渲染数据 */}</nav>;
}

2. 创建Server Action，用于失效缓存：

// actions.ts（服务端文件，无需'use client'）
'use server';

import { revalidateTag } from 'next/cache';

export async function triggerNavbarRefresh(query: string) {
  // 可选：如果需要先更新后端数据，可在此调用API
  // await fetch(`https://your-api.com/update-search`, { method: 'POST', body: JSON.stringify({ query }) });

  // 失效指定标签的缓存，触发服务端组件重新获取数据
  revalidateTag('navbar-data');
}

3. 在客户端Search组件中调用Server Action：

'use client';

import { useState } from 'react';
import { triggerNavbarRefresh } from './actions';

export default function Search() {
  const [query, setQuery] = useState('');

  const handleSearch = async () => {
    await triggerNavbarRefresh(query);
  };

  return (
    <div>
      <input
        type="text"
        value={query}
        onChange={(e) => setQuery(e.target.value)}
        placeholder="搜索..."
      />
      <button onClick={handleSearch}>搜索</button>
    </div>
  );
}

原理： #

当客户端调用triggerNavbarRefresh这个Server Action时，revalidateTag会让带有navbar-data标签的缓存失效，Next.js会重新渲染服务端Navbar组件并执行数据请求，获取最新数据。

架构理解小贴士 #

Next.js 13的App Router将组件分为服务端组件（默认）和客户端组件（需标记'use client'）：

• 服务端组件在服务器执行，没有浏览器环境，不能使用客户端状态或副作用钩子（如useEffect）。
• 客户端组件在浏览器执行，可以管理状态、处理交互，但数据获取需要通过API或Server Actions。

要让服务端组件响应客户端状态变化，核心是触发服务端组件的重新渲染，而触发方式主要依赖：

1. 路由参数变化（路由导航会触发服务端渲染）
2. 客户端组件传递的props变化（服务端组件作为子组件时）
3. 缓存失效（通过revalidateTag或revalidatePath）

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