Docs
Menu

Intro

What is zilk? Getting Started

Runtime

zilk zilk/hydrate zilk/router zilk/fetch

Build

CLI Config

Intro

What is zilk? Getting Started

Runtime

zilk zilk/hydrate zilk/router zilk/fetch

Build

CLI Config

zilk/fetch

SSR fetch handler for server / workers

Server-side HTML reponses in Bun, Cloudflare Workers, service workers, etc.

createHandler({ pull, pages, redirects, template })

  • pages: { [route_pattern]: {content(), meta(), async [pull]()} }
  • redirects: { [route_pattern]: destination }
  • pull: (default: 'pull') name of optional export to retrieve data for dynamic pages
  • template: function accepting {meta, content} and returning the full html page

Example

fetch.js

import { createHandler } from 'zilk/fetch'
import { redirects, template } from '../pages/_document.js'
import * as $p1 from '../pages/index.js'
import * as $p2 from '../pages/about.js'
export default {
  fetch: createHandler({pull: 'pull_cf', redirects, template, pages: {
    '/': $p1,
    '/about': $p2
  }})
}

_document.js

import { html, render } from 'zilk'

export let redirects = {
  '/help': '/docs/help'
}

export let template = ({ meta, content }) => html`
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <base href="/" >
    <title>${meta.title}</title>
    <link rel="stylesheet" href="/global.css" />
    <link rel="stylesheet" href="/views.css" />
    <script src="/hydration.js" type="module"></script>
    <script src="/router.js" type="module"></script>
  </head>
  <body>
    ${ Nav({ active: meta.active }) }
    <main id="root">
      ${content}
    </main>
  </body>
</html>
`