标签 SSR 下的文章

一、核心功能设计

时间戳转换器包含三个主要模块:

  1. 实时时间戳显示: 自动刷新的当前时间戳(秒/毫秒)
  2. 时间戳转日期: 将Unix时间戳转换为可读日期格式
  3. 日期转时间戳: 将日期时间转换为Unix时间戳

在线工具网址：https://see-tool.com/timestamp-converter

工具截图：
工具截图.png

二、实时时间戳显示实现

2.1 核心状态管理

// 响应式数据
const autoRefresh = ref(true)           // 自动刷新开关
const currentSeconds = ref(0)           // 当前秒级时间戳
const currentMilliseconds = ref(0)      // 当前毫秒级时间戳

let refreshInterval = null              // 定时器引用

2.2 更新时间戳逻辑

// 更新当前时间戳
const updateCurrentTimestamp = () => {
  if (!process.client) return           // SSR 保护
  const now = Date.now()                // 获取当前毫秒时间戳
  currentSeconds.value = Math.floor(now / 1000)  // 转换为秒
  currentMilliseconds.value = now
}

关键点:

  1. SSR 保护: 使用 process.client 判断,避免服务端渲染错误
  2. Date.now(): 返回毫秒级时间戳,性能优于 new Date().getTime()
  3. 秒级转换: 使用 Math.floor() 向下取整

2.3 自动刷新机制

// 监听自动刷新开关
watch(autoRefresh, (val) => {
  if (!process.client) return

  if (val) {
    updateCurrentTimestamp()            // 立即更新一次
    refreshInterval = setInterval(updateCurrentTimestamp, 1000)  // 每秒更新
  } else {
    if (refreshInterval) {
      clearInterval(refreshInterval)    // 清除定时器
      refreshInterval = null
    }
  }
})

关键点:

  1. 立即更新: 开启时先执行一次,避免1秒延迟
  2. 定时器管理: 关闭时清除定时器,防止内存泄漏
  3. 1秒间隔: setInterval(fn, 1000) 实现秒级刷新

2.4 生命周期管理

onMounted(() => {
  if (!process.client) return
  updateCurrentTimestamp()
  if (autoRefresh.value) {
    refreshInterval = setInterval(updateCurrentTimestamp, 1000)
  }
})

onUnmounted(() => {
  if (refreshInterval) {
    clearInterval(refreshInterval)      // 组件销毁时清理定时器
  }
})

说明:

  • 组件挂载时初始化时间戳和定时器
  • 组件卸载时必须清理定时器,防止内存泄漏

三、时间戳转日期实现

3.1 格式自动检测

// 检测时间戳格式(秒 or 毫秒)
const detectTimestampFormat = (ts) => {
  const str = String(ts)
  return str.length >= 13 ? 'milliseconds' : 'seconds'
}

判断依据:

  • 秒级时间戳: 10位数字 (如: 1706425716)
  • 毫秒级时间戳: 13位数字 (如: 1706425716000)
  • 临界点: 13位作为分界线

3.2 核心转换逻辑

const convertTimestampToDate = () => {
  if (!process.client) return
  if (!timestampInput.value.trim()) {
    safeMessage.warning(t('timestampConverter.notifications.enterTimestamp'))
    return
  }

  try {
    let ts = parseInt(timestampInput.value)

    // 自动检测或手动指定格式
    const format = tsInputFormat.value === 'auto'
      ? detectTimestampFormat(ts)
      : tsInputFormat.value

    // 统一转换为毫秒
    if (format === 'seconds') {
      ts = ts * 1000
    }

    const date = new Date(ts)

    // 验证日期有效性
    if (isNaN(date.getTime())) {
      safeMessage.error(t('timestampConverter.notifications.invalidTimestamp'))
      return
    }

    // ... 后续处理
  } catch (err) {
    safeMessage.error(t('timestampConverter.notifications.convertFailed'))
  }
}

关键点:

  1. 输入验证: 检查空值和有效性
  2. 格式统一: 统一转换为毫秒级时间戳
  3. 有效性检查: isNaN(date.getTime()) 判断日期是否有效
  4. 异常捕获: try-catch 保护,防止程序崩溃

