`; all content renders client-side after hydration | | `BreadCrumbs`, `QuickLinks` | An empty `

` | | `RecommendationSlider` | An empty `

`) | | `usePerformanceClient` | Returns a `dpc` whose methods throw on the server — call them in `useEffect` or event handlers | | `useFetchRecommendations` | `fetchRecommendations` throws on the server — call it client-side only | ## Do you need `"use client"`? Not for the SDK's own exports: the published build prepends `"use client";` to every file, so all `@depict-ai/react-ui` components and hooks are already client components. Your own components that call the SDK's hooks follow the normal React Server Components rules — a component of yours that calls `useSearchModal` still needs its own `"use client"` directive (or a client parent). ## Placing `DepictProvider` in the Next.js App Router Mount `DepictProvider` exactly once, wrapping the part of the tree that uses Depict components — typically via a client wrapper component rendered from your root layout: ```tsx app/depict-wrapper.tsx theme={null} "use client"; import { DepictProvider } from "@depict-ai/react-ui"; import { en } from "@depict-ai/react-ui/locales"; export function DepictWrapper({ children }: { children: React.ReactNode }) { return ( {children} ); } ``` ```tsx app/layout.tsx theme={null} import { DepictWrapper } from "./depict-wrapper"; export default function RootLayout({ children }: { children: React.ReactNode }) { return ( {children} ); } ``` On the server, `DepictProvider` renders its children unchanged; in the browser it initialises the SDK. You do not need to pass a `navigateFunction` in Next.js — see [routing](/react-ui-guide/setup/routing). ## SEO expectations Search results, category listing content, breadcrumbs, and quick links are not present in the server-rendered HTML — they are rendered client-side only. The SDK provides no server rendering of search or product listing content, so do not plan for listing content to be indexable from the initial HTML response. `RecommendationGrid` is the exception: it is rendered to HTML on the server and hydrated on the client. Note that its `recommendations` data still comes from a client-side fetch (`fetchRecommendations` throws on the server), so the server-rendered output is the grid structure, not recommendation content. ## Limits and behavior * One `DepictProvider` per page. Mounting a second one throws an error at runtime. * Back/forward scroll restoration on search and category pages is patched automatically by the provider. This patch does not work with React strict mode — with Next.js 13+ (strict mode on by default), scroll restoration requires `reactStrictMode: false` in `next.config.js`. * `@depict-ai/js-ui` has no server build; it targets browsers only. Use `@depict-ai/react-ui` in server-rendered React frameworks. Full prop reference: [React UI reference](/reference/search-sdk/search-react-sdk).