怎么让 React 应用打包的时候部分页面已经渲染了(不用 Next.js)

[importmeta]

正在开发个 React 应用，有 5 个页面，每个页面的某些区域只有登录之后才能使用，我又想让搜索引擎能抓到这 5 个页面。

为啥不能用 Next.js 的原因是：

Next 的 Router 太封闭了。我这应用用不了，我魔改了一下 React Router 的 Outlet 搞了一个 Tab 页功能，自己控制页面渲染。

求助！

[horizon]

vite ssr

[skallz]

如果只是针对搜索引擎的话，使用 prerender 预渲染相关的库，网上一搜一大把，然后针对搜索引擎的请求返回组装好的页面，普通用户还是浏览 spa 页面，对项目无侵入性

[xu33]

ssg

[bojackhorseman]

https://nextjs.org/docs/pages/building-your-application/rendering/static-site-generation
https://nextjs.org/docs/pages/building-your-application/rendering/server-side-rendering

[importmeta]

@horizon 暂时切不了 Vue...

[importmeta]

@skallz 感觉这个好，判断爬虫就给预渲染完成的

[importmeta]

@xu33 SSG 生成的是静态的 html 吧，这里面能写交互吗？

[horizon]

@importmeta #5
react 也支持

[xu33]

@importmeta 跟交互没关系吧，不管 ssr ，ssg 还是 csr ，交互都在 js 里

[importmeta]

@bojackhorseman Next ，不适合...
@horizon 还是 SSR 吧，我这项目没办法起个服务跑 SSR
@xu33 好的，我研究一下

[dudubaba]

打包的时候用生成 html 不就行了，其实就是 ssr 的原理。但是你这不需要那么复杂，只要能抓取就行，本地 mock 一份登录后才能获取的静态 josn 数据，然后 react 的 rendertostring 生成字符串再用 fs 写入文件。

[flmn]

Astro 了解一下，island

[seeu2ex]

React 的 server component 可以，你可以看看