Loading Page Data

When a loader file is specified in the route config, it gets processed in the server.

 
    /**
    * Routes for your app
    * @type {import("cottonjs").Routes}
    */
    const routes = {
        "/microwaves": {
            page: "src/kitchen/Microwaves.tsx",
            loader: "src/kitchen/Microwaves.loader.ts",
        },
    };

    export default routes;

Let's take a look at a sample loader file

 
      // Microwave.loader.ts

      import { CottonLoader } from "cottonjs";

      // A loader can be an async function as well
      const loader: CottonLoader = () => {
        return getMicrowaves(); // [ { name: "m12", title: "Model M12", price: 60 }, ... ]
      }

In this example, the loader in the CottonData will look something like this


      {
        route: { key: "microwaves", ... }
        loader: [ { name: "m12", title: "Model M12", price: 60 }, ...]
      }