Frugal

Static by default

By default Frugal only produces static html at build time, working like a static site generator.

Each static page will be rebuilt only if the underlying data or code changed. If you use Frugal as a server, static page can also be generated just in time (on the first request), or regenerated via webhook.

With a good content strategy you don't need to redeploy when your content changes

static-page.ts

import { DataResponse } from "http://deno.land/x/frugal/mod.ts"
                        
export const route = '/';

export function generate() {
    return new DataResponse({
        data: {
            hello: 'world'
        }
    });
}

export function render({ data }) {
    return `<html>
        <body>
            <h1>Hello ${data.hello} !</h1>
        </body>
    </html>`;
}

Server side rendering when needed

Frugal comes with a server that can render dynamic pages at request time. Pages can answer to GET, POST, PUT and DELETE with fully controlable responses (status and headers).

dynamic-page.ts

import { DataResponse } from "http://deno.land/x/frugal/mod.ts"
                        
export const route = '/:id';
    
export const type = 'dynamic'

export async function GET({ path }) {
    return new DataResponse({
        data: {
            post: await getPostById(path.id)
        }
    });
}

export function render({ data }) {
    return `<html>
        <body>
            <h1>${data.post.title}</h1>
            ${data.post.content}
        </body>
    </html>`;
}

Progressive enhancement via scripts

Any module declared as script will be bundled and executed in the browser, allowing you to add interactivity to your pages where you need it.

Clients that can run those scripts will get an enhanced experience, those that can't will get a functional html page.

Those "scripts" are the building blocks for island hydration if you use a client-side UI framework.

import { DataResponse } from "http://deno.land/x/frugal/mod.ts"
import './log.script.ts'
                        
export const route = '/';

export function generate() {
    return new DataResponse({
        data: {
            hello: 'world'
        }
    });
}

export function render({ data }) {
    return `<html>
        <body>
            <h1>Hello ${data.hello} !</h1>
        </body>
    </html>`;
}

if (import.meta.environment === 'client') {
    console.log('Hello world')
}

1
2
3

Island hydration

Based on scripts, Frugal implements an integration with Preact and Svelte. You can describe the whole UI with thoses framework, and optionnaly declare island of interactivity that will be bundled, served and hydrated on the client.

If you want to use another UI framework, integrations with Frugal via scripts should be easy to write.

This is an interactive island

It was hydrated on the client with an initial value of 5 supplied by the server

import { DataResponse, } from "http://deno.land/x/frugal/page.ts"
import { getRenderFrom } from "http://deno.land/x/frugal/runtime/preact.server.ts"
import { Page } from "./Page.tsx";

export const route = '/';

export function generate() {
    return new DataResponse({
        data: {
            hello: 'world'
        }
    });
}

export const render = getRenderFrom(Page)

import { PageProps, Head, useData } from "http://deno.land/x/frugal/runtime/preact.server.ts";
import { CounterIsland } from './CounterIsland.tsx'

function Page(pageProps: PageProps) {
    const scriptSrc = assets["script"]?.[descriptor];
    const data = useData();
    return <>
        <Head>
            {scriptSrc && <script type="module" src={scriptSrc}></script>}
        </Head>
        <h1>Hello {data.hello}</h1>
        <CounterIsland />
    </>
}

import { Island } from "http://deno.land/x/frugal/runtime/preact.client.ts";

import { NAME } from "./CounterIsland.script.ts";
import { Counter } from "./Counter.tsx";

export function CounterIsland() {
    return <Island name={NAME} Component={Counter} />;
}

import { signal } from "npm:@preact/signals";

const count = signal(0);

export function Counter() {
    return <div>
        <button onClick={() => count.value = Math.max(0, count.value - 1)}>
            decrement
        </button>

        <span>count: {count}</span>

        <button onClick={() => count.value += 1}>
            increment
        </button>
    </div>
}

import { hydrate } from "http://deno.land/x/frugal/runtime/preact.client.ts";
import { Counter } from "./Counter.tsx";

export const NAME = "Counter";

if (import.meta.environment === 'client') {
    hydrate(NAME, () => Counter);
}