全棧身份認證實作：使用 Next.js、NextAuth.js 和 MongoDB－3. 介面配置

配置和設計用戶界面，包括 Navbar 和 Footer，及相關組件配置。

3–1. 建立資料夾結構

• app 資料夾中創建 (root) 和 (auth) 資料夾，使用括弧的名稱不會產生新的路徑，用於分類管理頁面。

• 在 components 資料夾中新增 shared 資料夾，存放自定義組件。

3–2. Navbar 組件

• 在專案根目錄中，新增 constants 資料夾並創建 index.ts 文件，透過 mainNavLinks 統一管理導覽列的連結。
• 在 components/shared 資料夾中新增 navbar.tsx，設計 Navbar 結構，包含 Logo、主導覽列表 mainNav 和使用者導覽區 userNav。
• 在 components/shared 資料夾中新增 main-nav.tsx、user-nav.tsx 和 user-avatar.tsx，並將它們整合到 Navbar。

程式碼

3–3. Footer 組件

• 透過 footerLinks 統一管理頁尾的連結內容。
• 在 components/shared 資料夾中新增 footer.tsx，設計 Footer 結構，包括連結區和 Logo。

程式碼

3–4. 組件整合

• 將 Navbar 組件（navbar.tsx）和 Footer 組件（footer.tsx）添加到 app/layout.tsx (RootLayout) 中，以便在所有頁面顯示。

程式碼

Navbar 及 Footer

單元重點

• 新增 Navbar 組件，使用 mainNavLinks 統一管理導覽列連結內容。
• 新增 Footer 組件，使用 footerLinks 統一管理頁尾連結內容。
• 將 Navbar 及 Footer 組件添加到 layout (RootLayout) 中，各個頁面都可以看到這兩個組件。

重要概念

“use server” 與 “use client” 組件在 Next.js 中的差異

• “use server”：Next.js 預設為伺服器端渲染 (SSR)，在內容送達瀏覽器前完成頁面渲染。
• “use client”：標記需要客戶端渲染 (CSR) 的頁面，在瀏覽器下載 JavaScript 後進行渲染。

伺服器端渲染 (SSR) vs 客戶端渲染 (CSR)

伺服器端渲染 (Server-Side Rendering, SSR) 優點：

• 更快首次渲染和優化 SEO：由於頁面在伺服器上先被完全渲染，因此對於搜索引擎來說更容易抓取，有利於搜索引擎優化（SEO）。
• 減輕客戶端負擔：伺服器進行大部分渲染工作，因此對於用戶端設備的性能要求較低。
• 提升首次訪問頁面的加載效率：用戶能夠更快看到完整渲染的頁面，提升使用體驗。

伺服器端渲染 (Server-Side Rendering, SSR) 缺點：

• 增加伺服器負擔：伺服器需要處理每個請求的渲染，對伺服器資源消耗較大。
• 可能影響響應速度：在高流量情況下可能導致響應速度變慢。
• 處理緩存策略較為複雜：需要有效管理緩存以確保用戶看到最新內容。

客戶端渲染 (Client-Side Rendering, CSR) 優點：

• 減輕伺服器負擔：頁面渲染工作主要在客戶端進行，減輕了伺服器的負擔。
• 增強交互性和動態內容：客戶端 JavaScript 允許創建更動態和交互性更強的 web 應用。
• 加快頁面間切換速度：一旦加載完成，頁面間切換可以非常迅速，無需重新加載整個頁面。

客戶端渲染 (Client-Side Rendering, CSR) 缺點：

• 初次加載時間較長：初始加載需要下載更多的 JavaScript，這可能導致首次加載時間變長。
• 對 SEO 不利：由於內容是在客戶端動態生成，對搜索引擎抓取不友好，影響 SEO 效果。
• 對用戶端性能要求高：所有渲染和計算工作都在客戶端進行，對於性能較低的設備可能是個挑戰。

選擇 SSR 或 CSR 取決於具體需求和預期的用戶體驗，有時候採用混合渲染策略可能會是最佳解決方案。

回到目錄
https://medium.com/p/3d2a3ec1d3b6