React 来建 Web App 网站是不是趋势？ Isomorphic 对后台的消耗会不会太大？

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

已注册用户请登录

这是一个创建于 2664 天前的主题，其中的信息可能已经有所发展或是发生改变。

如题。自己写了一个 React Web App ，就是自己的网站( https://ainoob.com)，使用了 React Router 和 Server side rendering ，暂时感觉还好，毕竟没有流量， 2333333. 网站支持中英文切换，而且会记录ajax来的数据，这样多次访问同一个链接就不用下载了（同一个标签下，因为没有存在cookie之类的地方）

之前用过 pug 配合 Node.JS+Express 写了一个学校的网站( http://knoxtheatre.org)，感觉效率好像还没有 React 的 Rendering 快（错觉？）

感觉有了 React ， Pug 就不需要了，不过的确下载的 js 太大。。。（用的 webpack ）

加上 React Native 还可以搞 App ，简直开心~

大家觉得 React 是不是一个趋势？然后如果使用 Server side rendering ，资源消耗大吗？再问一个大家 Server side rendering 的时候，调用数据库调用几次？我一般都要有几个 MongoDB query 。

3Q~~~

第 1 条附言 · 2017-01-02 06:28:42 +08:00

感觉有必要说一下，这个主要还是问问题的，所以大家有什么想法欢迎说出来呀。
然后网站的确不好看，这个我觉得再说也是一样。毕竟我问的是 react 相关，不是 css 相关

第 2 条附言 · 2017-01-02 09:14:50 +08:00

itommy 说了一下数据库的访问不可避免就不要管，我觉得有道理。回头会看看自己网站的可不可以再精简一下，合并一些 Query

第 3 条附言 · 2017-01-02 09:44:57 +08:00

好奇的可以下载 React Developer Tools 看一下一些小东西 https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi

26 条回复 • 2017-01-26 02:50:46 +08:00

wizChen

2017-01-02 06:13:52 +08:00 via iPhone

UI 不是一般的丑

AInoob

2017-01-02 06:14:09 +08:00

@wizChen 没错！

AInoob

2017-01-02 06:16:34 +08:00

@wizChen 不过虽然这个是说一下自己的网站，主要的问题还是：
React 是不是一个趋势？
如果使用 Server side rendering ，资源消耗大吗？
Server side rendering 的时候，调用数据库调用几次？

SingeeKing

2017-01-02 07:41:53 +08:00

我想知道为什么这个帖子和普通的界面不一样。。。
html ？？

itommy

2017-01-02 08:00:07 +08:00

React, Angular, Vue 这些是个趋势，不过是对一些比较大型复杂的 web app 才有意义；比如向 blog 这类就 over engineered 了。

Server-side rendering (SSR) 调用数据库的次数，这是你应该知道的事情吧。数据库的压力和用不用 SSR 木有什么直接关系，当数据库压力太大的时候，也不是通过「去掉」 SSR 来解决。

maomaomao001

2017-01-02 08:47:27 +08:00 via Android

你写的是很爽，但是你考虑过用户体验嘛～～你这 spa 单页应用，前进和返回，简直是个巨坑

AInoob

2017-01-02 09:05:17 +08:00

@maomaomao001 单页应用，前进后退都可以执行，为什么巨坑啊？我这个你注意一下的话，网址是动态的，所以你复制哪个网址，就能到哪里哟

AInoob

2017-01-02 09:05:31 +08:00

@SingeeKing 不是很清楚， 2333

AInoob

2017-01-02 09:08:44 +08:00

@itommy 3Q~~~

的确有的数据库的没法减少，就没办法了。学习了~

这个博客的话，主要就是自己学习一下，其实有的功能有 React 才比较好写，比如网址根据内容切换， SSR ，中英文，评论（有道云跟帖和 Disqus ）。所以大才小用可能对人才是个淹没，不过对于程序来说，酷炫方便就挺好的~

AInoob

2017-01-02 09:10:35 +08:00

@maomaomao001 好吧，懂了你的意思了，不够现在单页应用不代表网址单一了，我这个动态更新网址，所以你试试去到哪个页面，刷新一下，还是那个页面，加上由于加载了一些数据，重复访问的压力反而小了。

类似的网站我注意到的还有 Product Hunt 和 Chrome 应用店，都是动态更新网站，所以刷新没影响的。

zmj1316

2017-01-02 09:10:38 +08:00 via Android

@maomaomao001 html5 是可以控制浏览器历史的，前进后退已经不是问题了，有库可以解决

AInoob

2017-01-02 09:12:07 +08:00

@zmj1316 是的是的，我的网站其实就没问题哟~~~通过 React Router 和 Server side rendering 保证 SEO 和第一次先读取内容，然后后面 React Router 配合 React Router.Link 完成更新网址的操作

dantegg

2017-01-02 11:07:53 +08:00

@wizChen 丑的一度怀疑自己的打开方式不对

exoticknight

2017-01-02 11:14:07 +08:00

@SingeeKing node.js 节点主题

bdbai

2017-01-02 11:15:26 +08:00 via iPhone

@SingeeKing Node.js 节点

cbais7890

2017-01-02 11:17:35 +08:00

这 UI...从另一种方面上来说也不能算丑, 只能说非常复古, 很有特色...

AInoob

2017-01-02 11:28:50 +08:00

@dantegg f12 后用 React Developer Tools 可能打开方式会好一点

AInoob

2017-01-02 11:29:16 +08:00

@cbais7890 哈哈，结果大家都看到了 UI ，没人看 Web App 啊。。。

itommy

2017-01-02 12:23:16 +08:00 via iPhone

@AInoob 自己折腾折腾倒是极好的

smallpath

2017-01-02 12:24:29 +08:00

同 SSR https://smallpath.me/，不过 SSR 肯定比字符串拼接要慢。。。

AInoob

2017-01-02 12:43:01 +08:00

@smallpath 666 ，还有后台管理，我的就直接数据库修改，=。=

AInoob

2017-01-02 12:51:44 +08:00

@smallpath https://smallpath.me/abc 这类的无效链接会卡住，考虑一下重定向？

terranboy

2017-01-02 13:23:37 +08:00 via iPhone

这种做法不适合用在普通网站 seo 是最大的问题做后台不错

AInoob

2017-01-02 20:56:03 +08:00

@terranboy Hello, SEO 对于 SAP 的确不友好，不过因为我这个使用了 Server side rendering ，会首先返回实际的内容，然后才加载 React ，所以不存在 SEO 问题。

smallpath

2017-01-21 22:23:38 +08:00

@AInoob Hello ，抱歉现在才回复，刚刚放年假闲下来把 404 页面做出来了

vue 的服务端渲染是 stream 形式的，服务端重定向代价太大，其一会导致 TTFB 骤增，其二会让服务端重定向代码侵入到前端路由代码中，尝试了一天觉得还是提供 404 页面比较好

AInoob

2017-01-26 02:50:46 +08:00

@smallpath 恩呢，虽然没有听太懂，不过 404 页面也挺好， redirect 只是随便说的一个方案~