首頁(yè) 猿問(wèn) 服務(wù)端渲染全局所需數(shù)據(jù), 客戶(hù)端用...

服務(wù)端渲染全局所需數(shù)據(jù), 客戶(hù)端用 React 呈現(xiàn), 這樣一套方案可行嗎?

JavaScript

猛跑小豬 2019-04-13 08:46:46

用了React以后,從數(shù)據(jù)渲染View流程就相對(duì)輕松了,但是更實(shí)用應(yīng)用需要是有服務(wù)端支持,多用戶(hù),實(shí)時(shí)同步,這些等等,我在已有的實(shí)踐當(dāng)中遇到一些問(wèn)題(我不是很熟悉后端的架構(gòu),所以從前端角度看):瀏覽器端緩存數(shù)據(jù)時(shí),有時(shí)會(huì)遇到外部的數(shù)據(jù)只能從服務(wù)器抓,而服務(wù)器并不總是知道瀏覽器端需要什么數(shù)據(jù)瀏覽器有一份數(shù)據(jù)備份,就需要手動(dòng)維護(hù),保持跟服務(wù)器更新等等而類(lèi)似操作在服務(wù)器推送數(shù)據(jù)時(shí)也會(huì)做,這樣兩邊就有重復(fù)代碼于是我在思考一個(gè)方案,讓整個(gè)流程更清晰更簡(jiǎn)單(小型的應(yīng)用,先不考慮性能):瀏覽器端進(jìn)行數(shù)據(jù)的操作,全部靠服務(wù)器推送的數(shù)據(jù)進(jìn)行更改也就是說(shuō)服務(wù)器上會(huì)有一個(gè)用戶(hù)需要的完整的數(shù)據(jù)存在,瀏覽器端僅僅被動(dòng)同步服務(wù)器上保存每個(gè)用戶(hù)當(dāng)前所有的狀態(tài),比如瀏覽器到哪個(gè)表的哪個(gè)位置等等這樣服務(wù)器就能計(jì)算出當(dāng)前用戶(hù)所需的全部數(shù)據(jù)客戶(hù)端與數(shù)據(jù)相關(guān)的Action一律通過(guò)WebSocket向服務(wù)器發(fā)送由服務(wù)器處理,服務(wù)器通過(guò)jsonpatch和WebSocket對(duì)本地的數(shù)據(jù)備份進(jìn)行更新這樣一個(gè)思路我響了很久,但沒(méi)開(kāi)始深入,有沒(méi)有同學(xué)思考過(guò)這樣的方案?另外注意我考慮的場(chǎng)景是幾十人同時(shí)在線的小應(yīng)用...

查看完整描述

2 回答

千萬(wàn)里不及你

TA貢獻(xiàn)1784條經(jīng)驗(yàn) 獲得超9個(gè)贊

我這個(gè)應(yīng)該不算答案，就當(dāng)是一起探討一下吧。你描述的一些東西我覺(jué)得看不明白，我先來(lái)問(wèn)問(wèn)清楚好保證我們?cè)谕粭l線上：瀏覽器端緩存數(shù)據(jù)時(shí),有時(shí)會(huì)遇到外部的數(shù)據(jù)只能從服務(wù)器抓,而服務(wù)器并不總是知道瀏覽器端需要什么數(shù)據(jù)等一下，從服務(wù)器上抓數(shù)據(jù)的時(shí)候，難道不是要聲明請(qǐng)求類(lèi)型的嗎？為什么服務(wù)器需要“知道”瀏覽器需要什么數(shù)據(jù)？我的意思是，假設(shè)你緩存的數(shù)據(jù)缺少（比方說(shuō)）“作者信息”，那就應(yīng)該GET/author/:id對(duì)嗎？這樣怎么會(huì)變成服務(wù)器“并不總是知道”瀏覽器需要什么數(shù)據(jù)？能否舉一個(gè)例子說(shuō)清楚你的意思？瀏覽器有一份數(shù)據(jù)備份,就需要手動(dòng)維護(hù),保持跟服務(wù)器更新等等、而類(lèi)似操作在服務(wù)器推送數(shù)據(jù)時(shí)也會(huì)做,這樣兩邊就有重復(fù)代碼我覺(jué)得“推送”就意味著：瀏覽器其實(shí)不知道數(shù)據(jù)有更新，服務(wù)器知道，所以服務(wù)器推給瀏覽器更新后的數(shù)據(jù)。而你在瀏覽器手動(dòng)維護(hù)的數(shù)據(jù)則意味著：你知道數(shù)據(jù)變化了，所以才要手動(dòng)維護(hù)，并且要提交給服務(wù)器以同步數(shù)據(jù)。你不覺(jué)得這兩者恰好是一條線的兩端，其實(shí)不矛盾嗎？為什么會(huì)有重復(fù)代碼？你指的是用于同步數(shù)據(jù)的代碼？所以你所思考的方案：瀏覽器端進(jìn)行數(shù)據(jù)的操作,全部靠服務(wù)器推送的數(shù)據(jù)進(jìn)行更改意思是客戶(hù)端不做數(shù)據(jù)緩存？只要有數(shù)據(jù)變更操作就從服務(wù)器即時(shí)獲取完整的數(shù)據(jù)（或者說(shuō)，一個(gè)用戶(hù)做了操作就立刻把數(shù)據(jù)更新推給其他所有的客戶(hù)端）？……哪個(gè)表的哪個(gè)數(shù)據(jù)若我沒(méi)理解錯(cuò)，你的意思是假設(shè)我是用戶(hù)A，我正在看/author/5的資料，服務(wù)器上應(yīng)該有一個(gè)游標(biāo)機(jī)制注明：“用戶(hù)A正在瀏覽authors表id為5的數(shù)據(jù)”，是嗎？換句話說(shuō)，每當(dāng)URL改變的時(shí)候就應(yīng)該發(fā)送給服務(wù)器“我當(dāng)前的位置”，然后服務(wù)器就把相應(yīng)的數(shù)據(jù)推送給我，是這個(gè)意思？那……這和我直接GET/author/5拿到數(shù)據(jù)有多大的區(qū)別？你描述的東西，我能看得出來(lái)有你自己的想法，但是我覺(jué)得場(chǎng)景還是太模糊了。更想聽(tīng)聽(tīng)具體的東西，以具體場(chǎng)景為例到底解決了哪些問(wèn)題？

