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 1

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

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

2018-10-16 ‧ 由 Ralph 分享
DAY 2

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

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

2018-10-17 ‧ 由 Ralph 分享
DAY 3

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

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

2018-10-18 ‧ 由 Ralph 分享
DAY 4

04. Nuxt 環境建立

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

2018-10-19 ‧ 由 Ralph 分享
DAY 5

05. Nuxt 產生簡單頁面

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

2018-10-20 ‧ 由 Ralph 分享
DAY 6

06. Nuxt Routing 規則入門

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

2018-10-21 ‧ 由 Ralph 分享
DAY 7

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

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

2018-10-22 ‧ 由 Ralph 分享
DAY 8

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

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

2018-10-23 ‧ 由 Ralph 分享
DAY 9

09. Nuxt 頁面元件細部設定

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

2018-10-24 ‧ 由 Ralph 分享
DAY 10

10. Nuxt 頁面元件簡化過程

此篇為簡化過程摘要 Page Component @/pages <template> {{ title }} <!-- 2 -->...

2018-10-25 ‧ 由 Ralph 分享