youhoc

Pages
- Home
- Modern App Guidelines
- Node.js
  Express.js
  Express Web Server
  EJS Layouts: Tổ chức giao diện gọn gàng hơn trong Express.js
  Authentication Trong REST API Với JWT
  File Upload with Multer, Express.js
  Server-Side Validation Với Express-Validator
  Sequelize
  Sequelize Transactions: Đảm Bảo Tính Toàn Vẹn Dữ Liệu
  7 loại Data Types phổ biến Trong Sequelize
  Phân Trang (Pagination) Trong Express.js Với Sequelize/MySQL
  Hướng dẫn Cơ bản về Rest API
  Node-cron Simple to Complex Setup with PM2
  Hono
  Hono Response
  Error Handling
  Trong Hono, tại sao không nên tách Route và Controller như MVC truyền thống?
- Cloudflare
  Minimal Cloudflare Worker + Hono + Drizzle ORM (part 1)
  Minimal Cloudflare Worker + Hono + Drizzle ORM (part 2)
  Minimal Hono App with JSX in both back-end and front-end
  Minimal Hono App built with Vite, "real" React and React Router v7
  Kết nối với Database: Giữ Connection hay Pooling chờ sẵn?
- Typescript
  TypeScript cơ bản (phần 1)
  TypeScript cơ bản (phần 2)
  require vs import
- React
  React-ready Javascript Refresher
  Arrow Function
  Template Literals
  Logical AND, OR, Ternary, Nullish Operators
  Destructuring & Rest Operator
  Array Method
  Immutability and Spread Operator
  Promises, Async/Await, Callback
  Hiểu React từ gốc rễ qua biên dịch từ Vanilla JS
  Hiểu React Component cơ bản với Rating App
  Thay đổi giao diện với State và useState Hook
  Thay đổi giao diện với State và useState Hook (phần 2)
  Thay đổi giao diện với State và useState Hook (phần 3)
  Controlled vs Uncontrolled Input trong React
  useState vs URL-driven UI
  useEffect: Hiểu đúng để dùng đúng
- Next.js
  Học Next.js bây giờ có muộn không?
  9 điều cơ bản đầu tiên khi đến với Next.js
  Làm quen với Fetch dữ liệu, Loading, Error & Not Found trong Next
  Tự xây dựng Image Picker có preview trong React
  Xử lý Form Submit trong Next.js — Từ cơ bản đến production-ready
  Upload ảnh lên Cloudinary trong Next.js: Tối giản, đủ dùng
  Upload ảnh lên Cloudinary trong Next.js: Phiên bản nâng cao có Progress Bar
  Routing nâng cao trong Next.js qua ví dụ trang News Archive
  Metadata trong Next.js: Từ cơ bản đến OG Image động theo tiêu đề bài viết
  Thực hành Intercepting Routes trong Next.js qua ví dụ Photo Gallery
  Optimistic Update với Like Button: Đẹp trước, lưu sau, lỗi thì hoàn tác, làm gì căng?
  Next.js Caching: Hướng dẫn thực chiến cho production
- htmx
  HTMx Form: Request, Response, Swap
- Linux
  Day 1: Linux Distributions & Navigation
  Day 2: User Management
  Day 3: File Permission & Ownership
  Day 4: Package Management
- Payload CMS

Minimal Hono App with JSX in both back-end and front-end

JSX trong back-end sử dụng như Template Engine cho các trang SSR. JSX trong front-end như phiên bản "thu gọn" của React. Ngoài ra, có thể sử dụng JSX để tạo các "interactive island" trong các trang SSR.

Demo

⁠

https://hono.youhoc.com/⁠

⁠

Source

⁠

brvnnghi/simple-honoOwner: brvnnghi • Star count: 2 • Created: Wed, Apr 8, 2026, 7:05 PM very minimal cloudflare hono app github.com

⁠

Releases:

⁠

v1: minimal starter app with some vars (api_key, enviroment, d1)⁠

⁠

v2: app with a simple route and JSX template (server-side rendering)⁠

⁠

v2.1: app with 2 templates⁠

⁠

v3: app with public folder and auto deployment⁠

⁠

v3.1: app with public folder, auto deployment, custom domain (set in code)⁠

⁠

v4: app with Tailwind CSS and build on deployment⁠

⁠

v5: no longer minimal, app now has JSX DOM, island and full SPA route⁠

⁠

Ưu điểm

Hono là một web framework rất nhẹ, nhanh, đa dụng, nhiều chức năng built-in (validation, basic auth, better auth…)

Hono phục vụ đủ các nhu cầu của một full-stack web development cơ bản, với cài đặt tối thiểu.

Hono quản lý tất cả: routing, server API, server-side render pages…

Quản lý User Authentication đơn giản bằng Cookie / Session trên routes

Server-side rendering (rất ổn cho các trang báo chí)

Server-side generator (cũng được luôn)

Các trang server-side có thể thiết kế và xây dựng template với JSX (và Tailwind), các component sử dụng HTML cơ bản

Nếu các trang server-side cần thêm client-side, thì thay vì sử dụng các thư viện front-end, bạn cũng có thể sử dụng JSX ở client-slide (gọi là client-component, hay JSX DOM), được built-in sẵn bên trong Hono, không phải cài thêm bất kỳ package gì.

Bạn có thể tạo ra 1 route riêng để chạy single-page app (SPA)

Bạn cũng có thể tạo ra các “interactive island” tương tác, chạy bên trong các trang server-side rendering

Nhược điểm

(mà bạn có thể khắc phục bằng một

bản build nâng cao hơn với React Router V7⁠

)

Hono JSX DOM không hỗ trợ routing cho single-page app, nên nếu SPA app trở nên phức tạp, việc routing bằng “cơm” trở nên khác phức tạp. Bạn tốt nhất là nên quên đi lựa chọn này, hoặc chuyển qua bản build Hono + React Router (trong đó, Hono chỉ thuần quản lý API, nhường lại front-end hoàn toàn cho React).

Các Hooks mà JSX DOM hỗ trợ cũng bị hạn chế, bạn

đọc Doc tại đây⁠

Want to print your doc?
This is not the way.

Try clicking the ··· in the right corner or using a keyboard shortcut (

CtrlP

) instead.