Server rendering

Fetch on the server and render with preloaded data.

Server-safe imports

Use react-7tv/core on the server. It has no React runtime import. The main entry is a client boundary for React Server Components.

app/page.tsx

import { fetchEmoteSet } from "react-7tv/core";
import { Message } from "./Message";

export default async function Page() {
  const emotes = await fetchEmoteSet("01M1M3EN0JK4ZWJAP3YPMQMV5T");
  return <Message emotes={emotes} />;
}

Pass data to the client

app/Message.tsx

"use client";
import { Text7tv, type EmoteModel7tv } from "react-7tv";

export function Message({ emotes }: {
  emotes: readonly EmoteModel7tv[];
}) {
  return <Text7tv emotes={emotes}>Hello catJAM gg</Text7tv>;
}

Hydration

Controlled emotes disable the provider’s network request.
initialEmotes are rendered while the client fetches a remote set.
Keep the same initial data on the server and client.
Requests start in effects, never during server rendering.

NextReact API