preact-start

A minimal Preact metaframework built on top of Vinxi and preact-router. It provides a simple way to create Preact applications with server-side rendering and routing. It features:

• Server-side rendering
• File-based routing
• API routes
• Server functions
• Data pre-loading
• TS support

Installation

To create a new project, run:

pnpm create preact-start [project-name]

Examples

There are 4 examples available:

• Counter
• Blog
• Api Server Todos
• Server Actions Todos

APIs

Routing

File-based routing

Everything in the app/src/routes directory is automatically converted to routes. The file name is the route path and the default export is the component to render. For example, to create a route at /about, create a file app/src/routes/about.tsx. Note that only .tsx or .jsx files are supported.

Route params are also supported. For example, to create a route at /user/:id, create a file routes/user/[id].tsx.

Navigation

• preact-start is built on top of preact-router, so the same navigation rules apply here.

• Redirect

To redirect to a route, use the Redirect component from preact-start/router. The to prop should be the path to redirect to. Redirect works on the server and on the client.

API routes

Everything in the app/src/routes/api directory is automatically converted to API routes. The file name is the route path. The HTTP methods are determined by the named exports. For example, to create a route GET /api/users, create a file app/src/routes/api/users.ts and export a function named GET.

The function received APIEvent as the first argument and should return a response object. APIEvent is a wrapper type around H3Event with route params.

import { APIEvent } from 'preact-start/types'
export const GET = async (event: APIEvent) => {}

To work with the event object, use the methods exposed by the vinxi/http package.

Data pre-loading

To preload data for a route, export a function named load from the route component. The function receives an object of type LoaderArgs and should return a serializable object. To access the object from withiin the component use the useLoaderData() hook exposed by preact-start/router. The function is called on the server before SSR, and the result is serialized and sent to the client.

import type { LoaderArgs } from 'preact-start/types'
import { useLoaderData } from 'preact-start/router'

export const loader = async ({ params }: LoaderArgs) => {
  const post = await (await fetch(`https://jsonplaceholder.typicode.com/posts/${params.id}`)).json()
  return { post }
}

const Post = () => {
  const { post } = useLoaderData()
  return (
    <div>
      <h1>Post {post.id}</h1>
      <h2>{post.title}</h2>
      <p>{post.body}</p>
    </div>
  );
}

The loader function is also called on the client on navigation before the next route is rendered. The next route will not be rendered until the loader function has resolved so the useLoaderData() hook will always return the fetched data.

Server functions

You can mark a function or a file as "use server"; to run it on server only.

"use server";
const serverOnly = () => {
  console.log('This will only run on the server')
}