Javascript – Next.js modify search params in server component without triggering data to refetch

I have a page with a form. I want to store the values of the form in the url so they can persist even if you accidentally refresh the page.

// 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>
        // Form ui here
    </div>

}

// page.tsx
export default async function Page(){
    const data = await getData() // fetches data from db
    
    return <div>
        // Some stuff is rendered based on data
        <Form/>
    </div>

}

The problem I’m having is that every time I add url search params, the page calls getData(), causing unnecessary fetching. Is there a way to add search params without causing data to refetch?

I know that, most of the time, you would want data to refetch when the search params change, but I don’t in this scenario.

I’ve tried turning the page into a client component instead, which works to call getData() only once, but that doesn’t seem to allow me to add metadata to the page. I’ve also seen people say that pages should be server components as much as possible.

Edit:
I think I’ve got it. I just needed to wrap all of my page content inside a client component and do all my fetching there.

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

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

    return <div>
        //content rendered here
        <Form/>
    </div>
}

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