Fetching Content

There are two ways to read content from Vard: synchronously with vard.define() or asynchronously with vard.get().

vard.define() — synchronous, schema-first

define() takes a schema and returns the content object immediately. This is the recommended approach for most pages — it co-locates the field definitions with the component that uses them.

app/page.tsx


import { vard } from "@/lib/vard";
import { v } from "@vard-app/sdk";
 
export default async function Page() {
  const content = vard.define({
    hero: {
      title: v.string("Welcome"),
      cta: v.string("Get started"),
    },
  });
 
  return <h1>{content.hero.title}</h1>;
}

The return type is fully inferred — content.hero.title is typed as string.

vard.get() — async, schema-driven

If you’ve attached a schema when creating the client, vard.get() returns a typed promise with all your content:

lib/vard.ts


import { createVardNext } from "@vard-app/sdk/next";
import { v } from "@vard-app/sdk";
 
export const vard = createVardNext({
  apiKey: process.env.VARD_API_KEY,
  schema: {
    hero: { title: v.string("Welcome") },
    team: v.collection({ name: v.string(), photo: v.image() }),
  },
});

app/page.tsx


import { vard } from "@/lib/vard";
 
export default async function Page() {
  const content = await vard.get();
  // content.hero.title  → string
  // content.team        → Array<{ name: string, photo: string }>
}

vard.extend() — per-page schema fragments

For large sites, keep page-specific schema close to the page itself using vard.extend():

app/about/schema.ts


import { v } from "@vard-app/sdk";
 
export const aboutSchema = v.schema({
  about: {
    heading: v.string("About us"),
    body: v.richtext(),
  },
});

app/about/page.tsx


import { vard } from "@/lib/vard";
import { aboutSchema } from "./schema";
 
export default async function AboutPage() {
  const { about } = await vard.extend(aboutSchema).get();
  return <h1>{about.heading}</h1>;
}

Default values

When a field has no saved value (e.g. a newly added field), the default you pass to v.string() is returned. This means your site always renders correctly — you never get undefined back from a field.


v.string("Welcome")  // returns "Welcome" if no client value is set
v.string()           // returns "" if no client value is set
v.boolean(true)      // returns true if no client value is set

Caching and revalidation

The Next.js adapter uses fetch under the hood with Next.js cache semantics.


createVardNext({
  revalidate: 60,     // ISR: recheck every 60 seconds
})
 
createVardNext({
  cache: "no-store",  // fully dynamic: fetch on every request
})
 
createVardNext({
  // no cache/revalidate: static (force-cache), revalidates on redeploy only
})

See Cache Revalidation for on-demand revalidation via webhook.