可以把 React 或 Vue 当成 jQuery 来用吗?

This topic created in 3363 days ago, the information mentioned may be changed or developed.

现在貌似用 React 和 Vue ,都做成后端只提供 API ,渲染和路由完全由前端处理.

个人想问的就是类似于资讯站,资讯详情页的资讯内容还是由后端生成 html 返回,但顶部的登录状态显示由 React 或 Vue 来处理.

服务端渲染和浏览器渲染的选择点在:

如果页面需要 SEO 友好,则由服务器渲染成 HTML 直接返回(内容页).
用户私有数据给浏览器渲染(登录状态,评论操作).

这样做感觉有个好处,就是内容页完全可以交给 CDN 缓存起来,只有用户私有数据才需要与 App Server 交互.

请问有人这样做过吗? 能谈谈心得吗?

Supplement 1 · May 31, 2017

看了 React 官方文档,再结合大家的评论,感觉混合服务端渲染和 React 浏览器端渲染这样做的可行性蛮高,只是不用前端处理路由,把 React 当成一个写交互的库而已.

就拿"加入收藏"这个功能来说,用 jQuery 来实现是直接操作 DOM,复杂的功能维护成本比较高.
用 React 来写,就写成一个组件,在组件内实现 MVC ,而不是直接像 jQuery 一样操作 DOM,后面交互复杂起来,维护成本相对来说低一点.

谢谢大家回复.

渲染

Vue

React

HTML

7 replies • 2017-05-31 22:37:36 +08:00

SourceMan

May 31, 2017 via iPhone

不一样吧。。，

XiaoxiaoPu

May 31, 2017

React/Vue 代表的是 MV* 的架构模式，jQuery 是一工具型的 library，不是一个维度的

aaronlam

May 31, 2017

感觉一个二次元，一个三次元。

cxh116

May 31, 2017

@SourceMan
@XiaoxiaoPu

拿 V2EX 的帖子页来举例吧.
正文这部分直接由 python 服务端渲染成 html 返回给浏览器, 但右侧的登录状态,和下方的"加入收藏"等按钮用 react 或 vue 来做交互.

从"加入收藏"这个功能交互来说, 用 jQuery 来实现,有可能 js 逻辑代码与 html 视图分开太散,从而导致不好维护.
用 react 或 vue 来实现,直接写成组件, 逻辑与视图可以写在同一文件,从而方便维护.

如果这样做的话,帖子页还是 SEO 友好,但交互等功能都是用 react 或 vue 来实现.

mooncakejs

May 31, 2017 via iPhone

谈心得？刚完成 vue 全站改造的表示后悔，要 seo 就得 ssr，首屏渲染慢。如果页面交互不复杂，建议还是字符串模板。就算用 vue，用最简单部分就好，不要 vue router 之类全家桶。

XiaoxiaoPu

May 31, 2017

@cxh116
这样当然是可以的。按你的想法，你的问题其实是「 React/Vue 能不能跟后端渲染配合起来」，跟 jQuery 其实是没多大关系。

实际操作起来就是后端输出 HTML 时，渲染主体内容，然后引入纯前端的资源，注意后端渲染的部分跟前端渲染部分之间的布局就可以了。

murmur

May 31, 2017

jQuery+模板在页面逻辑简单的时候可以替代 vue/react，稍微复杂点后面的优势就看出来了