Is it possible to re-render the Server Component when the Query State changes?

[lamualfa]

Description

I want to update the h1 component in page.tsx when setValue function in SearchInput.tsx is called. Is it possible?

Honestly in the real case, I want to re-run the Database query within the Server Component when the q param changes.

page.tsx

type PageProps = {
  searchParams: {
    q: string
  }
}
export default async function Page(props: PageProps) {
  return (
    <>
      <h1>{props.searchParams.q}</h1>
      <SearchInput />
    </>
  )
}

SearchInput.tsx

'use client'

import { Search } from '@carbon/react'
import { useQueryState } from 'next-usequerystate'

export function SearchInput() {
  const [unsafeValue, setValue] = useQueryState('q')
  const value = unsafeValue || undefined

  return (
    <Search
      labelText
      value={value}
      onChange={(e) => {
        setValue(e.target.value)
      }}
    ></Search>
  )
}

I've tested the code above but it didn't work. Server Component did not re-render.

My Stack

• [email protected]
• [email protected]

[franky47]

Try this:

const [unsafeValue, setValue] = useQueryState('q')
  .withOptions({ shallow: false })
  .withDefault('') // May I recommend this change too, to turn null into empty strings and simplify logic later

Shallow mode is on by default (client-only updates), you have to opt-in to notifying the server.

If you are connecting this to a database query, you might want to run the parser on the server too.

FYI, for high-frequency updates like text inputs, you won't receive a request per character typed. Instead, they'll be batched and throttled at around 50ms. This should help avoid overloading your server and/or database.

[lamualfa]

Try this:

const [unsafeValue, setValue] = useQueryState('q')
  .withOptions({ shallow: false })
  .withDefault('') // May I recommend this change too, to turn null into empty strings and simplify logic later

Shallow mode is on by default (client-only updates), you have to opt-in to notifying the server.

Ok, It works. Thank you very much.

If you are connecting this to a database query, you might want to run the parser on the server too.

Thanks, I'll use it.

FYI, for high-frequency updates like text inputs, you won't receive a request per character typed. Instead, they'll be batched and throttled at around 50ms. This should help avoid overloading your server and/or database.

Should I throttle manually or next-usequerystate already handle it internally so I can safely run the setValue in high-frequency updates like text input?

[franky47]

Should I throttle manually or next-usequerystate already handle it internally so I can safely run the setValue in high-frequency updates like text input?

It's done internally. You may experience some issues on Safari though, for which the rate limits are incredibly low..

[lamualfa]

Yosh 🔥

Thank you so much for the library and for your support @franky47.