建立網(wǎng)頁的方法有很多種。應該把負擔放在服務器上還是留給客戶端？
從本質上講，客戶端渲染(CSR)類似于宜家家具-網(wǎng)頁是在家中構建的，就在您的瀏覽器內。簡而言之，當使用由CSR支持的網(wǎng)站時，您會從服務器下載一個幾乎最基本的HTML文檔，該文檔會通過JavaScript直接在用戶的瀏覽器中進行修飾。
這種方法的出色之處和吸引力在于其性能優(yōu)化和用戶體驗增強。在與頁面交互或在啟用CSR的網(wǎng)站上提交表單時，用戶不會觸發(fā)整個頁面重新加載，因為每個請求都會進行異步調用，而只會更新頁面的一部分。
這有助于避免等待服務器響應，進而實現(xiàn)無縫導航——提高參與率并最終提高投資回報機會。事實上，CSR與另一個眾所周知的縮寫詞SPA（單頁應用程序）密切相關。由于網(wǎng)頁是由客戶端動態(tài)構建的，因此它可以卸載和加載新信息，從而創(chuàng)造快速且非常直觀的體驗。
微信和百度等知名品牌已有效運用CSR，它們就是這種模式發(fā)揮作用的原因和方式的明顯例子。那么，為什么它似乎已經(jīng)過時了？為什么它正逐漸被服務器端渲染(SSR)取代？好吧，這就是成都小程序開發(fā)今天要討論的內容。
在軟件開發(fā)服務這個充滿活力的世界里，用戶體驗(UX)已成為企業(yè)成功的基石。渲染本質上是將應用程序或網(wǎng)站的設計代碼轉換為用戶可交互的視覺顯示的過程。這種渲染的質量直接影響網(wǎng)站的吸引力和互動性——最終決定訪問者是留在您的平臺上還是跳槽到競爭對手那里。
頁面渲染速度對用戶參與度有重大影響。加載時間緩慢會導致高跳出率，因為當今精通技術的消費者希望在網(wǎng)上瀏覽時能立即獲得滿足感。研究表明，如果頁面加載時間超過三秒，53%的移動網(wǎng)站訪問會被放棄——這凸顯了快速渲染對于維持用戶興趣的重要性。
為了確保最佳性能，開發(fā)人員經(jīng)常使用SSR、CSR或稱為通用/同構渲染的混合方法（成都小程序開發(fā)稍后會討論）。每種方法在SEO優(yōu)化、初始加載時間、交互速度、可擴展性和可維護性等因素方面都有其優(yōu)缺點。
SSR可立即查看網(wǎng)頁，因為它會將完整填充的HTML文件從服務器發(fā)送到瀏覽器，但可能會影響頁面交互性，直到所有JavaScript完全加載。相反，CSR在加載后可提供更快的交互速度，因為JavaScript直接在客戶端瀏覽器中運行，但由于在等待JavaScript執(zhí)行時發(fā)送了空HTML，因此初始加載時間會變慢。
結合漸進式Web應用程序(PWAs)等現(xiàn)代技術可以幫助優(yōu)化SSR和CSR方法，使網(wǎng)站能夠更像原生應用程序一樣運行，提供離線功能并增強整體用戶體驗(UX)，無論網(wǎng)絡條件如何，從而確保即使在惡劣情況下也能保留客戶。
關于用戶的討論已經(jīng)夠多了，讓成都小程序開發(fā)來談談渲染。
從本質上講，SSR涉及在服務器上生成服務器渲染的html，然后再將其發(fā)送到客戶端（最終用戶的瀏覽器）。每次最終用戶發(fā)出頁面請求時，都會發(fā)生此服務器端渲染過程。本質上，當有人從他們的設備輸入或點擊您的網(wǎng)站URL時，每個請求的網(wǎng)頁都已經(jīng)是在全球不同地區(qū)的精英服務器上準備的完整渲染的html頁面。
與人們認為這種方法可能耗費大量資源相反，服務器端渲染框架旨在簡化客戶端執(zhí)行的操作，同時有效利用服務器的處理能力。這最大限度地減少了頻繁的服務器請求，這些請求在互聯(lián)網(wǎng)連接速度較慢的情況下可能會很麻煩。
SSR的一個根本優(yōu)勢在于其首次有效繪制(FMP)時間——這是一種性能指標，指的是加載html文件后關鍵源內容向用戶顯示的速度。由于預渲染頁面會立即呈現(xiàn)，因此用戶會立即專注于用戶界面，從而減少由于感知到的延遲而突然跳出的可能性——這對于旨在提高客戶保留率和參與率指標的高流量平臺至關重要。
但等等，還有更多！對于使用CSR的Web開發(fā)人員來說，最大的麻煩之一是，由于初始頁面幾乎是基本框架，像百度使用的搜索引擎機器人有時無法從網(wǎng)頁中抓取內容，正如您所預料的那樣，這對SEO來說是一個死刑判決。事實上，這正是開源框架SSR越來越受歡迎的原因——它終于解決了SPA最大的麻煩之一。
乍一看，服務器似乎并不是數(shù)字生態(tài)系統(tǒng)中最迷人的組成部分——當開發(fā)人員沐浴在聚光燈下玩CSS動畫或試驗AR/VR應用程序時，服務器卻是后臺嗡嗡作響的一股看不見的力量。
然而，想象一下，一場精心編排的芭蕾舞表演，如果沒有任何伴奏音樂，其細微差別和深度將大大減弱。這正是對服務器理解不夠深入會給您的業(yè)務模式造成的空白。
SSR的運作方式很像管弦樂隊指揮，負責根據(jù)訪客請求演奏交響樂，在成都小程序開發(fā)的網(wǎng)站上揮舞指揮棒。這些代碼片段有助于在瀏覽器屏幕到達用戶設備之前，使用經(jīng)過處理的服務器端渲染解決方案繪制瀏覽器屏幕-考慮提前完成拼圖，以便最終用戶減少等待時間。
SSR解決方案通過HTTP協(xié)議網(wǎng)絡解釋瀏覽器發(fā)出的每個請求，并將完成的html頁面直接提供給用戶。這減輕了解析客戶端JavaScript庫的需要以及處理服務器端javascript的繁瑣工作。由于成都小程序開發(fā)不再依賴客戶端javascript，成都小程序開發(fā)對成都小程序開發(fā)的網(wǎng)站或應用有了更多的控制，但這顯然是有代價的。
對于小型服務器來說，服務幾百個用戶不成問題，但如果要服務數(shù)百萬用戶怎么辦？請記住，一些最大的網(wǎng)站每天有數(shù)億用戶訪問—突然之間，所有這些請求都在向成都小程序開發(fā)的服務器發(fā)出請求：“嘿，請創(chuàng)建一個視圖?！比绻皇钦埱笮畔⒕妥阋宰尵W(wǎng)站癱瘓，那么呈現(xiàn)數(shù)百萬用戶的頁面就是一項艱巨的任務。
CSR之所以成為Web開發(fā)人員的一種高度有效的策略，主要是因為它能夠提供交互式和簡化的用戶體驗。
理解CSR的第一步是承認所有主要操作都發(fā)生在瀏覽器中。與服務器端進程不同，服務器端進程在強大的服務器上進行計算，然后向瀏覽器提供靜態(tài)HTML，而CSR利用開源JavaScript框架來支持這些引擎：例如Chrome的V8或Firefox的Spidermonkey。
是的，客戶端呈現(xiàn)的網(wǎng)站的初始加載成本比服務器呈現(xiàn)的網(wǎng)站相對較高，因為它們需要下載更多資產(chǎn)，包括單個JavaScript文件，而不僅僅是單頁文檔。但請記住，這只是一次；由于信息緩存在用戶的硬件上，后續(xù)導航將變得更順暢、更快速，提供無縫的瀏覽體驗——這正是當今急躁用戶的要求！
傳統(tǒng)上，在CSR中，數(shù)據(jù)獲取是在初始JavaScript下載后通過API進行的——可以獨立地異步加載和更新部分數(shù)據(jù)，而不是重新加載整個頁面——與舊方法相比，這是一個重大改進。為了幫助改善整個網(wǎng)絡內容的共享，開發(fā)人員還可以實施微信的OpenGraph協(xié)議，以便在社交媒體平臺上更好地呈現(xiàn)內容（嘿，Django和WordPress，我正在關注你們）。
正如成都小程序開發(fā)之前提到的，有人可能會認為SEO問題是CSR的弱點，因為搜索引擎無法有效地解釋JavaScript代碼。然而，隨著技術的進步和可重復使用的UI組件的集成，這種情況有所緩解。例如，百度bot現(xiàn)在能夠“讀取”依賴于JavaScript的類型。無論以何種標準衡量，這都不是一個完美的解決方案——JavaScript越有創(chuàng)意，你的網(wǎng)站就越有可能陷入SEO地獄。但比起幾年前，現(xiàn)在的情況好多了。
鑒于其對本地資源（即用戶的瀏覽器）的嚴重依賴，高級交互功能使CSR非常適合需要持續(xù)交互的Web應用程序，例如實時更新或動畫，典型場景包括SPA、首次渲染后分析站點、具有大量產(chǎn)品詳細選項的電子商務平臺等。
對于Web開發(fā)公司來說，在SSR和CSR之間做出選擇往往感覺像在迷宮中穿行。但是，成都小程序開發(fā)將嘗試深入研究這兩種方法的復雜性，看看成都小程序開發(fā)是否能幫助您找出最適合您的方法。
SSR相對于其競爭對手的一個不可否認的優(yōu)勢是它對搜索引擎爬蟲具有出色的可訪問性。這意味著百度bot或Bingbot可以快速索引您的內容，因為搜索引擎從服務器接收到完全呈現(xiàn)的頁面。因此，如果您追求出色的SEO性能，那么SSR可能會令人信服地滿足您的要求。
如今，用戶在面對緩慢的網(wǎng)站時總是缺乏耐心，他們希望能夠立即獲得信息。使用SSR后，用戶將不會再盯著空白屏幕，直到所有腳本都加載完畢（這是CSR中常見的陷阱），因為服務器會調度可供顯示的HTML，從而更快地實現(xiàn)所謂的“首次內容繪制”。
想想那些使用低端設備或網(wǎng)絡連接不佳的終端用戶。通過將繁重的操作分離到服務器端易于呈現(xiàn)的組件中，而不是像CSR那樣將它們完全外包給客戶的機器，成都小程序開發(fā)可以確保無論設備功能如何都能獲得公平的用戶體驗，而不會破壞他們的數(shù)據(jù)庫！
無論這些優(yōu)勢聽起來多么美好，沒有任何技術是完美的——SSR也不是——因此，它在展現(xiàn)優(yōu)點的同時，也指出了一些值得考慮的缺點：
在運營架構方面（特別是負載方面），SSR會給服務器帶來額外壓力，并對加載速度和成本產(chǎn)生深遠影響?；谠频姆湛梢詣討B(tài)擴展以應對這一問題，但這也意味著您必須非常謹慎地考慮成本結構。
需要持續(xù)動態(tài)更新的網(wǎng)站在SSR環(huán)境中可能會遇到挑戰(zhàn)，因為每次新的交互都需要從服務器獲取新的HTML。重新加載頁面會妨礙流暢的實時交互，而流暢的實時交互對于現(xiàn)場拍賣門戶或夢幻體育游戲應用程序等網(wǎng)站來說至關重要。
首先，讓成都小程序開發(fā)揭開客戶端渲染如此吸引人的一些方面的面紗。
CSR的一個關鍵方面是它能夠與服務器呈現(xiàn)的應用程序進行更動態(tài)的用戶交互。由于基于事件的操作在用戶瀏覽器中的處理速度比往返服務器的速度更快，因此訪問者可以享受非常無縫和流暢的瀏覽體驗。
將計算任務卸載到客戶端的設備上而不是僅僅放在服務器上，可以降低服務器負載，從而有可能降低與維護高性能服務器相關的運營成本。
由于將計算直接轉移到客戶端的瀏覽器上，對服務器呈現(xiàn)頁面的依賴減少了，可擴展性的復雜性（特別是在訪問高峰期）可能會隨著時間的推移而得到緩解，從而提供節(jié)省成本的機會，同時提高網(wǎng)站的穩(wěn)健性。
SEO復雜性
并非所有搜索引擎爬蟲都習慣于或足夠適應對圍繞客戶端渲染架構中廣泛使用的復雜JavaScript結構實現(xiàn)的站點進行索引；這可能會損害網(wǎng)頁可見性，導致較低的自然發(fā)現(xiàn)率。
雖然關于加載速度的討論往往傾向于靜態(tài)元素的顯示速度（由于初始輕量級服務器響應，靜態(tài)元素的顯示速度確實會更快），但當成都小程序開發(fā)考慮其他因素（例如，呈現(xiàn)完整的交互性網(wǎng)頁所需的總時間）時，情況就不那么樂觀了。由于對網(wǎng)絡條件和用戶計算能力的依賴性更強，初始加載后的內容更新實際上可能成為用戶的痛點。
不幸的是，讓客戶管理這么多東西可能會帶來網(wǎng)絡安全風險。公平地說，如果您的開發(fā)人員對網(wǎng)絡安全實踐有很好的了解，這并不是您應該擔心的問題。但請記住，錯誤確實會發(fā)生，有時成都小程序開發(fā)在項目中使用的庫可能會共享比成都小程序開發(fā)預期更多的數(shù)據(jù)。在這些情況下，任何人都可以看到這些信息。
同構Javascript的SSR或通用渲染是一種結合兩全其美的技術：SSR的速度和CSR的交互性。
使用通用渲染時，頁面首先在服務器上渲染，然后將一個小的JavaScript文件發(fā)送到瀏覽器以完成頁面渲染。這為您提供了SSR的速度，因為瀏覽器無需執(zhí)行任何工作即可渲染初始頁面，以及CSR的交互性，因為瀏覽器可以更新頁面而無需重新加載整個頁面。
更快的初始加載時間：頁面在發(fā)送到瀏覽器之前在服務器上呈現(xiàn)，因此可以立即加載。
更好的SEO：SSR頁面更容易被搜索引擎索引，這有助于提高您網(wǎng)站的搜索排名。
更具互動性：瀏覽器無需重新加載整個頁面即可更新頁面，從而可以提高用戶體驗。
更靈活：您可以使用任何JavaScript框架在服務器上和瀏覽器中呈現(xiàn)頁面。
實現(xiàn)起來更復雜：通用渲染的實現(xiàn)比SSR或CSR更復雜。
后續(xù)頁面加載速度可能會更慢：初始頁面加載完成后，后續(xù)頁面加載速度將比使用CSR慢，因為瀏覽器必須從服務器下載JavaScript文件。
總體而言，通用渲染對于需要快速且SEO友好的網(wǎng)站來說是一個不錯的選擇。如果您愿意付出額外的努力來實現(xiàn)它，通用渲染可以為您提供兩全其美的效果。
以下是一些使用通用渲染的網(wǎng)站示例：
百度搜索：百度搜索使用通用渲染來確?；ヂ?lián)網(wǎng)連接速度較慢的用戶能夠快速加載搜索結果頁面。
Twitter：Twitter使用通用渲染來確保推文能夠立即為用戶加載。
Medium：Medium使用通用渲染來提供流暢且可交互的閱讀體驗。
如果您正在考慮在網(wǎng)站上使用通用渲染，那么需要記住以下幾點：
確保您的服務器足夠快：服務器需要能夠快速呈現(xiàn)頁面，以便用戶可以立即加載。
使用良好的JavaScript框架：您使用的JavaScript框架應該針對性能進行良好的優(yōu)化。
徹底測試您的網(wǎng)站：在將您的網(wǎng)站部署到生產(chǎn)環(huán)境之前，請確保您的網(wǎng)站能夠正常使用通用渲染。
雖然開發(fā)人員可以使用任何框架來創(chuàng)建通用渲染頁面，但成都小程序開發(fā)已經(jīng)看到極其強大和友好的框架的興起，正在改變Web開發(fā)的格局。
React.js以其以組件為中心的理念重塑了現(xiàn)代Web開發(fā)的格局。除此之外，React中的服務器端渲染增強了應用程序的性能和SEO。它專為構建豐富的用戶界面而設計，引入了虛擬DOM，可確保高效的更新和渲染。
該框架專注于可重復使用的組件，簡化了代碼并加快了開發(fā)速度。React被科技巨頭和初創(chuàng)公司廣泛采用，凸顯了其在技術討論中的重要性。
Next.js是一個框架應該努力實現(xiàn)的目標：它靈活、文檔齊全，并提供了多種部署網(wǎng)頁的方法。
Next.js因其自動代碼拆分功能而脫穎而出——從而加快了頁面加載速度——這直接對用戶參與率產(chǎn)生積極影響——這是董事會會議上經(jīng)常討論的一項關鍵指標！
Svelte采用面向未來的方法構建響應式Web應用程序。它在構建時將您的代碼編譯為微小的獨立JavaScript模塊，而不是在運行時對其進行解釋，從而提供顯著的速度優(yōu)勢，這對于在當今快節(jié)奏的市場環(huán)境中保持競爭力至關重要。
對于那些準備拋棄NodeJS的人來說，Deno是一個功能強大的運行時，由與NodeJS相同的開發(fā)人員創(chuàng)建，而Fresh是其對現(xiàn)代JavaScriptWeb框架的回應，采用極簡主義風格，專為Typescript構建。Fresh可能是一個新手，但它有潛力成長并席卷全球。
我很想明確說明您應該采用哪種方法。但JavaScript開發(fā)服務的現(xiàn)實情況是，沒有一刀切的答案。每個項目都有自己獨特的要求。因此，成都小程序開發(fā)最有價值的建議是經(jīng)過深思熟慮，并根據(jù)成都小程序開發(fā)迄今為止討論的內容進行思考。哪種解決方案最適合您、您的項目和您的團隊？無論您選擇哪種，請放心，有無數(shù)的工具和解決方案可用于支持您的開發(fā)之旅。
文章均為全美專業(yè)成都小程序開發(fā)公司，專注于成都小程序開發(fā)服務原創(chuàng)，轉載請注明來自http://www.39247.cn/news/3005.html
