講者簡介

Tommy Lin

• STARLUX Airlines Frontend Team Lead
• 業界及大專院校講師
• 台北前端社群、Git.tw發起人
• 偷米騎巴哥YouTube頻道經營
• 擁有人人稱羨的前端靈異體質、專長採到雷

急速Nuxt介紹

Server Side Render

還不是為了那個該死的SEO

PM：為什麼我在Google上搜尋不到網站xxx的內容?

案例一

被Nuxt賞了一個警告

[Vue warn]: The client-side rendered virtual DOM tree is not matching server-rendered content. This is likely caused by incorrect HTML markup, for example nesting block-level elements inside <p>, or missing <tbody>. Bailing hydration and performing full client-side render.

SSR產生的HTML標籤與CSR產生的HTML標籤不同

Random HTML Tag

案例二

嵌套路由

<nuxt-child />

遇到extendRoutes

一切都變了調

同場加映：自訂路由

使用props帶入預設參數

.nuxtignore

案例三

商業邏輯在前端裸奔?

善用serverMiddleware

更推薦express

最後想跟大家說

採到雷不可怕

可怕的是你又把雷埋回去了

工商服務

HiSkio線上課程

https://hiskio.com/fundraising/582/about?s=tc

Thank you for listening.