Skip to main content

Preact SSR

The Preact Server-Side-Rendering (SSR) with Partial-Hydrations.

Features

  • Partial-Hydrations Support.
  • Route a`la Nextjs.
  • Fast JIT-Reload in dev.

Directory Structure

├── components
│   ├── counter.tsx
│   ├── layout.tsx
│   └── user_form.tsx
├── public
│   └── img
│   └── favicon.ico
├── routes
│   ├── api
│   │   └── user
│   │   └── index.ts
│   ├── user
│   │   ├── index.tsx
│   │   └── [name].tsx
│   ├── _404.tsx
│   ├── _error.tsx
│   └── index.tsx
├── app.ts
├── config.ts
├── deno.json
├── import_map.json
├── main.ts

Command

Deno

deno task dev
deno task build
deno task start

Npm

npm run dev
npm run build
npm run start

Bun

bun run dev
bun run build
bun run start

Router

this router is elegant.

// routes/index.tsx

import { type RequestEvent } from "@nhttp/nhttp";

export default function home(rev: RequestEvent) {
return (...)
}

Using Middleware

// routes/index.tsx

import { type RequestEvent } from "@nhttp/nhttp";

function home(rev: RequestEvent) {
return (...)
}

export default [middlewareFn, home];

Using Api and custom methods.

// routes/api/user.ts

import { type RequestEvent } from "@nhttp/nhttp";

function all(rev: RequestEvent) {...}
function createUser(rev: RequestEvent) {...}

export default {
GET: all,
// example POST using middleware.
POST: [validate(MySchema), createUser]
};

Partial Hydration

// components/counter.tsx

import { withHydrate } from "@nhttp/hydrate";

const Counter = () => {...}

// HOC client-interactive
export default withHydrate(Counter, import.meta.url);