兄弟们，是这样的，我原本是一个 CRUD 仔，最近做了个开源项目 PigeonPod 得到了不少朋友的喜欢。我就趁热打铁搞了个时髦的 Landing Page，结果在前端这块被结结实实地上了一课，想分享一下踩坑血泪史，希望能帮同样是后端背景的兄弟们省点时间。
故事是这样的：
- 开局： 我用的是典型的“稳重派”，技术栈直接选了生态最强的 React + Mantine UI。心想这套搞熟了就能一招鲜吃遍天，PigeonPod 本体的 Web App 就是这套技术栈做的，用得很舒服。我就同样把代码改吧改吧直接做了 Landing Page ，很快做完上线，看着 Lighthouse 的
performance 92; Best Practices 100; SEO 85的评分，感觉稳得很。 - 转折： 一个月后，Google 上压根搜不到我的网站。这才被迫搞明白，我那套 pre-render 小伎俩在真爬虫面前就是个笑话，必须上真正的 SSG 。
- 第一劫：Next.js 。 都说它是 React 的“亲哥”，无缝迁移。结果呢？花了好几个小时迁过去，准备部署到 Cloudflare 的时候才发现，这玩意儿跟 Vercel 是深度绑定的，图片优化之类的核心功能离了 Vercel 就废了。感觉自己被“PUA”了。试了 OpenNext 、静态导出，全都是坑，又浪费了大半天。
- 第二劫：Astro 。 痛定思痛，决定换个思路。Astro 看起来简直是梦中情“框”：默认 SSG 、能用 React 组件、部署自由。结果呢？兴冲冲地把代码迁过去，一编译就报错。最后在官方文档里找到一句冰冷的 “Not a chance” —— Astro 和所有 CSS-in-JS 的 UI 库（比如我用的 Mantine ）八字不合。
前前后后快两天时间，代码没写几行，算是把前端这些框架的哲学和门派给彻底搞懂了。
最后悟出几个道理：
- 做“网页应用”和做“网站”是两码事，技术选型完全不同。
- Next.js 是 React 的 “全家桶”，但它更是 Vercel 的 “全家桶”，选它等于选平台。
- Astro 性能至上，但对某些 UI 库生态不友好。
- “无缝迁移”这四个字很诱惑，但是听听就好，都是营销口号，别当真。
把整个心路历程和技术上的思考都写成了文章，里面有更详细的踩坑细节和“暴论”，希望能帮大家看清前端这个“花花世界”。
博客原文链接在这儿: https://asimov.top/posts/react-vs-nextjs-vs-astro-for-backend-devs
 |
1
refear99 1 天前
直接 prerender ，保持 spa 的简单，还能兼顾 seo ，什么 ssr ssg 都扯淡
|
 |
2
zhengfan2016 1 天前  5
直接用 jsp 吧，古法 SSR ，相信古人的智慧！
 |
 |
3
Asimov01 OP 1
@refear99 一开始用的就是 prerender ，但是效果确实非常有限，Google 似乎已经不太认这种简单的 prerender 出来的 “假 HTML 了”。
|
 |
4
rev0 1 天前
说出来不怕你笑话，我用类似 jsp 的框架手搓的站，比 nuxt 站流量大十几倍
|
 |
5
serco 1 天前
react-router v7 基本可以无痛
|
 |
8
zpvip 1 天前
Ruby on Rails, 框架鼻祖绝非浪得虚名, CRUD, SSR, SEO 手拿把掐. 真心推荐给 CTO 及 全栈工程师.
一个公司用什么语言和框架是由 CTO 决定的, CTO 用什么跟他在学校学的东西相关, 学校及培训机构当然是 Java, JS, C#, 所以 Ruby on Rails 可能不那么流行. 但用起来真舒服, 语法是真简洁, 心智负担是真轻, 开发是真快速, 测试是真省心. 现在有了 AI, 我现在 99% 的代码都是 AI 在写, 我来看 git diff 及审核自动测试, 我觉得最聪明的是 Claude-4.5-sonnet. 99% 的公司网站的瓶颈绝对不会在语言及框架上, 如果有 CTO, 建议试试, 可以少招程序员, 效率杠杠地. |
 |
9
renmu 1 天前 via Android
这种简单落地页直接原生+jquery
|
 |
