怎么让 React 应用打包的时候部分页面已经渲染了(不用 Next.js)
importmeta · 2024-09-05 15:30:41 +08:00 · 2818 次点击这是一个创建于 420 天前的主题，其中的信息可能已经有所发展或是发生改变。
正在开发个 React 应用，有 5 个页面，每个页面的某些区域只有登录之后才能使用，我又想让搜索引擎能抓到这 5 个页面。
为啥不能用 Next.js 的原因是：
Next 的 Router 太封闭了。我这应用用不了，我魔改了一下 React Router 的 Outlet 搞了一个 Tab 页功能，自己控制页面渲染。
求助！
第 1 条附言 · 334 天前
研究了好久, Next 和 Astro 都可以把 SSG 的一部分做成只有客户端生效的, 我用了 Astro.
 |
1
horizon 2024-09-05 15:53:22 +08:00
vite ssr
|
 |
2
skallz 2024-09-05 15:57:54 +08:00
如果只是针对搜索引擎的话，使用 prerender 预渲染相关的库，网上一搜一大把，然后针对搜索引擎的请求返回组装好的页面，普通用户还是浏览 spa 页面，对项目无侵入性
|
 |
3
xu33 2024-09-05 16:00:47 +08:00
ssg
|
 |
4
dumbass 2024-09-05 16:50:22 +08:00
|
 |
5
importmeta OP @horizon 暂时切不了 Vue...
|
|
6
importmeta OP @skallz 感觉这个好，判断爬虫就给预渲染完成的
|
|
7
importmeta OP @xu33 SSG 生成的是静态的 html 吧，这里面能写交互吗？
|
|
8
horizon 2024-09-05 17:05:53 +08:00
@importmeta #5
react 也支持 |
|
9
xu33 2024-09-05 17:25:27 +08:00
@importmeta 跟交互没关系吧，不管 ssr ，ssg 还是 csr ，交互都在 js 里
|
|
10
importmeta OP |
 |
11
dudubaba 2024-09-05 19:15:52 +08:00
打包的时候用生成 html 不就行了，其实就是 ssr 的原理。但是你这不需要那么复杂，只要能抓取就行，本地 mock 一份登录后才能获取的静态 josn 数据，然后 react 的 rendertostring 生成字符串再用 fs 写入文件。
|
 |
12
flmn 2024-09-05 21:54:26 +08:00
Astro 了解一下，island
|
 |
13
seeu2ex 2024-09-06 11:16:01 +08:00 via iPhone
React 的 server component 可以，你可以看看
|
Select Language