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);