URL
即状态。

const [state, setState] = useQueryState('foo', { shallow: false })

// 也可以在调用 setState 时传入该选项：
setState('bar', { shallow: false })

useQueryState('foo', {
  // 每秒最多向服务端发送一次更新
  shallow: false,
  throttleMs: 1000
})

// 也可以在调用 setState 时传入该选项：
setState('bar', { throttleMs: 1000 })

'use client'

import React from 'react'
import { useQueryState, parseAsString } from 'nuqs'

function ClientComponent({ data }) {
  // 1. 提供你自己的 useTransition 钩子：
  const [isLoading, startTransition] = React.useTransition()
  const [query, setQuery] = useQueryState(
    'query',
    // 2. 将 startTransition 作为选项传入：
    parseAsString.withOptions({
      startTransition,
      shallow: false // 选择通知服务端（仅 Next.js）
    })
  )
  // 3. 当查询通过 setQuery 更新、服务端正在重新渲染
  // 并流式传输 RSC 负载时，isLoading 会为 true。

  // 显示加载状态
  if (isLoading) return <div>Loading...</div>

  // 携带数据正常渲染
  return <div>{/*...*/}</div>
}

import { createLoader } from 'nuqs' // 或 'nuqs/server'

const searchParams = {
  q: parseAsString,
  page: parseAsInteger.withDefault(1)
}

const loadSearchParams = createLoader(searchParams)

const { q, page } = loadSearchParams('?q=hello&page=2')

// searchParams.ts
import {
  parseAsFloat,
  createSearchParamsCache
} from 'nuqs/server'

export const coordinatesParsers = {
  lat: parseAsFloat.withDefault(45.18),
  lng: parseAsFloat.withDefault(5.72)
}
export const coordinatesCache = createSearchParamsCache(
  coordinatesParsers
)

// page.tsx
import { coordinatesCache } from './searchParams'
import { Server } from './server'
import { Client } from './client'

export default async function Page({ searchParams }) {
  await coordinatesCache.parse(searchParams)
  return (
    <>
      <Server />
      <Suspense>
        <Client />
      </Suspense>
    </>
  )
}

// server.tsx
import { coordinatesCache } from './searchParams'

export function Server() {
  // 一次性获取全部键：
  const { lat, lng } = coordinatesCache.all()
  // 也可以单独访问各键：
  // const lat = coordinatesCache.get('lat')
  // const lng = coordinatesCache.get('lng')
  return (
    <span>
      Latitude: {lat} - Longitude: {lng}
    </span>
  )
}

// client.tsx
// prettier-ignore
;'use client'

import { useQueryStates } from 'nuqs'
import { coordinatesParsers } from './searchParams'

export function Client() {
  const [{ lat, lng }, setCoordinates] = useQueryStates(coordinatesParsers)
  // ...
}