跳到主要內容

附錄

詞彙表

在 GitHub 上編輯此頁面

SvelteKit 的核心提供了一個高度可配置的渲染引擎。本節說明討論渲染時使用的一些術語。上述文件提供設定這些選項的參考。

CSR

用戶端渲染 (CSR) 是使用 JavaScript 在網頁瀏覽器中產生頁面內容。

在 SvelteKit 中,預設會使用用戶端渲染,但您可以使用 csr = false 頁面選項 關閉 JavaScript。

水化

Svelte 元件會儲存一些狀態,並在狀態更新時更新 DOM。在 SSR 擷取資料時,SvelteKit 預設會儲存此資料,並連同伺服器渲染的 HTML 傳輸給用戶端。然後元件可以在用戶端使用該資料初始化,而不需要再次呼叫相同的 API 端點。接著,Svelte 會檢查 DOM 是否處於預期的狀態,並在稱為水化的過程中附加事件監聽器。一旦元件完全水化,它們就可以像任何新建立的 Svelte 元件一樣對其屬性的變更做出反應。

在 SvelteKit 中,預設會水化頁面,但您可以使用 csr = false 頁面選項 關閉 JavaScript。

預先渲染

預先渲染是指在建置時間計算頁面內容並儲存 HTML 以供顯示。此方法具有與傳統伺服器渲染頁面相同的好處,但可避免為每個訪客重新計算頁面,因此隨著訪客數量的增加,幾乎可以免費擴充。其缺點是建置程序的成本較高,而且預先渲染的內容只能透過建置和部署應用程式的全新版本來更新。

並非所有頁面都可以預先渲染。基本規則如下:對於可預先渲染的內容,任何兩個直接存取它的使用者都必須從伺服器取得相同的內容,而且頁面不得包含動作。請注意,只要所有使用者都會看到相同的預先渲染內容,您仍然可以預先渲染根據頁面參數載入的內容。

預先渲染的頁面不限於靜態內容。如果您擷取使用者特定資料並在客戶端渲染,則可以建置個人化頁面。但這會受到如上所述,未對該內容執行 SSR 的缺點限制。

在 SvelteKit 中,您可以使用prerender 頁面選項svelte.config.js 中的prerender 設定來控制預先渲染。

路由

預設情況下,當您導覽至新頁面(按一下連結或使用瀏覽器的前進或後退按鈕)時,SvelteKit 將攔截嘗試的導覽並處理它,而不是允許瀏覽器向伺服器發送目的地頁面的要求。然後,SvelteKit 將透過渲染新頁面的元件來更新客戶端上顯示的內容,而該元件反過來可以呼叫必要的 API 端點。此回應嘗試的導覽在客戶端上更新頁面的程序稱為客戶端路由。

在 SvelteKit 中,預設會使用客戶端路由,但您可以使用data-sveltekit-reload略過它。

SPA

單頁應用程式 (SPA) 是一種應用程式,其中所有對伺服器的要求都會載入單一 HTML 檔案,然後根據要求的 URL,對要求的內容進行用戶端呈現。所有導覽都在用戶端上處理,這個程序稱為用戶端路由,其中每個頁面的內容都會更新,而共用版面元素則大致不變。SPA 沒有提供 SSR,這有上述的缺點。不過,有些應用程式不會受到這些缺點的影響,例如登入後端的複雜商業應用程式,其中 SEO 並不重要,而且已知使用者會從一致的運算環境存取應用程式。

在 SvelteKit 中,你可以使用 adapter-static 建立 SPA

SSG

靜態網站產生 (SSG) 是指每個頁面都預先呈現的網站。SvelteKit 並非專為執行靜態網站產生而建,就像某些工具一樣,因此可能無法像專為此目的而建的工具一樣有效率地呈現大量頁面。不過,與大多數專門建置的 SSG 相比,SvelteKit 確實允許在不同頁面上混合和搭配不同的呈現類型。完全預先呈現網站的一個好處是,你不需要維護或付費給伺服器來執行 SSR。一旦產生,網站就可以從 CDN 提供服務,帶來極佳的「首次位元組時間」效能。這種傳遞模式通常稱為 JAMstack。

在 SvelteKit 中,你可以使用 adapter-static 進行靜態網站產生,或透過使用 prerender 頁面選項prerender 設定檔svelte.config.js 中設定每個頁面為預先呈現。

SSR

伺服器端渲染 (SSR) 是在伺服器上產生頁面內容。SSR 通常是 SEO 的首選。雖然有些搜尋引擎可以索引在用戶端動態產生的內容,但即使在這些情況下也可能需要更長的時間。它也傾向於改善感知效能,並在 JavaScript 失敗或停用時讓使用者可以存取您的應用程式(這比您想像的 更常發生)。

在 SvelteKit 中,預設會伺服器端渲染頁面。您可以使用 ssr 頁面選項 來停用 SSR。

上一個 其他資源
下一個