Functions

Every function GioJS exports: server functions from @gio.js/core, client functions from @gio.js/react, and the testing kit.

Components and hooks have their own references (Components, Hooks), and so do the exports a page or route file declares (Page Exports).

Server functions

From @gio.js/core. They run in the Node worker: in getServerSideProps, page actions, route handlers and plugins.

Client functions

From @gio.js/react. Safe to import during server rendering: navigate() and the observer helpers do nothing there, and getDeploymentId() returns undefined. Only handleHardReload() must not be called outside the browser.

initAnimateObserver and observeElement

<Animate> uses one IntersectionObserver for every animated element on the page. observeElement(el) adds an element to it (creating the observer on first use); once at least 10% of the element is visible, its data-gio-animate-state attribute becomes entered and it is no longer observed. initAnimateObserver() only creates the observer. Both do nothing on the server. You need them only to give an element of your own the same entrance trigger.

Testing functions

From @gio.js/core/testing and @gio.js/core/vitest, for vitest and node:test. See the Testing guide.

Page exports and hooks

These used to be described on this page. Each now has its own reference; the short versions below keep their old links working.

getServerSideProps(ctx)

A page's per-request data loader. ctx carries method, path, params, query, lowercased headers, parsed cookies and locale. Return { props } (optionally with response headers and cache tags), a redirect, or { notFound: true }. See getServerSideProps.

export const revalidate

Seconds a page is cached, or false for a one-year max age - in practice until it is purged or a new deployment changes the cache key. Pages without it render on every request. See revalidate.

export const tags

Cache tags for every render of a cached page, purged with revalidateTag(). See tags.

revalidateTag(tag) / revalidatePath(path, options?)

Purge cached pages from server code. See revalidateTag and revalidatePath.

getStaticPaths()

Lists the concrete paths gio export pre-renders for a dynamic route. See getStaticPaths.

Route handler exports

A route.ts exports method handlers - GET, POST, PUT, PATCH, DELETE - and wsHandler for WebSockets. See HTTP methods and wsHandler.

Router hooks

usePathname(), useParams(), useSearchParams(), useLocale() and useRouter() from @gio.js/react read the page the router matched, on the server and in the browser alike. See Hooks; outside components, use navigate(). The pathname and params stay percent-encoded apart from unreserved characters (/blog/caf%C3%A9 gives caf%C3%A9). useSearchParams() keeps one value per key and not the order of the keys, and is always empty in a static export (see Router hooks).

broadcast()

See broadcast.

cspNonce()

See cspNonce.

Types

@gio.js/core exports a type for every file convention, so app code never restates the shapes inline (import type - nothing ships to the browser). Every runtime export's parameter and result types are exported too (CookieOptions, SessionStorage, RevalidateResult, MiddlewareRules, RedirectInit, IPCRequest / IPCResponse for plugins, ...). The TypeScript reference lists them all.

Route is a route pattern as the router writes it - '/posts/:id', '/docs/*slug' (one string with / separators), '/shop/*path?' (optional) - or a params shape like { id: string }. Once the generated .gio/routes.d.ts is in your tsconfig include (it is in the starters), a pattern must be one of your app's routes, so a typo fails tsc and editors autocomplete it - the same registry href() and useParams() use. Before the server first runs, any pattern is accepted and its params are read from the pattern itself. Leaving Route out types params as Record<string, string>.

import type { GetStaticPaths, PageProps, RouteHandler } from '@gio.js/core';

// app/docs/[...slug]/page.tsx - no getServerSideProps
export default function Doc({ params }: PageProps<'/docs/*slug'>) {
  return <h1>{params.slug.split('/').join(' / ')}</h1>;
}

export const getStaticPaths: GetStaticPaths<'/docs/*slug'> = () => ({
  paths: [{ params: { slug: 'intro' } }, { params: { slug: ['guides', 'setup'] } }],
});

// app/api/posts/[id]/route.ts
export const DELETE: RouteHandler<'/api/posts/:id'> = async (req) => {
  await db.posts.delete(req.params.id);
  return null;                                   // 204
};