Migrating Grep from Create React App to Next.js
By Steven Van ·
Vercel moved its Grep code search from a client-rendered app to Next.js and Server Components without losing instant typing or focus.
Grep, Vercel's code search tool, has moved from Create React App to Next.js, a change Vercel described in a write-up of the migration. Grep was built as a fully client-rendered single-page app. With CRA deprecated, the team wanted a codebase that was faster and easier to maintain, while keeping the interactivity of a SPA and adding the performance gains of React Server Components. The post covers how Vercel handled the details.
- Search bar placement: Putting the bar in the root layout and repositioning it after hydration caused hydration mismatches and layout shift. Reading searchParams in the root layout would also have limited how much of the page could be prerendered. Instead, the homepage renders its own centred search bar and a server-rendered header shows one on every other route, so typing continues without losing focus when moving to /search.
- Search state: The two inputs stay in sync through URL query parameters, with local input state held in React Context and hooks for responsive typing.
- Data fetching: On first load of a results page, the server starts the query without awaiting it and streams HTML while it runs. TanStack Query picks the query up on the client through a HydrationBoundary, so nothing is fetched twice. Later searches, filters and pagination run client-side, with input changes debounced using React's useDeferredValue.
The post includes code samples for each step.
Vercel
The platform for frontend developers — deploy, preview, and scale web apps and AI agents with zero config.
View Vercel →