React

You can display genko.me content in a React app without Next.js, including a Vite SPA, React Router app, or create-react-app setup. The delivery API is REST. Call @genko-me/sdk in the browser and render the result in your own components.

There are no components like Next.js List and View that handle both fetching and rendering. You write the fetch and state logic yourself. If you use Next.js, see Next.js.

Packages

Unavailable in this setup:

• @genko-me/react/next (List, View, Pagination, state components, and preview notice). These server components depend on server-only, next/navigation, and next/server.
• @genko-me/sdk/next (nextPreview and nextRevalidate). These require Next.js Route Handlers, Draft Mode, and revalidatePath.

API keys and SEO

An API key used directly in the browser is public. Anyone can inspect the bundled value or the X-API-KEY request header. Even though it is read-only, assume anyone can read the APIs allowed by that key.

• Limit the key to selected APIs whose content can be public.
• Give it a short lifetime and rotate it regularly.
• For private data, fetch on your own server and return JSON to the browser.

A browser-rendered SPA has SEO limits. Its initial HTML contains an empty <div id="root">; content appears after JavaScript runs. The server cannot return entry-specific Open Graph titles and descriptions. If search traffic or social previews matter, use a server-rendered framework such as Next.js, Nuxt, SvelteKit, or Astro.

Good fit

• News or help content in signed-in screens or internal tools that do not depend on search traffic.
• Replacing one section of an existing SPA with genko.me content.
• Showing updates immediately without rebuilding the app.

Limitations

• Public pages that depend on search engines or social previews.
• Applications that must keep the API key private.
• Draft preview notices and noindex metadata; implement the behavior supplied by View yourself.
• Receiving webhooks without a server. See the approach in the tutorial.

Next steps

• Get started: Install and display a list and a single entry
• Tutorial: Add pagination, draft previews, and content updates
• Fetch content: Available fetch methods
• Delivery API: Fetch over HTTP without the SDK