我使用 .NET 10、gRPC‑Web 和 Vanilla JS 构建了一个反向市场

Source: Dev.to

传统市场的痛点

每个市场的运作方式都相同：卖家上架商品，买家在成千上万的列表中滚动， hoping to find what they need at the right price.

逆向市场概念

我想把这个模型颠倒过来。假如买家发布他们想要的东西，卖家竞争提供最好的报价会怎样？
这就是 WTB.land —— 逆向市场（WTB = Want To Buy，想买）。

• 买家发布需求 —— 例如，“我想要一台 MacBook Pro M3，预算 $1500，几乎全新。”
• 卖家浏览需求 并提交带有价格和描述的报价。
• 所有报价公开 —— 卖家之间竞争，最高出价会获得 TOP BID 徽章。
• 买家挑选最佳交易 —— 与卖家聊天，比较报价，完成交易。

技术栈

• 后端: .NET 10 (ASP.NET Core MVC + gRPC)
• 数据库: SQLite（是的，真的）
• 前端: Vanilla JavaScript SPA（约 1800 行，无 React/Vue/Angular）
• 协议: gRPC‑Web 基于 protobuf（而非 REST/JSON）
• CSS: Tailwind CSS 3.4
• 部署: 单二进制文件，运行在每月 $7 的 Hetzner VPS 上

实现亮点

• 二进制 protobuf 比 JSON 小约 30 %。
• 我编写了一个 98 行的自定义 gRPC‑Web 传输层，使用 XHR 处理二进制帧。客户端不需要代码生成——protobuf.js 在运行时解析 .proto 文件。
• SPA 包含 pushState 路由、SSR 水合、懒加载以及实时聊天轮询。加入 React 会让包体积增加三倍，却没有任何收益。
• 对于拥有数百条需求的初创市场，SQLite 完美适配：单文件、零配置、即时备份。
• JavaScript SPA 默认对搜索引擎不可见。我的解决方案是 混合 SSR + SPA 架构。
  • 服务器渲染完整 HTML，包含 SEO 内容（meta 标签、JSON‑LD、Open Graph）。
  • 客户端 JS 从服务器注入的 JSON 中进行水合——无需重复的 API 调用。
  • 随后的导航使用 pushState + gRPC 调用。

性能与 SEO

• Google PageSpeed：100/100（移动端和桌面端）。
• 响应时间：60‑90 ms（单核 VPS）。

在线演示

WTB.land 已上线且免费。提供 26 个分类、内置聊天且不收取费用。

行动号召

你有没有使用 gRPC‑Web 构建过项目？期待听到你的想法。