3.3 时区处理

// 获取本地时区偏移
const getTimezoneOffset = () => {
  const offset = -date.getTimezoneOffset()  // 注意负号
  const hours = Math.floor(Math.abs(offset) / 60)
  const minutes = Math.abs(offset) % 60
  const sign = offset >= 0 ? '+' : '-'
  return `UTC${sign}${String(hours).padStart(2, '0')}:${String(minutes).padStart(2, '0')}`
}

说明:

  • getTimezoneOffset() 返回的是 UTC 与本地时间的分钟差
  • 返回值为正表示本地时间落后于 UTC,需要取反
  • 格式化为 UTC+08:00 形式
// 获取指定时区的偏移
const getTimezoneOffsetForZone = (timezone) => {
  if (timezone === 'local') {
    return getTimezoneOffset()
  }

  try {
    const utcDate = new Date(date.toLocaleString('en-US', { timeZone: 'UTC' }))
    const tzDate = new Date(date.toLocaleString('en-US', { timeZone: timezone }))
    const offset = (tzDate - utcDate) / (1000 * 60)
    const hours = Math.floor(Math.abs(offset) / 60)
    const minutes = Math.abs(offset) % 60
    const sign = offset >= 0 ? '+' : '-'
    return `GMT${sign}${hours}`
  } catch (e) {
    return ''
  }
}

关键技巧:

  • 使用 toLocaleString() 的 timeZone 参数转换时区
  • 通过 UTC 和目标时区的时间差计算偏移量
  • 异常捕获处理无效时区名称

3.4 日期格式化输出

// 根据选择的时区格式化本地时间
let localTime = date.toLocaleString(
  locale.value === 'en' ? 'en-US' : 'zh-CN',
  { hour12: false }
)

if (tsOutputTimezone.value !== 'local') {
  try {
    localTime = date.toLocaleString(
      locale.value === 'en' ? 'en-US' : 'zh-CN',
      {
        timeZone: tsOutputTimezone.value === 'UTC' ? 'UTC' : tsOutputTimezone.value,
        hour12: false
      }
    )
  } catch (e) {
    // 时区无效时回退到本地时间
    localTime = date.toLocaleString(
      locale.value === 'en' ? 'en-US' : 'zh-CN',
      { hour12: false }
    )
  }
}

格式化选项:

  • hour12: false: 使用24小时制
  • timeZone: 指定时区(如 'Asia/Shanghai', 'UTC')
  • 根据语言环境自动调整日期格式

3.5 年中第几天/第几周计算

// 计算年中第几天
const getDayOfYear = (d) => {
  const start = new Date(d.getFullYear(), 0, 0)  // 去年12月31日
  const diff = d - start
  const oneDay = 1000 * 60 * 60 * 24
  return Math.floor(diff / oneDay)
}

// 计算年中第几周
const getWeekOfYear = (d) => {
  const start = new Date(d.getFullYear(), 0, 1)  // 今年1月1日
  const days = Math.floor((d - start) / (24 * 60 * 60 * 1000))
  return Math.ceil((days + start.getDay() + 1) / 7)
}

算法说明:

  1. 年中第几天: 当前日期 - 去年最后一天 = 天数差
  2. 年中第几周: (天数差 + 1月1日星期几 + 1) / 7 向上取整

3.6 相对时间计算

// 相对时间(如: 3天前, 2小时后)
const getRelativeTime = (timestamp) => {
  if (!process.client) return ''

  const now = Date.now()
  const diff = now - timestamp
  const seconds = Math.abs(Math.floor(diff / 1000))
  const minutes = Math.floor(seconds / 60)
  const hours = Math.floor(minutes / 60)
  const days = Math.floor(hours / 24)

  const isAgo = diff > 0  // 是否是过去时间
  const units = tm('timestampConverter.timeUnits')

  let value, unit
  if (seconds < 60) {
    value = seconds
    unit = units.second
  } else if (minutes < 60) {
    value = minutes
    unit = units.minute
  } else if (hours < 24) {
    value = hours
    unit = units.hour
  } else {
    value = days
    unit = units.day
  }

  return isAgo
    ? t('timestampConverter.timeAgo', { value, unit })
    : t('timestampConverter.timeAfter', { value, unit })
}

