iT邦幫忙

ssr相關文章
共有 38 則文章
鐵人賽 Modern Web DAY 1

達標好文 技術 01. Nuxt.js 小跑起步

前言 寫文是為了將最近用 Vue.js + Nuxt.js 的使用細節整理,供日後參考。順序也許跟官網不太一樣,請多多包涵。 官方範例其實已涵蓋的大量情境,若是...

鐵人賽 Modern Web DAY 3

技術 #3: Nuxt.js 簡介 & 學習連結分享

上一篇,在不知道 Nuxt 是什麼的情況下,使用create-nuxt-app建立了一個 Nuxt 應用。 今年 9/21 在倫敦舉辦的 Vue Confere...

鐵人賽 Modern Web DAY 19
用範例理解 Vue.js 系列 第 19

技術 用範例理解 Vue.js #19:Vuetify

圖片來源 Vuetify 簡介 Vuetify 是一個語意化元件的前端框架,提供簡潔、直觀、易於重複使用的元件,使 Vue 的開發者可以輕鬆解決前端的問題。...

鐵人賽 Modern Web DAY 3

技術 03. Nuxt.js 怎麼處理 SSR 問題?擔任什麼角色?

關於 Universal Rendering 前一篇提到,原本前後端的 View 各自分開 隨著前端漸漸吃重,為了讓畫面邏輯不需要分散各處,有人提出新的架構 -...

鐵人賽 Modern Web

技術 32. Nuxt 整合 API 服務

這篇介紹 API 服務整合 若頁面內容不全靠 SSR 產生,部分頁面資料得透過瀏覽器向第三方、自架 API 後端抓取,會碰到跨域 + CORS 問題。 為什麼需...

鐵人賽 Modern Web DAY 7

技術 07. Nuxt 頁面怎麼切會更好?以電商登入頁為例

本來打算介紹 Nuxt 版面依功能劃分、由哪些區塊組成。 想到六角學院才比完《甜點電商PK賽》,現成切好的版面很好找,參賽選手也不少,拿來說明與練習再適合不過。...

鐵人賽 Modern Web DAY 2

技術 02. 講歷史,話說 SSR...

什麼叫做 SSR? Server-Side Rendering,頁面由後端渲染,HTML由後端產生     傳統做法整頁HTML不就完全由後端產生嗎? 使用...

鐵人賽 Modern Web DAY 4

技術 04. Nuxt 環境建立

這篇寫常用情境 產生新 Nuxt 專案 Vue.js SPA 寫一半,得追加 SSR 產生完整 Nuxt 專案 入門寫 Vue.js,新專案用 Vue-cl...

鐵人賽 Modern Web DAY 6

技術 06. Nuxt Routing 規則入門

前一章我們新增 /pages/product.vue 編輯即可在 http://localhost:3000/product 預覽頁面。 pages/ --|...

鐵人賽 Modern Web DAY 20
用範例理解 Vue.js 系列 第 20

技術 用範例理解 Vue.js #20:vue-router in Vuetify

圖片來源 延續昨天的主題 Vuetify 中用到的技術大方向有: vue-router vuex vue-server-renderer webpack e...

鐵人賽 Modern Web

技術 31. Nuxt 部署 - 反向代理

