Skip to main content
Deno 2 is finally here 🎉️
Learn more

chicken

Peko

The featherweight & UI-library-agnostic SSR toolkit for Deno.

No bundling or build process. Server & Browser share all source modules!

Summary

  • First-class frontend - server-side rendered then rapidly hydrated with preloaded JS modules (~10kb in Preact example dir).
  • Production-ready backend - reliablility and performance with Typescript and configurable page caching.
  • Software minimalism - zero build-time technologies or bloated node_modules (<80MB Docker images).
  • Ease of adoption - intuitive functions & zero fixed project structure.

Read on, star/fork/clone away and feel free to contribute any ideas!

Getting started

  1. Install Deno
  2. $ git clone https://github.com/sebringrose/peko.git
  3. $ cd peko
  4. $ deno run --allow-net --allow-env --allow-read --watch example.js
  5. Check out ./examples/preact/src for frontend code and play around with ./examples/preact/app.js for app server changes.

Import Peko into your own Deno project:

import Peko from "https://github.com/sebringrose/peko/mod.ts"


Note: Lit-html VS Code plugin recommended if using HTM & Preact.

Deployment

Docker & Deno Deploy deployment guides coming soon!

This project aims to be ready for production soon but it is not complete with extensive testing yet! Use at your own risk.

How does it work?

Deno http server receives page requests and renders your source UI library modules to HTML. The example uses Preact UI components and preact-render-to-string for Server-Side Rendering (SSR). The HTML is injected into an HTML template along with configurable CSS, JS & metadata before being served to the user’s browser client.

If env.ENVIRONMENT === "production" page renders are also cached so subsequent requests can be served instantly until the page’s configurable cache lifetime is reached.

Why is this cool?

Because it provides all of the SEO and UX benefits of SSR with no JavaScript transpilation or bundling required - the server and browser use the exact same code! This completely eliminates part of the traditional JavaScript SSR toolchain, increasing project maintainability and simplicity of development.

It is all possible because of the unique combination of powerful new JavaScript tools. Deno, unlike Node.js, is built to the ECMAScript specification. This makes it compatible with browser JavaScript and vice versa which elimates the need to generate separate client and server JavaScript bundles (the support for URL imports is the secret sauce). UI libraries like Preact combined with htm offer lightning fast client-side hydration with a transpiler-free JavaScript markup syntax. On top of this Deno has native TypeScript support, a rich runtime API and a standard library full of great tools as well as a passionate community supporting it.

Differences between other frameworks like Next.js, etc.

Peko is built with one radical design decision: it isn’t built to support the infinite universe of npm UI libraries (as these often require bundling and transpilation). This is a deliberate step away from the inflated state that many modern web applications find themselves in. Just make sure your source modules can run directly in the browser without transpilation!