算繪模式
Astro 專案的程式碼必須算繪成 HTML 才能在網頁上顯示。
當路由被請求時,Astro 頁面、路由,以及 API 端點可以在建置時預先算繪或在需要時由伺服器算繪。搭配 Astro 群島,必要時也能使用客戶端算繪。
Astro 的大多數運算發生在伺服器端而不是瀏覽器上。這通常會讓你的網站或應用程式變得更快,尤其是使用運算能力較差的裝置或連線速度較慢的裝置瀏覽時。在伺服器端算繪 HTML 預設即迅速、對 SEO 友善,且兼顧無障礙設計。
伺服器 output
模式
標題為 伺服器 output 模式你可以透過 output
設定 (EN)決定頁面如何算繪。
預先算繪(Pre-rendered)
標題為 預先算繪(Pre-rendered)預設的算繪模式是 output: 'static'
,也就是在建置時將所有頁面路由轉換成 HTML。
在這個模式下,整個網站都是預先算繪,伺服器會提前把所有頁面建置好,讓它們隨時都能傳送到瀏覽器。之後每位使用者都會接收到相同的 HTML 文件,如果想更新頁面內容,則需要重新建置整個網站。這種方式也稱為靜態網站生成(static site generation, SSG)。
所有 Astro 專案預設都會在建置時預先算繪(靜態生成),以便提供最輕量的瀏覽體驗。瀏覽器不需要等待建置 HTML,因為伺服器不需要動態產生任何頁面。你的網站不會受到後端資料來源的效能影響,一旦網站建置完成,只要伺服器正常運轉,所有頁面都能正常存取。
靜態網站可以包含 Astro 群島,使 UI 元件(或甚至嵌入客戶端算繪的應用程式!)正常互動。你可以自行選擇要用什麼 UI 框架 (EN)。
在 static
模式下,你可以使用 Astro 的 View Transitions API (EN) 實作動畫,並在切換不同頁面時保存狀態。靜態網站也能透過中介層 (EN)攔截請求與轉換回應資料。
Astro 預設的 static
模式非常強大。如果你的網站以內容為主、頻繁更新,且對所有使用者顯示相同內容,那麼這個現代感十足的選項十分適合你。
隨需算繪(On-demand rendered)
標題為 隨需算繪(On-demand rendered)Astro 提供另外兩種輸出模式,可隨需算繪部分或所有頁面、路由、API 端點:
output: 'server'
適合高度動態的網站,由伺服器算繪大部分或所有路由。output: 'hybrid'
適合大部分是靜態內容的網站,由伺服器算繪少部分路由。
由於這些路由是在使用者造訪時動態產生,它們可以針對每位使用者客製。舉例來說,隨需算繪的頁面可以顯示已登入使用者的帳號資訊,或顯示最新的資料而不需要重新建置整個網站。伺服器在請求當下算繪也稱為伺服器端算繪(server-side rendering, SSR)。
如果你的 Astro 專案符合以下需求,你可以考慮啟用 server
或 hybrid
模式 (EN):
-
API 端點:建立特定頁面,使其行為像是 API 端點。適合在不向客戶端暴露敏感資料的前提下,處理資料庫存取、身份驗證、授權等操作。
-
受保護的頁面:在伺服器端根據使用者權限,決定使用者是否能存取頁面。
-
頻繁更動的內容:在不需要重新建置整個網站的前提下單獨產生頁面。適合內容頻繁更動的網頁,例如透過
fetch()
向某個 API 抓取資料後顯示在頁面上。
server
和 hybrid
輸出模式下都能包含 Astro 群島,使 UI 元件(或甚至嵌入客戶端算繪的應用程式!)正常互動。你可以自行選擇要用什麼 UI 框架 (EN)。搭配中介層 (EN)和 Astro 的 View Transitions API (EN) 實作動畫,並在切換不同頁面時保存狀態,甚至可以做出高度互動的應用程式。
不同於需要大量客戶端 JavaScript 的單頁應用程式,Astro 的隨需算繪提供真正的應用程式體驗。