原文網址：Vue--SSR(服務端渲染)--解決方案/實作方式_IT利刃出鞘的博客-CSDN博客

簡介

說明

本文介紹Vue專案實作服務端渲染（SSR）的解決方案，

什么是服務端渲染(SSR)？為什么要使用服務端渲染？服務端渲染、預渲染、客戶端渲染有什么區別？對這幾個有疑問的可以看這里：客戶端渲染，服務端渲染，預渲染--區別/詳解_IT利刃出鞘的博客-CSDN博客

官網

服務端渲染 — Vue.js

方案簡介

有三個方案可以實作Vue的SSR：Vue官方方案、Nust.js、Quasar Framework SSR + PWA，

這三者之間的對比如下：

項

Vue官方方案

Nust.js

Quasar Framework SSR + PWA

對Vue專案改動大小

很小

很大，

基本需要重新寫

較小

推薦度

最推薦

說明

本方案需要最低為如下版本的 Vue，以及以下 library 支持：

vue & vue-server-renderer 2.3.0+
vue-router 2.5.0+
vue-loader 12.0.0+ & vue-style-loader 3.0.0+

官網

https://ssr.vuejs.org/zh/

說明

Nuxt 是一個基于 Vue 生態的更高層的框架，為開發服務端渲染的 Vue 應用提供了極其便利的開發體驗，更酷的是，你甚至可以用它來做為靜態站生成器，

官網

https://nuxtjs.org/

說明

Quasar Framework 可以通過其構建系統、合理的配置和開發者擴展性生成 (可選地和 PWA 互通的) SSR 應用，讓你的想法的設計和構建變得輕而易舉，

Quasar 是一個基于 Node.js 和 webpack 的開發環境，它可以通過一套代碼完成 SPA、PWA、SSR、Electron、Capacitor 和 Cordova 應用的快速開發，

官網

Quasar Framework

vue中的生命周期鉤子函式中，只有beforeCreate與created會在ssr中呼叫（因為沒有動態更新）
1. 像定時器的timer，在客戶端里，可以在組件銷毀的時候講timer銷毀，但是在服務器中，由于沒有destroy，那么這個timer會一直存在，
服務器端與客戶端的相應的API是不同的
1. 可以將平臺特定實作包含在通用api中，
如果一些自定義指令直接操作dom，那么在ssr中可能報錯，
1. 可以抽象為組件，運行在虛擬DOM級別，或者在創建服務器renderer時，使用directive選項提供服務器端版本
如何將相同的vue應用程式提供給客戶端？
1. 需要使用webpack打包vue應用，
2. vue通常由webpack和vue-loader構建，但是許多webpack特定功能不能直接在node.js中使用（如file-loader匯入檔案）
3. 對于客戶端代碼，需要使用babel轉換es6代碼
4. 解決：對于客戶端與服務器端程式，都需要webpack打包，會產生服務器端與客戶端版本
代碼分割
1. 應用程式的代碼分割與異步加載，可以改善體積bundle的可互動時間，對于初始屏來講，可以“只加載所需”，
2. vue可以使用 const Foo = () => import('./Foo.vue')類似的方式來加載異步組件，//在vue2.5UI下，服務端渲染一部組件只能在路由組件，而2.5+以上異步組件可以在任何地方使用，不過依然需要在掛載app之前呼叫router

vue-ssr簡析 · 哈利呦

轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/413922.html

標籤：其他