二、vue高級(jí)：vue框架中的服務(wù)端渲染

1、服務(wù)端渲染和客戶端渲染各自指什么?有什么特點(diǎn)?

SSR：服務(wù)端渲染網(wǎng)頁內(nèi)容，由服務(wù)端生成，首屏?xí)r間短，有利于搜索引擎優(yōu)化；
CSR：客戶端渲染，vue、react框架渲染方式，SPA都是客戶端渲染，首屏渲染時(shí)間長不利于搜索引擎優(yōu)化

SSR和CSR對(duì)比
服務(wù)端渲染示例

服務(wù)端渲染返回的是字符串，其中的事件是無法生效的，如下圖所示，點(diǎn)擊按鈕，alert不會(huì)生效。vue的其他特性也沒有了，比如響應(yīng)式更新也不生效。


image.png

2、同構(gòu)的本質(zhì)是什么?

為了解決事件無法生效的問題，引入同構(gòu)的概念。

一份vue代碼在服務(wù)端渲染一遍，然后在客戶再渲染一遍。服務(wù)端渲染解決了首屏顯示快，客戶端渲染是需要把事件、響應(yīng)式特性等vue經(jīng)典的特性都綁回去

我們既可以使用vue的開發(fā)模式又可以享受種渲染方式的優(yōu)勢(shì)

3、服務(wù)端渲染Nuxt框架中異步數(shù)據(jù)訪問asyncData

Nuxt.js 是基于Vue.js庫、Node.js和功能強(qiáng)大的開發(fā)工具的直觀Web框架，可以創(chuàng)建高性能和生產(chǎn)級(jí)別的全棧Web應(yīng)用程序和網(wǎng)站。

image.png
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容