反對(duì) 回復(fù) 2019-04-13

侃侃無(wú)極

TA貢獻(xiàn)2051條經(jīng)驗(yàn) 獲得超10個(gè)贊

而服務(wù)器并不總是知道瀏覽器端需要什么數(shù)據(jù)服務(wù)器和瀏覽器端的溝通需要依據(jù)規(guī)范，backend和fontend的溝通在應(yīng)用開(kāi)發(fā)中，本身就很重要瀏覽器有一份數(shù)據(jù)備份,就需要手動(dòng)維護(hù),保持跟服務(wù)器更新等等其實(shí)業(yè)務(wù)數(shù)據(jù)最終都是要保存到服務(wù)器上，數(shù)據(jù)庫(kù)（mysql等）提供這類(lèi)服務(wù)。而數(shù)據(jù)在在服務(wù)器和客戶(hù)端之間交互，準(zhǔn)備的講，瀏覽器的數(shù)據(jù)可以叫做緩存。緩存范圍很廣，last_modified和etag也是緩存之一，還有服務(wù)器應(yīng)用內(nèi)部的緩存至于重復(fù)代碼，其實(shí)很可能由于backend和fontend的分工不明確導(dǎo)致的，技術(shù)架構(gòu)。不過(guò)有時(shí)候項(xiàng)目為了快速啟動(dòng)，是允許重復(fù)代碼的。后期可以慢慢重構(gòu)。前期只能根據(jù)目前的技術(shù)水平選擇，而不應(yīng)該陷入技術(shù)太深，導(dǎo)致項(xiàng)目無(wú)法按期完成瀏覽器端進(jìn)行數(shù)據(jù)的操作,全部靠服務(wù)器推送的數(shù)據(jù)進(jìn)行更改也就是說(shuō)服務(wù)器上會(huì)有一個(gè)用戶(hù)需要的完整的數(shù)據(jù)存在,瀏覽器端僅僅被動(dòng)同步應(yīng)用都是這樣子的，數(shù)據(jù)最終都是落地在服務(wù)器上。服務(wù)器上保存每個(gè)用戶(hù)當(dāng)前所有的狀態(tài),比如瀏覽器到哪個(gè)表的哪個(gè)位置等等這樣服務(wù)器就能計(jì)算出當(dāng)前用戶(hù)所需的全部數(shù)據(jù)一般來(lái)講，服務(wù)器都是設(shè)計(jì)成無(wú)狀態(tài)的，這個(gè)以后項(xiàng)目發(fā)展壯大時(shí)，服務(wù)器擴(kuò)展的需要。而瀏覽器需要數(shù)據(jù)時(shí)去服務(wù)器獲取數(shù)據(jù)，服務(wù)器根據(jù)瀏覽器的發(fā)送的參數(shù)和接口協(xié)議提供數(shù)據(jù)，并且瀏覽器很容易知道當(dāng)前用戶(hù)在哪個(gè)表哪個(gè)位置。比如，新浪微薄網(wǎng)站，快到頁(yè)面尾部的時(shí)候，就主動(dòng)去服務(wù)器拉數(shù)據(jù)，到達(dá)一定數(shù)量后，采取下一頁(yè)的鏈接去獲取下一頁(yè)數(shù)據(jù)。客戶(hù)端與數(shù)據(jù)相關(guān)的Action一律通過(guò)WebSocket向服務(wù)器發(fā)送由服務(wù)器處理,服務(wù)器通過(guò)jsonpatch和WebSocket對(duì)本地的數(shù)據(jù)備份進(jìn)行更新這個(gè)技術(shù)實(shí)現(xiàn)主要跟應(yīng)用場(chǎng)景有關(guān)，websocket適合長(zhǎng)連接獲取數(shù)據(jù)。如果僅僅一般的更新數(shù)據(jù)用用普通的http協(xié)議就夠了。