逻辑分析:

  1. 时间差计算: 当前时间 - 目标时间
  2. 单位选择: 自动选择最合适的单位(秒/分/时/天)
  3. 方向判断: 正数为"前",负数为"后"
  4. 国际化: 使用 i18n 支持多语言

3.7 完整结果对象

const weekdays = tm('timestampConverter.weekdays')
const timezoneLabel = tsOutputTimezone.value === 'local'
  ? `${t('timestampConverter.localTimezone')} (${getTimezoneOffset()})`
  : `${tsOutputTimezone.value} (${getTimezoneOffsetForZone(tsOutputTimezone.value)})`

tsToDateResult.value = {
  timezone: timezoneLabel,           // 时区信息
  local: localTime,                  // 本地时间
  utc: date.toUTCString(),          // UTC 时间
  iso: date.toISOString(),          // ISO 8601 格式
  relative: getRelativeTime(ts),    // 相对时间
  dayOfWeek: weekdays[date.getDay()],  // 星期几
  dayOfYear: getDayOfYear(date),    // 年中第几天
  weekOfYear: getWeekOfYear(date)   // 年中第几周
}

四、日期转时间戳实现

4.1 设置当前时间

// 设置为当前时间
const setToNow = () => {
  if (!process.client) return
  const now = new Date()
  const year = now.getFullYear()
  const month = String(now.getMonth() + 1).padStart(2, '0')
  const day = String(now.getDate()).padStart(2, '0')
  const hours = String(now.getHours()).padStart(2, '0')
  const minutes = String(now.getMinutes()).padStart(2, '0')
  const seconds = String(now.getSeconds()).padStart(2, '0')
  dateTimeInput.value = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`
}

格式化技巧:

  • padStart(2, '0'): 补齐两位数(如: 9 → 09)
  • 月份需要 +1 (getMonth() 返回 0-11)
  • 格式: YYYY-MM-DD HH:mm:ss

4.2 核心转换逻辑

const convertDateToTimestamp = () => {
  if (!process.client) return

  if (!dateTimeInput.value) {
    safeMessage.warning(t('timestampConverter.notifications.selectDateTime'))
    return
  }

  try {
    const date = new Date(dateTimeInput.value)

    // 验证日期有效性
    if (isNaN(date.getTime())) {
      safeMessage.error(t('timestampConverter.notifications.invalidDateTime'))
      return
    }

    // 根据时区调整
    let finalDate = date

    if (dateInputTimezone.value === 'UTC') {
      // UTC 时区: 需要加上本地时区偏移
      finalDate = new Date(date.getTime() + date.getTimezoneOffset() * 60000)
    } else if (dateInputTimezone.value !== 'local') {
      // 其他时区: 计算时区差异
      const localDate = date
      const tzString = localDate.toLocaleString('en-US', {
        timeZone: dateInputTimezone.value
      })
      const tzDate = new Date(tzString)
      const offset = localDate.getTime() - tzDate.getTime()
      finalDate = new Date(localDate.getTime() - offset)
    }

    const ms = finalDate.getTime()
    const seconds = Math.floor(ms / 1000)

    dateToTsResult.value = {
      seconds,                    // 秒级时间戳
      milliseconds: ms,           // 毫秒级时间戳
      iso: finalDate.toISOString()  // ISO 8601 格式
    }

    safeMessage.success(t('timestampConverter.notifications.convertSuccess'))
  } catch (err) {
    safeMessage.error(t('timestampConverter.notifications.convertFailed'))
  }
}

时区处理详解:

  1. 本地时区 (local):

    • 直接使用用户输入的日期时间
    • 不做任何调整

  2. UTC 时区:

    • 用户输入的是 UTC 时间
    • 需要加上 getTimezoneOffset() 转换为本地时间戳
    • 例: 输入 "2024-01-01 00:00:00 UTC" → 北京时间 "2024-01-01 08:00:00"

  3. 其他时区 (如 Asia/Tokyo):

    • 计算目标时区与本地时区的偏移量
    • 通过 toLocaleString() 转换时区
    • 调整时间戳以反映正确的时间

4.3 时区转换原理

// 示例: 将 "2024-01-01 12:00:00" 从东京时区转换为时间戳

// 步骤1: 创建本地时间对象
const localDate = new Date('2024-01-01 12:00:00')  // 假设本地是北京时间

// 步骤2: 转换为东京时区的字符串
const tzString = localDate.toLocaleString('en-US', { timeZone: 'Asia/Tokyo' })
// 结果: "1/1/2024, 1:00:00 PM" (东京比北京快1小时)

// 步骤3: 将字符串解析为日期对象
const tzDate = new Date(tzString)

// 步骤4: 计算偏移量
const offset = localDate.getTime() - tzDate.getTime()
// offset = -3600000 (负1小时的毫秒数)

// 步骤5: 应用偏移量
const finalDate = new Date(localDate.getTime() - offset)

核心思想:

  • 通过两次转换计算时区差异
  • 利用偏移量调整时间戳
  • 确保时间戳代表的是正确的绝对时间

五、Date 对象核心 API 总结

6.1 创建日期对象

// 当前时间
new Date()                          // 当前日期时间
Date.now()                          // 当前时间戳(毫秒)

// 从时间戳创建
new Date(1706425716000)             // 毫秒时间戳
new Date(1706425716 * 1000)         // 秒时间戳需要 * 1000

// 从字符串创建
new Date('2024-01-28')              // ISO 格式
new Date('2024-01-28 12:00:00')     // 日期时间
new Date('Jan 28, 2024')            // 英文格式

// 从参数创建
new Date(2024, 0, 28)               // 年, 月(0-11), 日
new Date(2024, 0, 28, 12, 0, 0)     // 年, 月, 日, 时, 分, 秒

6.2 获取日期信息

const date = new Date()

// 获取年月日
date.getFullYear()      // 年份 (2024)
date.getMonth()         // 月份 (0-11, 0=1月)
date.getDate()          // 日期 (1-31)
date.getDay()           // 星期 (0-6, 0=周日)

// 获取时分秒
date.getHours()         // 小时 (0-23)
date.getMinutes()       // 分钟 (0-59)
date.getSeconds()       // 秒 (0-59)
date.getMilliseconds()  // 毫秒 (0-999)

// 获取时间戳
date.getTime()          // 毫秒时间戳
date.valueOf()          // 同 getTime()

// 时区相关
date.getTimezoneOffset()  // 本地时区与 UTC 的分钟差

6.3 设置日期信息

const date = new Date()

// 设置年月日
date.setFullYear(2024)
date.setMonth(0)        // 0-11
date.setDate(28)

// 设置时分秒
date.setHours(12)
date.setMinutes(30)
date.setSeconds(45)
date.setMilliseconds(500)

// 设置时间戳
date.setTime(1706425716000)

6.4 格式化输出

const date = new Date()

// 标准格式
date.toString()         // "Sun Jan 28 2024 12:00:00 GMT+0800 (中国标准时间)"
date.toDateString()     // "Sun Jan 28 2024"
date.toTimeString()     // "12:00:00 GMT+0800 (中国标准时间)"

// ISO 格式
date.toISOString()      // "2024-01-28T04:00:00.000Z"
date.toJSON()           // 同 toISOString()

// UTC 格式
date.toUTCString()      // "Sun, 28 Jan 2024 04:00:00 GMT"

// 本地化格式
date.toLocaleString()           // "2024/1/28 12:00:00"
date.toLocaleDateString()       // "2024/1/28"
date.toLocaleTimeString()       // "12:00:00"

// 自定义本地化
date.toLocaleString('zh-CN', {
  year: 'numeric',
  month: '2-digit',
  day: '2-digit',
  hour: '2-digit',
  minute: '2-digit',
  second: '2-digit',
  hour12: false,
  timeZone: 'Asia/Shanghai'
})

一个基于 Hono 的全栈 Web 框架，结合了 Islands 架构和边缘计算的强大能力

引言

在现代 Web 开发中，我们面临着一个永恒的挑战：如何在提供丰富交互体验的同时，保持快速的加载速度和优秀的性能？传统的单页应用（SPA）虽然交互流畅，但首屏加载慢、SEO 困难；而传统的服务端渲染（SSR）虽然首屏快，但缺乏现代前端框架的开发体验。

HonoX 的出现，为这个问题提供了一个优雅的解决方案。它是基于超快的 Hono Web 框架构建的全栈框架，采用 Islands 架构，完美平衡了性能和开发体验。

什么是 HonoX？

HonoX 是一个全栈 Web 框架，它建立在 Hono 之上。Hono 是一个轻量级、超快速的 Web 框架，可以运行在任何 JavaScript 运行时（Cloudflare Workers、Deno、Bun、Node.js 等）。

核心特性

  1. Islands 架构 - 渐进式水合，只在需要的地方加载 JavaScript
  2. 文件路由系统 - 基于文件系统的直观路由
  3. 边缘优先 - 为 Cloudflare Workers 等边缘运行时优化
  4. 类型安全 - 完整的 TypeScript 支持
  5. 零配置 - 开箱即用的最佳实践
  6. 极致性能 - 继承 Hono 的超快性能

Islands 架构：重新思考前端水合

什么是 Islands 架构？

Islands 架构是一种现代前端架构模式，最早由 Etsy 的前端架构师 Katie Sylor-Miller 提出，后来被 Astro、Fresh 等框架采用。

想象一个网页是一片海洋，而需要交互的组件是海洋中的"岛屿"：

┌─────────────────────────────────┐
│  静态 HTML（服务端渲染）          │
│                                 │
│  ┌─────────┐      ┌─────────┐  │
│  │ Island  │      │ Island  │  │
│  │ (交互)  │      │ (交互)  │  │
│  └─────────┘      └─────────┘  │
│                                 │
│         ┌─────────┐             │
│         │ Island  │             │
│         │ (交互)  │             │
│         └─────────┘             │
└─────────────────────────────────┘

这种架构的优势在于：

  • 减少 JavaScript 负载 - 只加载真正需要的 JavaScript
  • 提升首屏性能 - 静态内容立即可见
  • 渐进式增强 - 交互组件逐步加载和激活
  • 更好的 SEO - 完整的服务端渲染内容

HonoX 中的 Islands

在 HonoX 中使用 Islands 非常简单：

// app/islands/Counter.tsx
import { useState } from 'hono/jsx'

export default function Counter({ initialCount = 0 }) {
  const [count, setCount] = useState(initialCount)

  return (
    <div class="counter">
      <button onClick={() => setCount(count - 1)}>-</button>
      <span>{count}</span>
      <button onClick={() => setCount(count + 1)}>+</button>
    </div>
  )
}

只需将组件放在 app/islands/ 目录下，HonoX 会自动处理：

  • 服务端渲染
  • 客户端代码分割
  • 按需水合

在页面中使用：

// app/routes/index.tsx
import Counter from '../islands/Counter'

export default function Home() {
  return (
    <div>
      <h1>我的页面</h1>
      <p>这段文字是纯静态的，不需要 JavaScript</p>
      <Counter initialCount={0} />
    </div>
  )
}

文件路由系统：约定优于配置

HonoX 采用基于文件的路由系统，让路由管理变得直观：

app/routes/
├── index.tsx           → /
├── about.tsx           → /about
├── blog/
│   ├── index.tsx       → /blog
│   └── [slug].tsx      → /blog/:slug
└── api/
    ├── users.ts        → /api/users
    └── users/
        └── [id].ts     → /api/users/:id

动态路由

使用方括号定义动态路由参数：

// app/routes/blog/[slug].tsx
import { createRoute } from 'honox/factory'

export default createRoute((c) => {
  const { slug } = c.req.param()

  return c.render(
    <article>
      <h1>文章：{slug}</h1>
    </article>
  )
})

API 路由

API 路由返回 JSON 数据：

// app/routes/api/users/[id].ts
import { Hono } from 'hono'
import { zValidator } from '@hono/zod-validator'
import { z } from 'zod'

const app = new Hono()

// GET /api/users/:id
app.get('/:id', (c) => {
  const id = c.req.param('id')
  return c.json({ id, name: 'User ' + id })
})

// POST /api/users/:id
const schema = z.object({
  name: z.string().min(1),
  email: z.string().email(),
})

app.post('/:id', zValidator('json', schema), (c) => {
  const data = c.req.valid('json')
  const id = c.req.param('id')

  return c.json({
    id,
    ...data,
    updated: true
  })
})

export default app

中间件系统：强大且灵活

HonoX 继承了 Hono 的中间件系统，让你可以轻松处理横切关注点：

// app/routes/_middleware.tsx
import { createRoute } from 'honox/factory'
import { compress } from 'hono/compress'
import { logger } from 'hono/logger'
import { secureHeaders } from 'hono/secure-headers'

export default createRoute((c, next) => {
  // 日志记录
  logger()(c, next)

  // 安全头
  secureHeaders()(c, next)

  // 响应压缩
  compress()(c, next)

  return next()
})

自定义中间件

创建自定义中间件也很简单：

// 性能计时中间件
export const timing = createMiddleware(async (c, next) => {
  const start = Date.now()
  await next()
  const end = Date.now()

  c.header('Server-Timing', `total;dur=${end - start}`)
})

// 认证中间件
export const auth = createMiddleware(async (c, next) => {
  const token = c.req.header('Authorization')

  if (!token) {
    return c.json({ error: 'Unauthorized' }, 401)
  }

  // 验证 token...
  await next()
})

性能优化：从框架层面开始

HonoX 内置了多种性能优化：

1. 自动代码分割

每个 Island 组件自动分割成独立的 chunk：

// 自动生成类似这样的输出
dist/
├── client/
│   ├── island-Counter.js    (3KB)
│   ├── island-Search.js     (5KB)
│   └── island-Modal.js      (4KB)
└── server/
    └── index.js

2. 流式 SSR

使用 Suspense 实现流式渲染：

import { Suspense } from 'hono/jsx'
import AsyncData from '../islands/AsyncData'

export default function Page() {
  return (
    <div>
      <h1>立即显示的标题</h1>

      <Suspense fallback={<div>加载中...</div>}>
        <AsyncData />
      </Suspense>
    </div>
  )
}

页面渲染流程：

  1. 立即发送 HTML 头部和静态内容
  2. 异步组件准备好后流式发送
  3. 最后发送激活脚本

3. 智能缓存策略

// 静态资源长期缓存
app.get('/static/*', async (c) => {
  c.header('Cache-Control', 'public, max-age=31536000, immutable')
  return c.next()
})

// API 响应 ETag 缓存
app.get('/api/data', async (c) => {
  const data = await fetchData()
  const etag = generateETag(data)

  if (c.req.header('If-None-Match') === etag) {
    return c.body(null, 304)
  }

  c.header('ETag', etag)
  return c.json(data)
})

类型安全：端到端的 TypeScript

HonoX 提供完整的类型安全，从路由到 API：

// 定义 API 类型
type User = {
  id: string
  name: string
  email: string
}

// API 路由自动推断类型
const app = new Hono<{ Variables: { user: User } }>()

app.get('/api/user', (c) => {
  const user = c.get('user') // 类型：User
  return c.json(user)
})

// 在客户端使用类型
const response = await fetch('/api/user')
const user: User = await response.json()

部署：边缘优先

HonoX 针对边缘运行时优化，特别是 Cloudflare Workers：

Cloudflare Pages 部署

# 构建
npm run build

# 部署
npm run deploy

优势：

  • 全球 CDN - 300+ 个边缘节点
  • 零冷启动 - Workers 即时响应
  • 自动扩展 - 无需配置
  • 低成本 - 免费层每天 100,000 请求

其他平台

HonoX 也支持部署到：

  • Vercel - 使用 Node.js 适配器
  • Netlify - Edge Functions
  • Deno Deploy - 原生支持
  • 传统服务器 - Node.js

实战案例：构建一个博客

让我们用 HonoX 构建一个完整的博客系统：

1. 文章列表页

// app/routes/blog/index.tsx
import { createRoute } from 'honox/factory'
import { getPosts } from '../../lib/posts'

export default createRoute(async (c) => {
  const posts = await getPosts()

  return c.render(
    <div class="blog">
      <h1>博客文章</h1>
      <ul>
        {posts.map(post => (
          <li key={post.slug}>
            <a href={`/blog/${post.slug}`}>
              <h2>{post.title}</h2>
              <time>{post.date}</time>
            </a>
          </li>
        ))}
      </ul>
    </div>
  )
})

2. 文章详情页

// app/routes/blog/[slug].tsx
import { createRoute } from 'honox/factory'
import { getPost } from '../../lib/posts'
import CommentSection from '../../islands/CommentSection'

export default createRoute(async (c) => {
  const { slug } = c.req.param()
  const post = await getPost(slug)

  if (!post) {
    return c.notFound()
  }

  return c.render(
    <article>
      <header>
        <h1>{post.title}</h1>
        <time>{post.date}</time>
        <div>{post.author}</div>
      </header>

      <div dangerouslySetInnerHTML={{ __html: post.content }} />

      {/* 评论区使用 Island 实现交互 */}
      <CommentSection postId={slug} />
    </article>,
    {
      title: post.title,
      description: post.excerpt,
    }
  )
})

3. 交互式评论组件

// app/islands/CommentSection.tsx
import { useState } from 'hono/jsx'

type Comment = {
  id: string
  author: string
  content: string
  createdAt: string
}

export default function CommentSection({ postId }: { postId: string }) {
  const [comments, setComments] = useState<Comment[]>([])
  const [loading, setLoading] = useState(false)

  const loadComments = async () => {
    setLoading(true)
    const res = await fetch(`/api/comments/${postId}`)
    const data = await res.json()
    setComments(data.comments)
    setLoading(false)
  }

  const submitComment = async (e: Event) => {
    e.preventDefault()
    const form = e.target as HTMLFormElement
    const formData = new FormData(form)

    await fetch(`/api/comments/${postId}`, {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({
        author: formData.get('author'),
        content: formData.get('content'),
      }),
    })

    form.reset()
    loadComments()
  }

  return (
    <section class="comments">
      <h2>评论</h2>

      <button onClick={loadComments}>
        {loading ? '加载中...' : '加载评论'}
      </button>

      {comments.map(comment => (
        <div key={comment.id} class="comment">
          <strong>{comment.author}</strong>
          <p>{comment.content}</p>
          <time>{comment.createdAt}</time>
        </div>
      ))}

      <form onSubmit={submitComment}>
        <input name="author" placeholder="您的名字" required />
        <textarea name="content" placeholder="评论内容" required />
        <button type="submit">提交评论</button>
      </form>
    </section>
  )
}

4. 评论 API

// app/routes/api/comments/[postId].ts
import { Hono } from 'hono'
import { zValidator } from '@hono/zod-validator'
import { z } from 'zod'

const app = new Hono()

const commentSchema = z.object({
  author: z.string().min(1).max(50),
  content: z.string().min(1).max(1000),
})

// 获取评论
app.get('/:postId', async (c) => {
  const { postId } = c.req.param()

  // 从数据库获取评论
  const comments = await db.comments
    .where('postId', postId)
    .orderBy('createdAt', 'desc')
    .get()

  return c.json({ comments })
})

// 添加评论
app.post('/:postId', zValidator('json', commentSchema), async (c) => {
  const { postId } = c.req.param()
  const data = c.req.valid('json')

  const comment = await db.comments.create({
    postId,
    ...data,
    createdAt: new Date().toISOString(),
  })

  return c.json(comment, 201)
})

export default app

与其他框架对比

HonoX vs Next.js

HonoX 的优势：

  • 更轻量（核心更小）
  • 边缘优先设计
  • 更简单的学习曲线
  • 更快的冷启动

Next.js 的优势：

  • 更成熟的生态系统
  • 更多的官方集成
  • React Server Components
  • 更强大的图像优化

HonoX vs Astro

相似点：

  • 都使用 Islands 架构
  • 都注重性能
  • 都支持多框架

HonoX 的优势：

  • 更好的 API 路由
  • 原生支持边缘运行时
  • 更轻量的运行时

Astro 的优势：

  • 可以混用多个前端框架
  • 更丰富的内容处理功能
  • 更好的静态站点生成

HonoX vs Fresh

相似点：

  • 都基于 Islands 架构
  • 都使用文件路由
  • 都注重性能

HonoX 的优势：

  • 支持更多运行时
  • 更灵活的中间件系统
  • 基于 Hono 的强大生态

Fresh 的优势：

  • Deno 原生集成
  • Preact 默认支持
  • 更简单的配置

最佳实践

1. 合理使用 Islands

✅ 好的做法：

// 只将需要交互的部分做成 Island
<article>
  <h1>{title}</h1>
  <p>{content}</p>
  <ShareButtons /> {/* Island */}
  <CommentSection /> {/* Island */}
</article>

❌ 避免：

// 不要把整个页面都做成 Island
export default function Page() {
  const [state, setState] = useState()
  // 整个页面都会在客户端水合
}

2. 优化数据获取

✅ 好的做法：

// 在服务端并行获取数据
export default createRoute(async (c) => {
  const [user, posts, comments] = await Promise.all([
    getUser(),
    getPosts(),
    getComments(),
  ])

  return c.render(<Page user={user} posts={posts} comments={comments} />)
})

❌ 避免：

// 避免串行请求
const user = await getUser()
const posts = await getPosts() // 等待上一个完成
const comments = await getComments() // 又要等待

3. 使用流式渲染

// 对于慢速数据使用 Suspense
export default function Page() {
  return (
    <>
      <Header /> {/* 快速渲染 */}

      <Suspense fallback={<Skeleton />}>
        <SlowData /> {/* 异步加载 */}
      </Suspense>

      <Footer />
    </>
  )
}

4. 实现有效缓存

// 分层缓存策略
const app = new Hono()

// 1. 边缘缓存
app.use('/api/*', cache({
  cacheName: 'api-cache',
  cacheControl: 'max-age=60',
}))

// 2. 浏览器缓存
app.use('/static/*', async (c, next) => {
  await next()
  c.header('Cache-Control', 'public, max-age=31536000, immutable')
})

// 3. 条件请求
app.use('/data/*', etag())

未来展望

HonoX 还在快速发展中，以下是一些令人期待的方向：

  1. 更多的运行时支持 - 包括 AWS Lambda、Azure Functions 等
  2. 增强的开发工具 - 更好的调试体验、性能分析工具
  3. 更丰富的生态 - 官方插件、第三方集成
  4. 框架无关的 Islands - 支持 React、Vue、Svelte 等
  5. 增量静态生成 - 类似 Next.js 的 ISR

结论

HonoX 代表了现代全栈框架的一个重要方向：

  • 性能优先 - Islands 架构和边缘计算
  • 开发体验 - 简单直观的 API
  • 灵活性 - 支持多种运行时和部署方式
  • 类型安全 - 完整的 TypeScript 支持

如果你正在寻找一个轻量、快速、现代的全栈框架，特别是需要部署到边缘运行时，HonoX 是一个值得考虑的选择。

虽然它还比较年轻，生态系统不如 Next.js 那样成熟，但它的设计理念和技术方向都非常正确。随着 Hono 生态的发展，HonoX 也将变得越来越强大。

资源链接

欢迎在评论区分享你对 HonoX 的看法和使用经验！