Examples

Reference apps showing common GioJS patterns.

Blog

A static blog with dynamic post pages. Demonstrates revalidate=false for the post listing and revalidate=3600 for individual posts fetched from a CMS.

Static home page with revalidate = false
Dynamic /posts/[slug] with revalidate = 3600
getServerSideProps fetching from a headless CMS
GioImage for optimized post cover images

E-commerce product catalog

Product listing with search, category filters, and individual product pages. Uses Redis for shared cache across multiple instances.

Category pages cached for 5 minutes
Product pages cached for 1 hour
Search results never cached (force-dynamic)
GioLink for client-side navigation between categories
Redis multi-instance cache sharing

This documentation site

The site you are reading right now is a GioJS app. It was built as part of the P3.7 dogfooding phase to validate that GioJS can serve real-world docs sites with layout nesting and static caching.

Nested layouts (root layout + docs layout)
All pages static with revalidate = false
Redirect from / to /docs/getting-started
Sidebar with server-side active link highlighting
Mobile hamburger navigation (vanilla JS, no hydration)
Copy-to-clipboard on code blocks

Common patterns

Static page with layout

typescript

// app/about/page.tsx
import React from 'react';

export const revalidate = false;

export default function AboutPage(): React.JSX.Element {
  return <h1>About us</h1>;
}

Dynamic page with data fetching

typescript

// app/posts/[id]/page.tsx
import React from 'react';

interface Props {
  post: { title: string; body: string };
}

export const revalidate = 3600; // revalidate every hour

export async function getServerSideProps(ctx: {
  params: Record<string, string>;
}) {
  const post = await fetch(`https://api.example.com/posts/${ctx.params.id}`)
    .then(r => r.json());
  return { post };
}

export default function PostPage({ post }: Props): React.JSX.Element {
  return (
    <article>
      <h1>{post.title}</h1>
      <p>{post.body}</p>
    </article>
  );
}

Redirect

typescript

export async function getServerSideProps() {
  return {
    redirect: { destination: '/new-path', permanent: false },
  };
}

export default function Page() { return null; }