`useSearchParams` doesn't read params on SSR

[skaldebane]

Describe the bug

Hi there! I'm using useSearchParams in a SvelteKit project using Remote functions. I rely on URL params for pagination, and pass them down as parameters to the remote function.

However, using useSearchParams for this has one big downside at the moment: it doesn't read the search params during server-side rendering, and instead uses default values from the schema.

This means that the initial SSR'd data coming to the client doesn't match what's in the URL search params, before JavaScript loads and useSearchParams finally parses the URL on the client, causing the remote function to reload again with the new params, which causes a flash of old data before the UI shows the final result.

I'm not sure if this is intended behavior, but it certainly seems to be a bug to me. Since useSearchParams relies on SvelteKit anyways (and uses page from $app/state), the constructor should override the defaults with anything that's already in the URL, so SSR works properly.

Not sure if this change would break any existing usages, but at the very least this can be configurable with an ssr option, for example.

I can submit a PR if it's not too hard to fix.

Reproduction

Reproduction on StackBlitz: https://stackblitz.com/edit/stackblitz-webcontainer-api-starter-wcepjv1n?file=src%2Froutes%2F%2Bpage.svelte

Add ?number=3 (or anything other than the default value, 1) to the URL, and you'll see the delayed loading in action.

System Info

System:
  OS: Linux 6.16 Fedora Linux 42 (Workstation Edition)
  CPU: (8) x64 11th Gen Intel(R) Core(TM) i5-1135G7 @ 2.40GHz
  Memory: 9.01 GB / 30.59 GB
  Container: Yes
  Shell: 5.9 - /usr/bin/zsh
Binaries:
  Node: 22.18.0 - $HOME/.nvm/versions/node/v22.18.0/bin/node
  Yarn: 1.22.22 - /usr/bin/yarn
  npm: 10.9.3 - $HOME/.nvm/versions/node/v22.18.0/bin/npm
  pnpm: 10.20.0 - $HOME/.local/share/pnpm/pnpm
Browsers:
  Firefox: 143.0.4
  Firefox Developer Edition: 143.0.4
  Zen: 144.0.2
npmPackages:
  @sveltejs/kit: ^2.48.4 => 2.48.4 
  runed: ^0.36.0 => 0.36.0 
  svelte: ^5.43.3 => 5.43.3

Severity

annoyance

[skaldebane]

This quick patch fixes it for me for now (applied using pnpm patch):

diff --git a/dist/utilities/use-search-params/use-search-params.svelte.js b/dist/utilities/use-search-params/use-search-params.svelte.js
index 8ddeb0eacf7ef5884c222536ff76588a4134d0c7..a1824bdc9779d7a5a8f78184b03efff484d316b1 100644
--- a/dist/utilities/use-search-params/use-search-params.svelte.js
+++ b/dist/utilities/use-search-params/use-search-params.svelte.js
@@ -1368,6 +1368,11 @@ export function useSearchParams(schema, options = {}) {
     const isMounted = new IsMounted();
     // Track if we've done initial setup (separate from cache initialization)
     let hasInitialized = false;
+    // Initial URL sync to local cache - on both server and client
+    if (!building && options.updateURL !== false) {
+        const urlParams = page.url.searchParams;
+        searchParams.syncFromURL(urlParams);
+    }
     // Only run initialization logic after hydration is complete
     $effect(() => {
         if (!isMounted.current || building)

I'm not super familiar with the code, so there may be edge cases I'm missing!