跳到內容

算繪模式

Astro 專案的程式碼必須算繪成 HTML 才能在網頁上顯示。

當路由被請求時,Astro 頁面、路由,以及 API 端點可以在建置時預先算繪在需要時由伺服器算繪。搭配 Astro 群島,必要時也能使用客戶端算繪。

Astro 的大多數運算發生在伺服器端而不是瀏覽器上。這通常會讓你的網站或應用程式變得更快,尤其是使用運算能力較差的裝置或連線速度較慢的裝置瀏覽時。在伺服器端算繪 HTML 預設即迅速、對 SEO 友善,且兼顧無障礙設計。

伺服器 output 模式

標題為 伺服器 output 模式

你可以透過 output 設定決定頁面如何算繪。

預先算繪(Pre-rendered)

標題為 預先算繪(Pre-rendered)

預設的算繪模式是 output: 'static',也就是在建置時將所有頁面路由轉換成 HTML。

在這個模式下,整個網站都是預先算繪,伺服器會提前把所有頁面建置好,讓它們隨時都能傳送到瀏覽器。之後每位使用者都會接收到相同的 HTML 文件,如果想更新頁面內容,則需要重新建置整個網站。這種方式也稱為靜態網站生成(static site generation, SSG)

所有 Astro 專案預設都會在建置時預先算繪(靜態生成),以便提供最輕量的瀏覽體驗。瀏覽器不需要等待建置 HTML,因為伺服器不需要動態產生任何頁面。你的網站不會受到後端資料來源的效能影響,一旦網站建置完成,只要伺服器正常運轉,所有頁面都能正常存取。

靜態網站可以包含 Astro 群島,使 UI 元件(或甚至嵌入客戶端算繪的應用程式!)正常互動。你可以自行選擇要用什麼 UI 框架

static 模式下,你可以使用 Astro 的 View Transitions API 實作動畫,並在切換不同頁面時保存狀態。靜態網站也能透過中介層攔截請求與轉換回應資料。

隨需算繪(On-demand rendered)

標題為 隨需算繪(On-demand rendered)

Astro 提供另外兩種輸出模式,可隨需算繪部分或所有頁面、路由、API 端點:

  • output: 'server' 適合高度動態的網站,由伺服器算繪大部分或所有路由。
  • output: 'hybrid' 適合大部分是靜態內容的網站,由伺服器算繪少部分路由。

由於這些路由是在使用者造訪時動態產生,它們可以針對每位使用者客製。舉例來說,隨需算繪的頁面可以顯示已登入使用者的帳號資訊,或顯示最新的資料而不需要重新建置整個網站。伺服器在請求當下算繪也稱為伺服器端算繪(server-side rendering, SSR)

如果你的 Astro 專案符合以下需求,你可以考慮啟用 serverhybrid 模式

  • API 端點:建立特定頁面,使其行為像是 API 端點。適合在不向客戶端暴露敏感資料的前提下,處理資料庫存取、身份驗證、授權等操作。

  • 受保護的頁面:在伺服器端根據使用者權限,決定使用者是否能存取頁面。

  • 頻繁更動的內容:在不需要重新建置整個網站的前提下單獨產生頁面。適合內容頻繁更動的網頁,例如透過 fetch() 向某個 API 抓取資料後顯示在頁面上。

serverhybrid 輸出模式下都能包含 Astro 群島,使 UI 元件(或甚至嵌入客戶端算繪的應用程式!)正常互動。你可以自行選擇要用什麼 UI 框架。搭配中介層和 Astro 的 View Transitions API 實作動畫,並在切換不同頁面時保存狀態,甚至可以做出高度互動的應用程式。

貢獻

你有哪些想法?

社群