Nuxt 以 Universal 模式運行下,後端會起 Node Server (預設是 http://127.0.0.1:3000 ) 網站服務一般都走 8...

鐵人賽 Modern Web DAY 8

技術 08. Nuxt 客製《甜點電商》SEO 基本資訊

客製 SEO 資訊 上一章讓登入頁有了基本樣貌,但需要 SSR 是為了解決兩大問題 SEO SMO 具體怎麼做? 前端最基本的,在 埋對應的 Meta T...

鐵人賽 Modern Web DAY 5

技術 05. Nuxt 產生簡單頁面

前一章經 create-nuxt-app 生成的專案結構 放法按照 Nuxt 預設結構,相比 Vue.js 專案,已經幫你訂好了規則,方便對應與依循 各資料夾...

鐵人賽 Modern Web DAY 18

技術 18. Nuxt 運行模式 (Mode) 差在哪?

這篇打算介紹 Nuxt 可運行模式與解決情境 其中兩種靠調整設定,決定是否需要 Node Server Universal SPA 以及單純靜態頁 靜態頁...

鐵人賽 Modern Web DAY 25

技術 25. Nuxt Plugin 如何讓 Axios 更好用 (下)

上一篇解釋 Nuxt 插件 (Plugins) 用於管理特定執行環境的程式碼片段,並在 Nuxt App 自動載入、執行 Plugin 使用 一貫簡單風格,需要...

鐵人賽 Modern Web DAY 28

技術 28. Nuxt 靜態頁部署

這篇介紹靜態頁面部署方式 讀者可用電商登入頁案例試試 Nuxt 命令介紹過運行模式差異,透過命令 $ yarn generate /* npm run gen...

鐵人賽 Modern Web DAY 24

技術 24. Nuxt Plugin 如何讓 Axios 更好用 (上)

複習一下 asyncData 動態產生頁面,作業得透過 axios 拉 product api,藉此產生商品頁面的情境 安裝 Axios $ yarn add...

鐵人賽 Modern Web DAY 27

技術 27. @nuxtjs/axios 如何透過 module 包裝 axios

Nuxt Axios 模組 - @nuxtjs/axios ,是官方推薦使用的 HTTP Client Module 主要功能及組成有 axios 提供 H...

鐵人賽 Modern Web DAY 9

技術 09. Nuxt 頁面元件細部設定

Nuxt 頁面元件跟 Vue File 哪裡不同? Nuxt Routing 自動映射介紹過,/pages 的 Vue File 對應各個頁面。 雖然寫法一樣,...

鐵人賽 Modern Web DAY 26

技術 26. Nuxt Module,Nuxt 的擴充元件

Nuxt 不像 Angular 這種大型框架,功能包山包海,核心功能不夠得自行擴充。 雖然提過如何透過全域/頁面設定客製、用 Plugin 收納初始化片段,但對...

鐵人賽 Modern Web DAY 11

技術 11. Nuxt 頁面驗證和錯誤顯示

接下來幾篇都屬頁面客製,這篇講「Nuxt 發生錯誤時,他怎麼判斷與反應」 先回顧這張流程圖 Nuxt 收到請求時,會經過這麼多步驟 而碰到不可預期的錯誤或頁面...

鐵人賽 Modern Web DAY 17

技術 17. Nuxt 靜態資源 (Assets) 管理和引用

昨天有人問我引用圖片的路徑問題,答案整理成一篇補充 雖說是圖片(image)、檔案(file)、樣式(css/scss/sass)、js等靜態資源,Nuxt 依...

鐵人賽 Modern Web DAY 12

技術 12. Nuxt 客製頁面效果 - 讀取(Loading)

這篇是頁面客製段落其二,主題講「Nuxt 頁面讀取效果如何調整」 用來補充頁面細部設定 讓我們回想錯誤頁面,是用來「呈現錯誤狀態的頁面元件」 而頁面渲染前,N...

鐵人賽 Modern Web DAY 16

技術 16. Nuxt 全域設定檔 (nuxt.config.js),可以吃嗎?

前幾篇提過頁面細部設定,對某一頁調 <head>、改 transition等細部調整。 有些調整,突然 PM 希望套用到整個網站,該怎麼辦? 而前文...

鐵人賽 Modern Web DAY 22
用範例理解 Vue.js 系列 第 22

技術 用範例理解 Vue.js #22:vue-server-renderer in Vuetify

圖片來源 延續之前的主題 Vuetify 中用到的技術大方向有: vue-router vuex vue-server-renderer webpack e...

鐵人賽 Modern Web DAY 23
用範例理解 Vue.js 系列 第 23

技術 用範例理解 Vue.js #23:webpack in Vuetify

圖片來源 延續之前的主題 Vuetify 中用到的技術大方向有: vue-router vuex vue-server-renderer webpack e...

鐵人賽 Modern Web DAY 22

技術 22. Nuxt Routing 進階 - 巢狀路由/嵌套路由 (Nested Routes)

Nuxt 路由入門 篇介紹過兩層動態路由 pages/ --| _slug/ -----| comments.vue -----| index.vue --|...

鐵人賽 Modern Web DAY 14

技術 14. Nuxt 透過 asyncData 動態產生頁面內容

這篇主題講「Nuxt 如何用 asyncData 動態產生頁面內容」 用來補充頁面細部設定 asyncData 在執行順序中,排在頁面渲染(render)前,回...

鐵人賽 Modern Web DAY 13

技術 13. Nuxt 客製頁面效果 - 轉場(Transition)

這篇是頁面客製段落其三,主題講「Nuxt 頁面轉場效果如何調整」 回憶兩種暫態 正在讀取中 => 讀取效果 (Loading) 頁面切換中 =>...

鐵人賽 Modern Web DAY 29

技術 29. Nuxt Universal App 部署至 Heroku

前一篇介紹靜態頁部署,若換成 Universal Mode 呢? 「需要個 Node Server,不時讓人戳」 當工程師懶得管機器 (或你分身乏術),想把環境...