Java 后端学前端做工具站：从零到上线
一个 Java 后端程序员，花了三周学 React 做了一个在线 JSON 工具箱，上线第一个月就有了几百个自然搜索访客。这篇文章是我完整的经历和踩坑记录。
为什么做这件事
做了几年 Java 后端，日常就是写接口、修 Bug、开会。技术上不算差，但心里一直清楚——上班是打工，网站是自己的。
看到很多独立开发者一个人做网站，挂个 Google AdSense，一个月几千美金的被动收入。说实话，挺羡慕的。
但我只会 Java，不会前端。想做网站就得学。
选技术栈：为什么是 React
Java 后端要学前端会面临一个选择：
- Vue — 上手简单，中文文档好
- React — 生态更大，机会更多
我选了 React。原因很简单：
- React 的 Hooks 语法让我这个写 Java 的人觉得”嗯，像在写函数式编程”
- React 生态里要什么都有现成的库
- 移动端用 React Native 也可以复用，将来有想象空间
最后选了 React + TypeScript + Vite 的组合。Vite 的冷启动速度太快了，对新手调试体验很好。
做什么项目：选赛道
学前端不能光学不做，得找个具体项目来实践。
我从自己的需求出发：工作中经常要跟 JSON 打交道，格式化、校验、转 CSV 之类的，每次都要找在线工具。
市面上的 JSON 工具站很多，但要么有广告太烦，要么功能单一，要么不支持中文。做工具站有一个规律：功能不需要多强，但要全、快、无广告。
于是决定做一个 在线 JSON 工具箱：
- 纯前端，不依赖服务器
- 支持格式化、压缩、校验、转 CSV、转 YAML
- 支持 Java POJO 和 TypeScript 代码生成
- 多语言（中文、英文、西班牙语、阿拉伯语）
- PWA 支持，可以当 App 安装
踩坑记录
1. 路由配置
React Router 的学习曲线比想象中陡。特别是嵌套路由和动态路由的组合。翻了好几次文档才搞明白 createBrowserRouter 和 <Outlet> 的配合。
2. SEO 问题
做完了才发现，React SPA 做 SEO 天生吃亏。爬虫看不到动态内容。
解决方案是：
- 每个工具页面写独立的内容（title + description + 结构化数据）
- 用
react-helmet-async管理 SEO 标签 - 首页加了 FAQ JSON-LD
- 内容尽量在页面加载时就渲染，而不是靠 JS 请求
虽然比不了 SSR，但对工具站来说是够用的。上线一个月 Google 已经索引了十几个页面。
3. 代码分割
一开始整个网站打包下来 736KB，首屏加载太慢了。
后来用 React.lazy() 做代码分割，每个工具页面独立加载，主包降到了 379KB。配合 PWA 缓存，后续访问几乎瞬间加载。
上线后的数据
- 开发时间： 约 3 周（晚上和周末）
- 工具数量： 20+ 个 JSON 相关工具
- 部署平台： Vercel（免费版）
- 第一天访客： 0（毫无悬念）
- 第一个月： 开始有自然搜索流量，每天几十个 UV
- 收入： 还没挂广告，等流量稳定再开
给其他后端程序员的话
如果你也只会后端、想做网站，我的建议是：
- 别想太多，直接做。 React 学习曲线是陡，但做个简单的工具站不需要理解全部原理
- 选一个你熟悉的领域做工具。 你懂这个领域，就知道怎么做得好用
- 内容 > 技术。 工具站最终靠的是 SEO 和内容，技术只要够用就行
- 先上线，再优化。 不要在完美上死磕，先上线看看反馈
我做的 JSON 工具箱：https://jsonprocess.app
20+ 个 JSON 在线工具，纯前端，支持多语言。欢迎使用和提建议。
