fix: search hydration errors #1358

alexdln · 2026-02-10T23:23:44Z

There was a hydration error that caused re-rendering and repeated requests.

There were three problems:

For Algolia search, if a query was processed on the server or retrieved from the cache, there was no place on the client to add suggestions, so they disappeared. Fixed it by returning them to useLazyAsyncData and, when ready, I re-assign them into suggestions ref.
For search method configuration - we simply didn't know the user's preferred method on the server. So the server always worked with algolia, and the client could then rehydrate with npm. Fixed by storing this section additionally in a cookie and reusing it from there
npm suggestions had a similar issue to the first one: the logic was only executed on the server, but never executed on the client and, as a result, server send suggestion, but client missed this information (that's why this option doesn't work at all in production right now). Refactored the npm suggestions retrieval to "useLazyAsyncData" as well

vercel · 2026-02-10T23:23:52Z

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
npmx.dev	Ready	Preview, Comment	Feb 11, 2026 10:00am

2 Skipped Deployments

Project	Deployment	Actions	Updated (UTC)
docs.npmx.dev	Ignored	Preview	Feb 11, 2026 10:00am
npmx-lunaria	Ignored		Feb 11, 2026 10:00am

codecov · 2026-02-10T23:26:20Z

Codecov Report

❌ Patch coverage is 58.33333% with 55 lines in your changes missing coverage. Please review.
✅ All tests successful. No failed tests found.

Files with missing lines	Patch %	Lines
app/composables/npm/useSearch.ts	69.00%	29 Missing and 2 partials ⚠️
app/components/Header/SearchBox.vue	15.38%	9 Missing and 2 partials ⚠️
app/components/SearchProviderToggle.client.vue	28.57%	9 Missing and 1 partial ⚠️
app/pages/index.vue	0.00%	2 Missing and 1 partial ⚠️

📢 Thoughts on this report? Let us know!

userquin · 2026-02-11T00:27:06Z

why at search page with nuxt on input, pressing enter navigates to /package/nuxt? maybe because exact search entry found?

alexdln · 2026-02-11T00:30:16Z

@userquin looks like the same behavior in production now already, I can look at it as the next issue (tomorrow 🫠)

coderabbitai · 2026-02-11T00:31:43Z

Note

Reviews paused

It looks like this branch is under active development. To avoid overwhelming you with review comments due to an influx of new commits, CodeRabbit has automatically paused this review. You can configure this behavior by changing the reviews.auto_review.auto_pause_after_reviewed_commits setting.

Use the following commands to manage reviews:

@coderabbitai resume to resume automatic reviews.
@coderabbitai review to trigger a single review.

Use the checkboxes below for quick actions:

▶️ Resume reviews
🔍 Trigger review

📝 Walkthrough

Walkthrough

This pull request changes search to be provider-aware by adding an explicit searchProvider parameter to the useSearch composable and deriving provider from the route query (p) where applicable. It standardises the returned payload shape to always expose { searchResponse, suggestions, packageAvailability }, replaces scalar suggestion request tracking with a ref-based counter, and centralises provider-driven behaviour across components and composables (URL updates, toggles, and async-data keys). Call sites are updated to pass the provider and caches/watchers are adjusted to react to provider changes.

Possibly related PRs

perf: speed up algolia 🚀 + split out search suggestion logic #1271: Modifies app/composables/npm/useSearch.ts and related suggestion/packageAvailability logic; closely overlaps with payload and suggestion changes.
feat: support algolia for package search + org/user package listing #1204: Implements provider-based search wiring and updates call sites to pass an explicit provider, matching the signature changes.
refactor: create useSearch and extract npm logic #1236: Adjusts useSearch API and consolidates returned payloads; strongly related to this refactor.

Suggested labels

front

Suggested reviewers

danielroe

🚥 Pre-merge checks | ✅ 1

✅ Passed checks (1 passed)

Check name	Status	Explanation
Description check	✅ Passed	The pull request description clearly explains the hydration errors fixed: missing client-side suggestion handling, server-side provider awareness via cookies, and npm suggestions execution on the client.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing touches

📝 Generate docstrings

🧪 Generate unit tests (beta)

Create PR with unit tests
Post copyable unit tests in a comment

No actionable comments were generated in the recent review. 🎉

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

coderabbitai

Actionable comments posted: 2

🧹 Nitpick comments (1)

app/composables/npm/useSearch.ts (1)
440-448: Variable shadowing: npmSuggestions parameter obscures the outer useLazyAsyncData const.

