preact-esbuild-ssr-starter-kit

🏗🏗🏗 Work in progress 🏗🏗🏗

Table of contents

• TOC
• About
• Available scripts
• Server-side comparsion and alternatives
• Q&A
• Credits

About

Core

• tinyhttp
  • sirv static assets
  • picocolors
• preact
  • preact-router
  • hydrate
  • renderToString
• esbuild
• @emotion/css
• PNPM

Styleguide

• ESLint
• Prettier

Available scripts

Serve build

pnpm serve

Remove build artifacts

pnpm prebuild

Build client OR server

pnpm build:server
# or
pnpm build:client

Build for production

pnpm build

Format via prettier

pnpm format

Lint via ESLint

pnpm lint

Alternatives

Output size comparsion(minimal app)

• express + static: ~1.5mb
• fastify + @fastify/static: ~750kb
• @tinyhttp/app + sirv: ~220kb

Benchmarks

NOTE: Unfortunately, this table doesn't contains benches for tinyhttp

fastify/benchmarks

Choose your fighter ¯\_(ツ)_/¯

Questions and Answers

How it works?

There are two main entry points in the src folder: client and server

src/
├── app
│ ├── \_template
│ │ └── base.tsx
│ ├── app.routing.tsx
│ └── app.tsx
├── client.tsx // 1
└── server.tsx // 2

1. client.tsx entry uses hydrate function to bypass most rendering work when loading in the browser. Otherwise it's just your react project index.tsx.
2. server.tsx entry contains server which:
   • Serves static assets via sirv
   • Maps application routes to the server routes.
   • Renders components via renderToString and template from _templates.

Why do I need shims?

With the new jsx transform you don't need to import React in every file where you want to use jsx. With esbuild you could inject import React from 'react' in file using re-export a.k.a shim. Think about it as workaround that helps expose built-in API during build.

• esbuild - Auto-import for JSX
• mdn - Shim

Route objects vs JSX routing?

You could move app.routing.tsx to the App component like this.

Credits

• How to Set Up Server Side Rendering (SSR) With React, express.js, and esbuild
• fastify-preact-ssr
• eslint config