Loader

If you want to execute some server-side requests and use the result as props to your section, you can create a Loader

Important things

Your Loader function should be exported in your section file that uses this loader
Your Loader receive two parameters, a LoaderRequest object and a Props object.
Loader function should be named "Loader"
Your Loader can also receive external props
To receive external props, you should export loader props interface too
Your section should receive the loader properties in a property called "loader"

sections/product-shelf.tsx

// sections/product-shelf.tsx
interface Product {
  id: number;
  title: string;
  price: number;
  description: string;
  images: string[];
}

export interface ProductShelfProps {
  /** @description this description will be displayed on kiwi admin */
  title: string;
  loader: Product[];
}

export default function ProductShelf(props: ProductShelfProps) {
  return (
    <div>
      <h1>{title}</h1>
      <div>{props.loader?.map((product) => ...)}</div>
    </div>
  );
}

// Loader
export interface ProductsLoaderProps {
  /** @description this description will also be displayed on kiwi admin */
  items: number;
}

export async function Loader(req: LoaderRequest, props: ProductsLoaderProps): Promise<Product[]> {
  try {
    const response = await fetch(
      `https://.../products?limit=${props.items}`,
    );

    const data = response.json();
    return data;
  } catch (_) {
    return [];
  }
}

LoaderRequest

@kiwi-app/nextjs

export interface LoaderRequest<T = { [K: string]: string }> {
  params?: T;
  searchParams?: SearchParams;
  headers?: { [K: string]: string };
  cookies?: { [K: string]: string };
}

Properties
`params`	Dynamic params when you using a dynamic page like `product/:id`
`searchParams`	If your page is visited with some search parameters like `products?utm_medium=referral&utm_source=promo`, you will receive it as key-value object.
`headers`	If your page is requested with some header, you will receive it as key-value object.
`cookies`	If your page uses cookies like session cookies, you will receive it as key-value object.

Dynamic route loader

If you configure a dynamic page in kiwi admin, you can get this dynamic param in "params" property of your LoaderRequest object.

Let's supose that you create a dynamic page called products/:id, so you will receive an "id" inside your "params".

sections/product.tsx

// This ProductParams interface is only for locally type your "params" object.
interface ProductParams {
  id: string;
}

export async function Loader(req: LoaderRequest<ProductParams>): Promise<Product | null> {
  try {
    const response = await fetch(`https://.../products/${req.params.id}`);

    return product;
  } catch (e) {
    return null;
  }
}

For testing purposes when using dynamic page, kiwi admin display inputs for each path param to help you to test.

Loading

Define a placeholder while your section is mounting

Templates

Checkout our templates and section generation command