Next.js：在服务器组件中修改搜索参数不触发数据重取

我有一个带表单的页面，希望将表单值存储在URL中，这样意外刷新页面后仍能保留这些值。

相关代码如下：

// Form.tsx
"use client"
export default function Form(){
    const pathname = usePathname()
    const searchParams = useSearchParams()
    const router = useRouter()
    
    const [content, setContent] = useState(searchParams.get("content") || "")
    
    useEffect(() => {
        const newSearchParams = new UrlSearchParams({ content })
        router.replace(pathname + "?" + newSearchParams.toString(), { scroll: false })
    }, [content, pathname, router])

    return <div>
        // 表单UI部分
    </div>

}

// page.tsx
export default async function Page(){
    const data = await getData() // 从数据库获取数据
    
    return <div>
        // 根据data渲染内容
        <Form/>
    </div>

}

目前遇到的问题：每次添加URL搜索参数时，页面都会调用getData()，造成不必要的数据请求。想请教有没有办法在添加搜索参数时不触发数据重取？

我清楚大多数场景下，搜索参数变化确实需要重新获取数据，但我的场景不需要。我试过将页面改为客户端组件，这样getData()只会调用一次，但这样无法为页面添加元数据，而且我也知道页面应尽可能使用服务器组件。

将所有页面内容包裹在一个客户端组件中，在该组件内完成所有数据请求：

// Inner.tsx
"use client"
export default function Inner(){
    const [data, setData] = useState()

    useEffect(() => {
        getData().then(res => setData(res))
    }, [])

    return <div>
        // 渲染内容
        <Form/>
    </div>
}

// page.tsx
export default function Page(){
    return <Inner/>
}

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