當我訪問本地啟動的 SAP Spartacus Storefront 時，在 Chrome 開發者工具裡觀察到總共 23 個 OCC API 呼叫：

http://localhost:4200/electronics-spa/en/USD/
 
![](https://img-blog.csdnimg.cn/img_convert/03f7dfe6a3d10f3b5f0e3b89d4f0c6f2.gif)

這23個 OCC API 呼叫從功能上可以分成三組：

# 第一組：包含一個請求
 
/occ/v2/electronics-spa/cms/pages?lang=en&curr=USD
![](https://img-blog.csdnimg.cn/img_convert/bf1cca14af4b985184768194787fe86a.gif)

Cache-Control in request headers: no-cache
 
客戶端 HTTP 請求 cache-control 的值 為 no-cache，告訴伺服器，在傳送響應給客戶端之前，先進行快取有效性驗證(cache validation)
![](https://img-blog.csdnimg.cn/img_convert/57d92b15a98bd1c5185346d3436964d1.gif)

伺服器返回的響應頭部欄位 Cache-Control 的值：private

![](https://img-blog.csdnimg.cn/img_convert/169539acf6f8408dc8bbc9eb8844c562.gif)

根據下面這篇[文件](https://www.cloudflare.com/learning/cdn/glossary/what-is-cache-control/)，帶有 cache-control:private 的響應，不應該在 CDN 裡快取。

![](https://img-blog.csdnimg.cn/img_convert/1c5d29fc67553603934f342d28535c82.gif)

在該 pages OCC API 呼叫結束之後，其他 22 個 OCC API 才能觸發。

# 第二組：包含五個請求
 
(1) /occ/v2/electronics-spa/languages?lang=en&curr=USD
 
request header：Cache-Control: no-cache
response header：public, max-age=1800
 
(2) /occ/v2/electronics-spa/currencies?lang=en&curr=USD
 
request header：Cache-Control: no-cache
response header：public, max-age=1800
 
(3) /occ/v2/electronics-spa/cms/components?fields=DEFAULT&currentPage=0&pageSize=26&componentIds=AllBrandsCategoryLink%2CCanonBrandCategoryLink%2CSonyBrandCategoryLink%2CKodakBrandCategoryLink%2CSamsungBrandCategoryLink%2CToshibaBrandCategoryLink%2CFujifilmBrandCategoryLink%2CKingstonBrandCategoryLink%2CIciduBrandCategoryLink%2CTDKBrandCategoryLink%2CSweexBrandCategoryLink%2CDigitalCamerasCategoryLink%2CDigitalCompactsCategoryLink%2CDigitalSLRCategoryLink%2CFilmCamerasCategoryLink%2CHandheldCamcordersCategoryLink%2CWebcamsCategoryLink%2CCameraAccessoriesCategoryLink%2CCamerasFlashesCategoryLink%2CTripodsCategoryLink%2CCameraLensesCategoryLink%2CFlashMemoryCategoryLink%2CPowerSuppliesCategoryLink%2CColourFilmsCategoryLink%2CBlackAndWhiteFilmsCategoryLink%2CBlankVideotapesCategoryLink&lang=en&curr=USD
 
request header：Cache-Control: no-cache
response header：private
 
(4) /occ/v2/electronics-spa/cms/components?fields=DEFAULT&currentPage=0&pageSize=8&componentIds=AboutSAPCommerceLink%2CFAQLink%2CVisitSAPLink%2CContactUsLink%2CAgileCommerceBlogLink%2CLinkedInLink%2CFacebookLink%2CTwitterLink&lang=en&curr=USD
 
request header：Cache-Control: no-cache
response header：private
 
(5) /occ/v2/electronics-spa/users/anonymous/consenttemplates?lang=en&curr=USD
 
request header：Cache-Control: no-cache
response header：no-cache, no-store, max-age=0, must-revalidate
 
# 第三組：包含 17 個請求
 
/occ/v2/electronics-spa/products/<product-code>?fields=code,configurable,configuratorType,name,summary,price(formattedValue),images(DEFAULT,galleryIndex),baseProduct&lang=en&curr=USD
 
 
request header：Cache-Control: no-cache
response header：private, max-age=120

![](https://img-blog.csdnimg.cn/img_convert/046e8b13edbdeadc3a79d20cd1ca51c3.gif)

我們可以在 Chrome 開發者工具裡很容易觀察到瀏覽器裡這些 OCC API 併發請求的排隊情況。 
![](https://img-blog.csdnimg.cn/img_convert/d6d1c06729581d52702aa7d82dbe9dd3.gif)

根據 Google Chrome 的[幫助文件](https://developer.chrome.com/docs/devtools/network/reference#timing-explanation)，這種 Queueing 和 Stalled 的排隊情況，發生在客戶端。
![](https://img-blog.csdnimg.cn/img_convert/b1a4095b8680b42135c7a138d5652f7c.gif)</product-code>

關於 SAP 電商雲首頁載入時觸發的 OCC API 請求

相關文章