V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
V2EX 提问指南
find456789
V2EX  ›  问与答

关于 react 的 ssr、服务端渲染的完美方案! 大家帮忙看看是不是可行?谢谢

  •  
  •   find456789 · 2019-10-11 00:44:41 +08:00 · 511 次点击
    这是一个创建于 1631 天前的主题,其中的信息可能已经有所发展或是发生改变。

    手上有个网站,大约只有 5 个页面(某些页面,传入不同 id 返回不同结果,由于模板一致(网页结构),算作一个页面)

    想要实现:

    1、首屏速度在 1 秒内:

    这个已经实现,服务端吐纯 html,然后放在 cdn 上,速度已经是毫秒级别
    用户信息,在客户端发送 ajax 请求单独获取(虽然多了一个请求,但整体速度更快)
    

    2、用 react 来提升页面之间的跳转速度(前后分离,页面跳转只请求必要数据,而不是请求整个页面)

    这个有点麻烦,目前的服务端已经写好了 restful 接口
    
    我的打算是这样的:
    	先用 react 实现网站的所有功能
        然后在浏览器里复制渲染好的 html 结构,让服务端用这个 html 结构来渲染出网站内容,当用户首次请求,就吐这个内容
        当用户再次访问其他页面的时候,就用 react 来控制
    

    这样就实现了,不但首次加载超级快,而且 用户跳转其他页面,还可以享受 react 带来的速度

    但是仔细思考,我就发现了一个问题:

    当用户首次 获得网站内容后,x 秒后,react 运行了,重新渲染了页面, 用户就会看到网页 闪烁了一下

    那怎么办呢?

    有没有办法 解决这个问题呢?

    虽然我知道可以用服务端渲染, 但是服务端渲染 成本有点高,要准备一台新机器

    第 1 条附言  ·  2019-10-11 13:55:44 +08:00
    通过 3 楼的 v 友提醒, 可以用 hydration 来实现这个功能

    但是我发现了另外一个问题, 那就是 客户端收到服务端传送的 渲染完毕的 html 之后,

    客户端的 react 启动的时候,还会去请求对应 rest 接口,渲染数据,好用来和服务端传来的 html 做对比

    这也就是说, 我本意是为了减少请求,才在服务端渲染的

    现在客户端在收到服务器已经渲染好的数据后,自己居然又发送 ajax 请求了(它的 目的是为了渲染新的界面,和服务器返回的 html 做对比)


    我在想,能不能让客户端,自己判断,如果收到的是服务端发送的 html,那么,就不再发送多余 ajax 请求数据(本意是为了减少请求),客户端只发送请求用户信息的 ajax 请求

    这样来来去去, 可能我还是应该直接用 spa, 但这样 seo 又是个问题

    各种方案都特别麻烦
    。。。。
    我再思考思考看看
    3 条回复    2019-10-11 09:40:13 +08:00
    lianyue
        1
    lianyue  
       2019-10-11 01:13:52 +08:00   ❤️ 1
    加载 运行 react 并不会重新渲染页面
    find456789
        2
    find456789  
    OP
       2019-10-11 01:24:36 +08:00
    @lianyue

    谢谢

    从这里看( https://www.chkui.com/article/react/react_server_render_with_checksum


    ,我所用的方法 是会重新渲染的, (我的方法删除了所有无用的属性,包括 checksum )



    看来只能用 前后端同构的方案 了
    noe132
        3
    noe132  
       2019-10-11 09:40:13 +08:00   ❤️ 1
    这个称为 hydration。
    https://reactjs.org/docs/react-dom.html#hydrate
    如果页面内容是静态不变的,通过 ssr 渲染出来缓存结果就可以了
    如果是动态的内容,最好是在服务端加一个 ssr 中间件。
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   1170 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 24ms · UTC 18:17 · PVG 02:17 · LAX 11:17 · JFK 14:17
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.