伺服器端渲染 (SSR)

伺服器端渲染 (SSR) 是一種技術，用於在元件的 JavaScript 實作載入和執行之前，產生並提供元件的 HTML，包括陰影 DOM 和樣式。

您可以使用 SSR 的原因有很多

• 效能。某些網站如果先渲染靜態 HTML 而無需等待 JavaScript 載入，然後（可選）載入頁面的 JavaScript 並水合元件，則可以更快地渲染。
• SEO 和網路爬蟲。雖然主要的搜尋引擎網路爬蟲使用完整的 JavaScript 功能瀏覽器渲染頁面，但並非所有網路爬蟲都支援 JavaScript。
• 穩定性。即使 JavaScript 無法載入或使用者停用了 JavaScript，靜態 HTML 也能渲染。

如需更深入了解伺服器端渲染的概念和技術，請參閱 web.dev 上的 在網路上渲染。

Lit 透過 Lit SSR 套件支援伺服器端渲染。Lit SSR 在非瀏覽器 JavaScript 環境（如 Node）中將 Lit 元件和模板渲染為靜態 HTML 標記。它在不完全模擬瀏覽器的 DOM 的情況下運作，並利用 Lit 的宣告式模板格式來實現快速效能、縮短首次位元組時間並支援串流。

Lit SSR 是一個低階函式庫，您可以直接在您的 Node 基礎伺服器或網站產生器中使用它。請查看 在 Koa 伺服器中使用 Lit SSR 的範例。

也發布了一些整合，使 Lit SSR 能夠開箱即用

• Lit Eleventy 外掛程式
• Lit 的 Astro 整合
• Rocket
• 使用 @lit-labs/nextjs 的 Next.js 頁面路由器
• 使用 nuxt-ssr-lit 的 Nuxt 3
• ...以及更多正在開發中！

此函式庫正在積極開發中，有一些我們希望解決的顯著限制

• 不支援非同步元件工作。請參閱問題 #2469。
• 僅支援使用陰影 DOM 的 Lit 元件。請參閱問題 #3080。
• 宣告式陰影 DOM 尚未在所有主要瀏覽器中實作，但有提供 polyfill。請在客戶端使用中閱讀更多相關資訊。
• 關於與其他自訂元素互通的 ElementRendererRegistry，也需要進行公開討論。

編輯此頁面