Loaders let you fetch data securely from a database or anywhere else, directly inside any component.

import { useLoader } from 'firebolt' export function City({ id }) { const city = useLoader(getCity, id).read() return ( <div> <h1>{city.name}</h1> <p>{city.description}</p> </div> ) } export async function getCity(ctx, id) { return await ctx.db('cities').where({ id }).first() }

Loaders simplify the way you build apps:

  • Write business logic and access your database right alongside the components that use them.
  • They're designed to work with both Suspense and ErrorBoundaries the way React intended.
  • Loaders work seamlessly via server streaming and on the client.
  • Secure code is stripped completely from all client bundles.
  • Forget about writing API endpoints completely (unless you need them)

Context & Invalidation

All loader functions are called with a Context object that allows you to read/write cookies, perform redirects and set an expiration date on the data returned. You can also decorate the context object with access to a database etc in your firebolt.config.js.

If you set data to expire or manually invalidate data, it will be re-fetched in the background and seamlessly update the UI. Learn more on the useLoader and useCache pages.