iT邦幫忙

鐵人檔案

2019 iT 邦幫忙鐵人賽
回列表
Modern Web

Nuxt - 使用 Vue.js 做 SSR 的第一哩路 系列

SSR (Server-Side Rendering) 被視為前端工程師解決 SPA (Single-Page Application) SEO 問題的主要解法

本系列文將從一個簡單 Nuxt.js 專案建立講起,Nuxt.js 如何與現有 Vue.js SPA 整合,透過 SSR ,讓前端工程師也能處理 SEO 問題。甚至,做得更多。

鐵人鍊成 | 共 32 篇文章 | 155 人訂閱 訂閱系列文 RSS系列文 團隊InfoSec Horadrim
DAY 21

21. Nuxt 處理首屏 - `<no-ssr>`

偶而還是會碰到某些區塊不想預先渲染,把某一區塊渲染的負荷分到 Browser,跟SPA一樣做CSR 今天主題寫另一個內建元件 - &lt;no-ssr&gt;...

2018-11-05 ‧ 由 Ralph 分享
DAY 22

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

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

2018-11-06 ‧ 由 Ralph 分享
DAY 23

23. Nuxt 細說`<nuxt-child>` 和 `<nuxt>`

這篇打算為 Nuxt 內建元件收尾,介紹最後兩種 &lt;nuxt-child&gt; &lt;nuxt&gt; 回顧上一章,巢狀路由讓 slug...

2018-11-07 ‧ 由 Ralph 分享
DAY 24

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

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

2018-11-08 ‧ 由 Ralph 分享
DAY 25

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

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

2018-11-09 ‧ 由 Ralph 分享
DAY 26

26. Nuxt Module,Nuxt 的擴充元件

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

2018-11-10 ‧ 由 Ralph 分享
DAY 27

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

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

2018-11-11 ‧ 由 Ralph 分享
DAY 28

28. Nuxt 靜態頁部署

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

2018-11-12 ‧ 由 Ralph 分享
DAY 29

29. Nuxt Universal App 部署至 Heroku

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

2018-11-13 ‧ 由 Ralph 分享
DAY 30

30. 總結,路還長著

第 30 天,聊一下開始玩 Nuxt 的緣由(本來想寫整合 API 服務,發現內容前面沒提觀念太多,有點跳) 一開始嘗試處理 SEO 混著後端框架寫 Vue (...

2018-11-14 ‧ 由 Ralph 分享