YU 的前端學習筆記

這是一個 自我學習 的網站，旨在整理在 學習前端 過程中遇到的，那些需要更深入理解的關 重要概念 。

為什麼要建立這個網站？

在實際工作中有許多技能尚未使用到，或是可以更近一步的地方。尤其在 AI 工具普及的今天，雖然能輕鬆獲得解決方案，但卻常常不清楚背後的原理或核心概念。

過去主要接觸後台網站開發，對響應式網頁設計 (RWD) 的需求不高，也缺乏 SEO 經驗。因此，我希望透過這個網站，親手實踐並探索這些領域。

在工作、學習與實作過程中遇到的問題

• RWD 切版時，縮小畫面後常忽略排版錯誤。
• 如何設計 SEO？SSR 與 CSR 的概念與應用？
• 元件設計自由度過高，缺乏統一規範導致維護困難。

從錯誤中學到的事

過去開發後台時，未針對不同裝置進行顯示調整，導致在響應式實作中遇到許多排版問題。為此，我開始深入理解 Flexbox 、 CSS Grid 和 media query 的應用。

為了讓網頁更容易被 Google 等搜尋引擎找到並提升排名，進而吸引更多免費流量，我深入研究了 SEO。特別是對於 Vue 應用，可以透過 Nuxt 實現伺服器端渲染 (SSR)。

SSR (Server-Side Rendering)： 網頁內容在伺服器上生成完整的 HTML，然後傳送給瀏覽器。這對 SEO 非常友好，因為搜尋引擎可以直接讀取到完整的內容。

CSR (Client-Side Rendering)： 伺服器僅傳送一個空的 HTML 骨架和 JavaScript 檔案給瀏覽器，內容則由瀏覽器（客戶端）上的 JavaScript 生成和填充。這種方式對 SEO 較不友好。

當需求不斷增加或調整時，在基礎元件上持續增加功能會使後期維護變得異常困難。因此，即使元件之間存在高度相似性，也應適當地進行拆分，讓單一元件只負責更單純的事情。（例如：一個高度客製化的表格元件，如果既支援表單輸入又支援複雜表格顯示，當功能越加複雜時，應考慮將這兩種職責拆分為不同的元件。）

此網站使用技術

• Nuxt 3 + Vue 3 + TypeScript： 實現 SSR、SEO 優化與組件化開發，提供強大的框架支援。
• TailwindCSS： 提供快速且靈活的開發體驗，同時完美支援 RWD 響應式設計。
• npm + Vite： 作為快速且輕量的開發工具鏈，提供高效的開發和構建體驗。