重要性 在敏捷開發中，更快速可靠讓軟體變成可以交付 截圖 2025-01-10 下午2.07.58 算是提高程式碼品質的一環（因為會提前檢查、統一團隊風格） Dev 簡略流程能做的事 如：在進入 deploy 之前，還會跑各種 testing 如：可能利用 container 封裝後上線，也會進行 scan 如：bundle size 也能在這個環節進行檢查

導入優勢 / 成本 (O) 瀏覽器支援度高、垂直或水平視窗也都能 handle (O) 效能優勢大於原生 CSS效果平滑，搭配 plugin，SplitText (自己寫很痛苦), Draggable, flip, scroll, etc... (O) 不限於框架 底層是用 DOMElement.querySelector() 選取 element (O) 生態系完整

支援的 CSS 使用？ 會影響設計師的工作職責嗎？（e.g. 像是需要對 Tailwind 或 CSS-in-JS 有多少瞭解？） 如何根據商業邏輯調整「UI 設計」與「邏輯切割」？ 預估會如何使用？是 Figma plugin 嗎？ 通用各種 Framework & CSS 撰寫方式 可以直接在 prompt 提出多方面的改善 prompt 甚至可以完全靠滑鼠輸出「改善的需求」，UI 上會提供建議 Pulgin 可以整合 builder.io 的開發 dev web (可以想像像 Storybook 會 build 一個網站)，可以讓不同 department 的人「使用非 coding 的方式」同步修改

Header + Footer Header Footer 全頁共用一個 <Layout /> 的 file 放在 app/layout.tsx。(layout 只能使用 /.(js|jsx|tsx)/) 不同畫面可以透過 generateMetadata 的 API 來生成 head 的內容。 使用 Server Component 做 static rendering 官方文件：A layout is UI that is shared between multiple pages. On navigation, layouts preserve state, remain interactive, and do not re-render.

Next 如何渲染 Server Component? render 的工作會根據 router 和 suspense 切分成 chunk 來載入 chuck 執行兩個步驟 取得 React Server Component Payload：React 先 render Server Component 成 RSC Payload RSC Payload（壓縮的二進位內容）說明 rendered 的 React Server Components tree，會包含： Server Components 的 rendered result 紀錄哪裡會有 Client Component