The destructured parameter npmSuggestions at line 442 shadows the npmSuggestions constant declared at line 427. While technically correct (the outer is only used for the watch source), this reduces readability.
♻️ Suggested rename for clarity
   watch(
     [() => asyncData.data.value.suggestions, () => npmSuggestions.data.value.suggestions],
-    ([algoliaSuggestions, npmSuggestions]) => {
-      if (algoliaSuggestions.length || npmSuggestions.length) {
-        suggestions.value = algoliaSuggestions.length ? algoliaSuggestions : npmSuggestions
+    ([algoliaSuggestions, npmSuggestionsData]) => {
+      if (algoliaSuggestions.length || npmSuggestionsData.length) {
+        suggestions.value = algoliaSuggestions.length ? algoliaSuggestions : npmSuggestionsData
       }
     },
     { immediate: true },
   )

app/composables/npm/useSearch.ts

app/composables/useSettings.ts

coderabbitai

Actionable comments posted: 1

🧹 Nitpick comments (1)

app/composables/npm/useSearch.ts (1)

443-443: Inconsistent optional chaining on asyncData.data.value.

Line 443 uses asyncData.data.value.suggestions (no optional chaining) while line 454 uses asyncData.data.value?.packageAvailability (with optional chaining). Since emptySearchPayload is provided as the default, asyncData.data.value should never be null—consider using consistent access patterns for clarity.

Also applies to: 454-454

app/composables/npm/useSearch.ts

danielroe · 2026-02-11T01:02:37Z

app/composables/useSettings.ts

+  const cookie = useCookie('search-provider', {
+    secure: true,
+    sameSite: 'strict',
+    maxAge: 60 * 60 * 24 * 30,
+    path: '/',
+  })


ideally we wouldn't have a cookie here, so that we could cache the search page (by query key).

I think we could show algolia data in initial load, but refresh on client-side with npm data if that's what they prefer.

wdyt?

This will be a very slow behavior. It will first download the full HTML, then clean everything up and start loading npm...

It feels like in this case - this option will be an example of a bad experience and will rather harm the service than give the user an option

But I had one pretty crazy idea of adding the provider to the query before this approach. Is that suitable for us?

So, if the user has npm selected by default, every time they visit the search page, the provider will be added along with the query. But this won't work if they go directly to the search...

Done. This setting is now just a preference. If the user accesses the search via any mechanism within the site, the provider will also be added to the URL. Otherwise, the page will continue to use algolia until the user switches to npm.

hm. so I was thinking that algolia is enabled by default, so this is the edge case of the user preferring npm and hard reloading the search page rather than using client-side navigation.

the other reason was that algolia is much faster and only requires one http request rather than three, so we are more performant by skipping the npm search.

(but I guess if you have npmx as a search engine in the browser, and prefer npm, you might hit this more often than I originally expected)

we could also prerender the search page and do the fetching entirely on the client side. this would mean no danger of mismatch, very fast initial response, no double fetching....

Yes, definitely, rare case, but sometimes the results don't load and the user reloads the page and gets one more bad experience.

I think the current solution is the most optimal in terms of scenario coverage. What do you think about latest changes?

UPD: updated a bit, now it works as I planned and is unnoticeable for the user

Another nice bonus of the current loading approach is that we now cache suggestions. I'd like to keep this logic anyway - it improves behavior for both providers.

And I think question now only in the routing behavior with the npm provider. I can remove/change it, but to prevent the server from returning results under algolia, we'll still need to let the server know it's npm

@danielroe check the current behavior please, perhaps it already solves the problems

coderabbitai

Actionable comments posted: 1

🧹 Nitpick comments (1)

app/composables/npm/useSearch.ts (1)
442-463: Inconsistent optional chaining between watchers.

Line 443 accesses asyncData.data.value.suggestions without optional chaining, line 454 uses asyncData.data.value?.packageAvailability with optional chaining, and line 455 accesses npmSuggestions.data.value.packageAvailability without it.

While this is safe at runtime due to the default values, the inconsistency reduces readability. Consider standardising the access pattern.
♻️ Suggested consistency improvement
   watch(
-    [() => asyncData.data.value.suggestions, () => npmSuggestions.data.value.suggestions],
+    [() => asyncData.data.value?.suggestions ?? [], () => npmSuggestions.data.value?.suggestions ?? []],
     ([algoliaSuggestions, npmSuggestionsValue]) => {
       if (algoliaSuggestions.length || npmSuggestionsValue.length) {
         suggestions.value = algoliaSuggestions.length ? algoliaSuggestions : npmSuggestionsValue
       }
     },
     { immediate: true },
   )

   watch(
     [
-      () => asyncData.data.value?.packageAvailability,
-      () => npmSuggestions.data.value.packageAvailability,
+      () => asyncData.data.value?.packageAvailability ?? null,
+      () => npmSuggestions.data.value?.packageAvailability ?? null,
     ],

app/composables/npm/useSearch.ts

coderabbitai

Actionable comments posted: 3

app/composables/npm/useOrgPackages.ts

app/composables/npm/useSearch.ts

app/pages/search.vue

alexdln added 3 commits February 10, 2026 22:20

fix: correct search data transferring server to client

e461e4c

fix: correct search data transferring client to server

552240b

fix: correct npm search data transferring server to client

73c4d84

vercel bot deployed to Preview – npmx.dev February 10, 2026 23:25 View deployment

alexdln marked this pull request as ready for review February 11, 2026 00:27

coderabbitai bot reviewed Feb 11, 2026

View reviewed changes

app/composables/npm/useSearch.ts Show resolved Hide resolved

app/composables/useSettings.ts Outdated Show resolved Hide resolved

fix: apply suggestion about check-package-exist

1f6de93

vercel bot deployed to Preview – npmx.dev February 11, 2026 00:36 View deployment

coderabbitai bot reviewed Feb 11, 2026

View reviewed changes

app/composables/npm/useSearch.ts Show resolved Hide resolved

fix: rename arg in use-search

d62de7c

danielroe reviewed Feb 11, 2026

View reviewed changes

vercel bot deployed to Preview – npmx.dev February 11, 2026 01:03 View deployment

coderabbitai bot reviewed Feb 11, 2026

View reviewed changes

app/composables/npm/useSearch.ts Show resolved Hide resolved

fix: use query param for search provider instead of cookie

e181dd2

vercel bot deployed to Preview – npmx.dev February 11, 2026 02:01 View deployment

fix: add provider param only for npm

bd9b041

vercel bot deployed to Preview – npmx.dev February 11, 2026 02:08 View deployment

fix: fix navigation to search for provider

e024a63

vercel bot deployed to Preview – npmx.dev February 11, 2026 02:26 View deployment

alexdln added 2 commits February 11, 2026 09:42

test: update search navigation test for suggestions

e3e470c

fix: always wait promises in validate suggestions

2277c02

vercel bot deployed to Preview – npmx.dev February 11, 2026 09:45 View deployment

coderabbitai bot reviewed Feb 11, 2026

View reviewed changes

app/composables/npm/useOrgPackages.ts Outdated Show resolved Hide resolved

app/composables/npm/useSearch.ts Show resolved Hide resolved

app/pages/search.vue Outdated Show resolved Hide resolved

fix: update provider detection logic

9d6fa0a

vercel bot deployed to Preview – npmx.dev February 11, 2026 10:00 View deployment

Uh oh!

fix: search hydration errors #1358

Are you sure you want to change the base?

fix: search hydration errors #1358

Conversation

alexdln commented Feb 10, 2026 • edited by danielroe Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

vercel bot commented Feb 10, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

codecov bot commented Feb 10, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

userquin commented Feb 11, 2026

Uh oh!

alexdln commented Feb 11, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

coderabbitai bot commented Feb 11, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Reviews paused

Walkthrough

Possibly related PRs

Suggested labels

Suggested reviewers

Uh oh!

coderabbitai bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

coderabbitai bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

danielroe Feb 11, 2026

Choose a reason for hiding this comment

Uh oh!

alexdln Feb 11, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

alexdln Feb 11, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

alexdln Feb 11, 2026

Choose a reason for hiding this comment

Uh oh!

danielroe Feb 11, 2026

Choose a reason for hiding this comment

Uh oh!

alexdln Feb 11, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

alexdln Feb 11, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

coderabbitai bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

coderabbitai bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

alexdln commented Feb 10, 2026 •

edited by danielroe

Loading

vercel bot commented Feb 10, 2026 •

edited

Loading

codecov bot commented Feb 10, 2026 •

edited

Loading

alexdln commented Feb 11, 2026 •

edited

Loading

coderabbitai bot commented Feb 11, 2026 •

edited

Loading

alexdln Feb 11, 2026 •

edited

Loading

alexdln Feb 11, 2026 •

edited

Loading

alexdln Feb 11, 2026 •

edited

Loading

alexdln Feb 11, 2026 •

edited

Loading