V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
importmeta
V2EX  ›  React

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

  •  
  •   importmeta · 77 天前 · 2152 次点击
    这是一个创建于 77 天前的主题,其中的信息可能已经有所发展或是发生改变。

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

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

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

    求助!

    13 条回复    2024-09-06 11:16:01 +08:00
    horizon
        1
    horizon  
       77 天前
    vite ssr
    skallz
        2
    skallz  
       77 天前
    如果只是针对搜索引擎的话,使用 prerender 预渲染相关的库,网上一搜一大把,然后针对搜索引擎的请求返回组装好的页面,普通用户还是浏览 spa 页面,对项目无侵入性
    xu33
        3
    xu33  
       77 天前
    ssg
    importmeta
        5
    importmeta  
    OP
       76 天前
    @horizon 暂时切不了 Vue...
    importmeta
        6
    importmeta  
    OP
       76 天前
    @skallz 感觉这个好,判断爬虫就给预渲染完成的
    importmeta
        7
    importmeta  
    OP
       76 天前
    @xu33 SSG 生成的是静态的 html 吧,这里面能写交互吗?
    horizon
        8
    horizon  
       76 天前
    @importmeta #5
    react 也支持
    xu33
        9
    xu33  
       76 天前
    @importmeta 跟交互没关系吧,不管 ssr ,ssg 还是 csr ,交互都在 js 里
    importmeta
        10
    importmeta  
    OP
       76 天前
    @bojackhorseman Next ,不适合...
    @horizon 还是 SSR 吧,我这项目没办法起个服务跑 SSR
    @xu33 好的,我研究一下
    dudubaba
        11
    dudubaba  
       76 天前
    打包的时候用生成 html 不就行了,其实就是 ssr 的原理。但是你这不需要那么复杂,只要能抓取就行,本地 mock 一份登录后才能获取的静态 josn 数据,然后 react 的 rendertostring 生成字符串再用 fs 写入文件。
    flmn
        12
    flmn  
       76 天前
    Astro 了解一下,island
    seeu2ex
        13
    seeu2ex  
       76 天前 via iPhone
    React 的 server component 可以,你可以看看
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   5382 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 24ms · UTC 08:59 · PVG 16:59 · LAX 00:59 · JFK 03:59
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.