Reading Data

Choose the right place to read data to keep your application predictable.

Quick chooser

• Server (RSC): Call nexus(def) in Server Components for initial page content.
• Client: Call useNexusQuery(def) in Client Components for interactive views.

Guideline: Prefer server-side reads for SEO and initial content; use client-side reads for interactive or user-specific data.

Server read (RSC)

import { nexus } from "next-nexus/server";
import { usersDefinition } from "@/definitions";
 
// Next.js 15+ (params is a Promise)
export default async function Page({
  params,
}: {
  params: Promise<{ id: string }>;
}) {
  const { id } = await params;
  const res = await nexus(usersDefinition.getById(id));
  return <p>{res.data.id}</p>;
}

Note: Follow the Next.js version guide for Page props.

• Next.js 15+: params and searchParams are Promises. Use const { id } = await params.
• Next.js 14.x and below: They are plain objects. Use params.id directly.

Client read (hook)

"use client";
import { useNexusQuery } from "next-nexus/client";
import { usersDefinition } from "@/definitions";
 
export function UserPanel({ id }: { id: string }) {
  // Pass a concrete GET definition (e.g., from a factory)
  const { data, error, isPending } = useNexusQuery(usersDefinition.getById(id));
  if (isPending && !data) return <p>Loading…</p>;
  if (error) return <p>Error</p>;
  return <pre>{JSON.stringify(data, null, 2)}</pre>;
}

Tips

• The definition (including its parameters) determines the stable cache key. Data read on the server is seamlessly reused on the client via hydration.
• Configure server.tags/revalidate and client.tags/revalidate in the definition to map to Next.js caching behavior.

See also: nexus, useNexusQuery, Definitions.