Server-side rendering - Depict Documentation

@depict-ai/react-ui ships a separate server build, selected automatically through the package’s node export condition. This page describes what that build does and does not render, so you can set correct expectations for frameworks like Next.js.

What renders on the server

Export	Server output
`DepictProvider`	Renders its children only; no SDK initialisation happens on the server
`SearchPage`, `CategoryPage`	An empty `<div>`; all content renders client-side after hydration
`BreadCrumbs`, `QuickLinks`	An empty `<div>`
`RecommendationSlider`	An empty `<div>`
`RecommendationGrid`	Server-rendered to HTML and hydrated on the client
`ImagePlaceholder`, `TextPlaceholder`	Server-rendered to HTML and hydrated on the client
`useSearchModal`, `useSearchField`	No-op stubs (`open` does nothing; `SearchField` renders an empty `<div>`)
`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:

app/depict-wrapper.tsx

"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 (
    <DepictProvider
      merchant="MERCHANT_ID"
      market="MARKET"
      locale={en}
      displayTransformers={/* see the display transformers page */}
    >
      {children}
    </DepictProvider>
  );
}

app/layout.tsx

import { DepictWrapper } from "./depict-wrapper";

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html>
      <body>
        <DepictWrapper>{children}</DepictWrapper>
      </body>
    </html>
  );
}

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.

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.

​What renders on the server

​Do you need "use client"?

​Placing DepictProvider in the Next.js App Router

​SEO expectations

​Limits and behavior

What renders on the server

Do you need `"use client"`?

Placing `DepictProvider` in the Next.js App Router

SEO expectations

Limits and behavior