10
cvooc 1 天前
好文, 问一下我能转载到我博客上吗?我会标明来源(纯个人记录下,我博客基本没人访问 ORZ)
|
|
11
Asimov01 OP @renmu 这样写出好看的页面对我来说很难😂 有设计基线的 ui 库是我的首选，不然我做出来就是一坨，还有主题切换，多语言什么的，用 jq 处理起来还是比较费劲的。我前几年就是 jq 一把梭，现在确实是有些梭不动了 😂
|
 |
15
Jesmora 1 天前
都是资本的力量，后面你发现同样的内容和涉及，nextjs 的自然流量比 nuxtjs\remixjs\solidstart\sveltekit 都要高
|
|
16
serco 1 天前
@Asimov01 哪里有 v8 ，最新不也才 v7 嘛？ seo 的话 SSR ，SSG 不都可以嘛，看文档 https://reactrouter.com/start/framework/rendering
|
 |
17
abc0123xyz 1 天前
直接手搓几个 index.html 丢 nginx 下
|
|
20
refear99 1 天前
@Asimov01 能详细说一下吗，我现在用的 prerender 感觉效果还行，render 出来的就是真实的网站内容，目前收录十几个页面，sitemap 里还有 3000 个正在运行不知道能不能收录
|
 |
21
whoami9426 1 天前
OpenNext 挺好用的啊, 我这个站( https://fixit.nolimit35.com) 就是 Nextjs 用 OpenNext 打包后部署在 Cloudflare 的 Workers 上,除了域名一分钱没花.
OpenNext 官方有迁移教程: https://opennext.js.org/cloudflare/get-started |
 |
22
svon 1 天前
就一个页面为什么要用 React ?, 拿大炮打蚊子。
|
 |
23
linkopeneyes 1 天前
shadcn/ui 也是高强度 context,你还是要在 tsx 中写
|
 |
25
lancelock 1 天前
就这种页面用 react 写的意义是什么，又没什么表单 复杂交互，要 ui 库的话有纯 css 的库吧，bulma 什么的
|
|
27
Asimov01 OP @refear99 我自己主要遇到的主要问题是 pre-rendered 不方便给每种语言分别 Meta 数据之类的，因为我也不太懂 pre-rendered ，大部分活都是 AI 干的，我只是个 CRUD 仔 😭
|
|
28
Asimov01 OP @svon 因为大炮好用，而且我也只会用大炮 😂 我用 React + Mantine 写了一个 web app ，自然就用它接着写页面了。不过其实也不能说只有一个页面，后面还要跟着一直加模块加页面的，需要持续维护升级，不然就真直接手搓 html 了。
|
 |
29
molika 1 天前
深有感触。
|
 |
30
lizy0329 1 天前
@zhengfan2016 不行的，如果稍微有点交互，对于 dom 的处理非常逆天，还是要用 jQuery 或者 JSP 模板代码的结合
|
|
31
zhengfan2016 1 天前
@lizy0329 还好吧，我前任公司就是类似 jsp 的技术栈，但是我们用的是 vue2 ，通过 cdn 引入的，做内部管理系统的，很多表单页，交互复杂度肯定比 op 高得多，没啥问题
|
 |
32
profchaos 1 天前
我记得 vercel 还出了个 blog 说 google 也能 index js 的页面，不过比常规的网页慢，怎么会完全 index 不到呢
|
 |
33
cwliang 1 天前
静态落地页 Astro + tailwind ，tailwind 上面有很多免费的落地页模版
|
|
34
lizy0329 1 天前
@zhengfan2016 #31 vue2 是 SPA 哦，可不能 SEO
|
|
35
zhengfan2016 1 天前
@lizy0329 #34 vue 是 spa ，前提是用 vite 等脚手架创建的纯 vue 。
但是！！ vue 是渐进式框架，完全可以在 jsp 的基础上渐进式的使用。 再说了，seo 也就那几个<meta property="og:title"，这些完全可以给 jsp 渲染的，怎么就不能 seo 了？ |
 |
36
shadeofgod 22 小时 9 分钟前
mantine 早就迁移到 css module 的方案了，咋还有 css in js 的问题
|
|
37
Asimov01 OP @shadeofgod 不知道啊，但是确实是不能用，这是官方的说明： https://help.mantine.dev/q/can-i-use-mantine-with-astro
[img]  [/img] |
 |
38
bugcreator 15 小时 54 分钟前
后端上手最友好的 svelte(kit) 接近 web 原生体验
|
 |
39
leokun 14 小时 2 分钟前
golang 有办法使用前端的生态做 ssg 吗
|
 |
41
ajax10086 12 小时 17 分钟前
不推荐用 nextjs ，我用它做了几个项目，后面准备换 nuxt 了
|
Select Language