「文章分享：Making AWS News stupid fast with smart caching」這篇文章分享作者如何提昇 AWS News 的網站 UX，透過拆分 API 並實作不同的 Cache 策略，搭配前端的調整達到效能的提昇。原本的 API GET /articles 會回傳文章內容、熱門度以及已登入使用者的閱讀狀態（例如已讀或是評論）。優點： - 前端程式較為簡單（作者是後端，對 React Hook 沒那麼熟） - 只要一個 API 就能回傳頁面所有需要的內容缺點： - API 速度慢，因為不容易把個人化的內容做 Cache - 承上，UX 較差，因為使用者需要比較多的時間才能看到畫面

串文

2024-11-26 11:25

「文章分享：Making AWS News stupid fast with smart caching」這篇文章分享作者如何提昇 AWS News 的網站 UX，透過拆分 API 並實作不同的 Cache 策略，搭配前端的調整達到效能的提昇。原本的 API GET /articles 會回傳文章內容、熱門度以及已登入使用者的閱讀狀態（例如已讀或是評論）。優點： - 前端程式較為簡單（作者是後端，對 React Hook 沒那麼熟） - 只要一個 API 就能回傳頁面所有需要的內容缺點： - API 速度慢，因為不容易把個人化的內容做 Cache - 承上，UX 較差，因為使用者需要比較多的時間才能看到畫面 - 對於 Backend 的負擔較大，因為無法使用 Cache (1/3)

讚

回覆

轉發

作者

Kos Huang
koshuang

粉絲

1,348

串文

92+

讚

回覆

轉發

24小時粉絲增長

發文前

1,348

發文後24小時

1,350

變化

+2 (0.15%)

互動率

(讚 + 回覆 + 轉發) / 粉絲數

2.00%

回覆 (BETA)

最先回覆的內容
發文後	用戶	內容
幾秒內	Kos Huang koshuang	改善方法： API 調整把 API 拆分為三個 API，分成 - GET /articles：長期 Cache - GET /articles/popular：中期 Cache - GET /articles/user_data?article_ids=....：不 Cache 調整前端邏輯 - 同時呼叫 GET /articles與 GET /articles/popularAPI，然後再呼叫個人化的 API - 加入 css animation 讓重新 Render 看起來比較 Smooth 成果 - 一個頁面中有 18 個 API Request (包含往下滾動取得更多文章），其中有 16 個 Request 是有 Hit CDN Cache。 - 14 個 Request 的 Response Time 在 30ms 內。 (2/3)