umi框架應用服務端SSR,實現資料預渲染

2022-10-08 23:00:28 字數 527 閱讀 1376

當我們的應用使用服務端渲染的方式時,可能需要把初始化載入的資料例如推薦等不需要使用者輸入的內容直接渲染獲取,也有利於seo。

利用getinitialprops靜態方法向元件注入資料

import  from 'umi'; //

資料預獲取

//服務端渲染時候到資料預獲取

indexpage.getinitialprops = (async (ctx) =>,

});}) as igetinitialprops;

getinitialprops中有幾個固定引數:

isserver:是否為服務端在執行該方法。

route:當前路由物件

history:history 物件

這樣,我們就可以在被注入元件的props中獲取到資料。該靜態方法使用應注意,如果非同步請求耗時較長,也會影響到首屏渲染。此時建議保速度,放棄資料預獲取。

服務端渲染SSR的理解

ssr服務端渲染server side render就是當進行請求時,頁面上的內容是通過服務端渲染生成的,瀏覽器直接顯示服務端返回的html即可。通常在構建乙個普通的spa單頁應用時,就是構建的客戶端渲染的應用,csr客戶端渲染client side render就是當進行請求時,頁面上的內容是通重...

SPA單頁面應用和SSR服務端渲染的區別

一 概念 1.1 什麼是單頁面應用 spa 概念 整個web專案只有乙個頁面,使用路由機制進行元件之間的切換 優點 客戶端渲染 資料傳輸量小 減少伺服器端壓力 互動 響應速度快 前後端完全分離 1.2 什麼是服務端渲染 ssr 概念 將元件或頁面通過伺服器端生成html字串,再傳送到瀏覽器端渲染 優...

VUE基於NUXT的SSR 服務端渲染

server side rendering 服務端渲染 原理 將 html 在服務端渲染,合成完整的 html 檔案再輸出到瀏覽器。適用場景 nuxt 作用就是在 node.js 上進一步封裝,然後省去我們搭建服務端環境的步驟,只需要遵循這個庫的一些規則就能輕鬆實現 ssr。可以作為乙個 node....