SSR (Server Side Rendering) 伺服器端渲染

阿榮-avatar-img
阿榮
發佈於前端
更新 發佈閱讀 1 分鐘


伺服器端渲染（SSR）是一種在伺服器端渲染 HTML 頁面的技術，表示伺服器收到瀏覽器的請求之後，在伺服器端生成「完整的 HTML」。因為生成 HTML 的時候會在伺服器端先取得內部或外部 API 資料，所以 SSR 可以省去多次的來回往返。


SSR 的優點

  • 更快的首次渲染時間：SSR 可以更快地向用戶提供內容，因為 HTML 頁面已經在伺服器端渲染完成。
  • 更好的 SEO：SSR 可以讓搜尋引擎看到完整的 HTML 頁面，這可以提高搜尋排名。
  • 更好的無障礙性：SSR 可以為不使用 JavaScript 的用戶提供更好的體驗。


SSR 的缺點

  • 更複雜的開發：SSR 需要開發人員了解伺服器端渲染技術。
  • 潛在的性能問題：SSR 增加了伺服器的負載，如果沒有正確配置，可能會導致性能問題。


SSR 的兩個流行框架

  • Next.js
  • Nuxt.js


參考資料

  • Gemini AI
阿榮 | 前端 ~ 互動藝術程式前端
留言
avatar-img
阿榮 | 前端 ~ 互動藝術程式
2會員
39內容數
主要放程式學習筆記，分享 Creative Coding 相關內容、作品
阿榮 | 前端 ~ 互動藝術程式的其他內容
2025/04/13
什麼是 router？
2025/04/13
什麼是 router？
2024/04/19
[ CSS ] 什麼是 CSS Reset？
避免網頁在不同瀏覽器中長不一樣。用 CSS Reset 來「重置」和統一瀏覽器預設樣式。
Thumbnail
2024/04/19
[ CSS ] 什麼是 CSS Reset？
避免網頁在不同瀏覽器中長不一樣。用 CSS Reset 來「重置」和統一瀏覽器預設樣式。
Thumbnail
2024/04/15
var、let 與 const 的差異 | JavaScript
var let const 的差異
Thumbnail
2024/04/15
var、let 與 const 的差異 | JavaScript
var let const 的差異
Thumbnail
看更多
你可能也想看
Thumbnail
avatar-avatar
產品啟發筆記｜Joann Chen
什麼是 SEO / SEM？有什麼差別？適用時機有何不同？
本文介紹了SEO（搜尋引擎優化）和SEM（搜尋引擎行銷）的定義及應用以及其搭配建議。SEO 是為了提升網站在搜尋結果頁（SERP）上的排名，從而獲得更多自然流量和點擊，而SEM 是付費的廣告形式，能快速提高網站曝光率。
#搜尋#關鍵字#引擎
Thumbnail
avatar-avatar
產品啟發筆記｜Joann Chen
什麼是 SEO / SEM？有什麼差別？適用時機有何不同？
本文介紹了SEO（搜尋引擎優化）和SEM（搜尋引擎行銷）的定義及應用以及其搭配建議。SEO 是為了提升網站在搜尋結果頁（SERP）上的排名，從而獲得更多自然流量和點擊，而SEM 是付費的廣告形式，能快速提高網站曝光率。
#搜尋#關鍵字#引擎
Thumbnail
avatar-avatar
Chak Fung Chan的沙龍
SEO 策略與內容行銷
本文章介紹了搜尋引擎優化 (SEO) 策略，包括關鍵字策略、內容品質、行動相容性、頁面載入速度等。此外，也談及內容行銷、社群媒體互動、電子郵件行銷、付費廣告、影響者合作 (Influencer Partnership) 及使用者體驗 (UX) 優化。提供了優化網站流量的建議。
#行銷#品質#互動
Thumbnail
avatar-avatar
Chak Fung Chan的沙龍
SEO 策略與內容行銷
本文章介紹了搜尋引擎優化 (SEO) 策略，包括關鍵字策略、內容品質、行動相容性、頁面載入速度等。此外，也談及內容行銷、社群媒體互動、電子郵件行銷、付費廣告、影響者合作 (Influencer Partnership) 及使用者體驗 (UX) 優化。提供了優化網站流量的建議。
#行銷#品質#互動
Thumbnail
avatar-avatar
阿榮 | 前端 ~ 互動藝術程式
SSR (Server Side Rendering) 伺服器端渲染
伺服器端渲染（SSR）是一種在伺服器端渲染 HTML 頁面的技術。
#SSR#程式筆記#前端
Thumbnail
avatar-avatar
阿榮 | 前端 ~ 互動藝術程式
SSR (Server Side Rendering) 伺服器端渲染
伺服器端渲染（SSR）是一種在伺服器端渲染 HTML 頁面的技術。
#SSR#程式筆記#前端
Thumbnail
avatar-avatar
Kant Chan的沙龍
SEO服務優化 - 讓天盈達幫你全面提升線上曝光及生意
SEO服務優化是根據搜尋引擎運作原理及用戶搜尋行為，對網站進行技術和內容上的優化，提升網站排名和自然搜尋流量。天盈達提供全面、專業的本地與國際SEO服務優化，助你增加生意轉換率，吸引更多的國際流量，提高品牌知名度和銷售業績。
#搜尋#關鍵字#網站
Thumbnail
avatar-avatar
Kant Chan的沙龍
SEO服務優化 - 讓天盈達幫你全面提升線上曝光及生意
SEO服務優化是根據搜尋引擎運作原理及用戶搜尋行為，對網站進行技術和內容上的優化，提升網站排名和自然搜尋流量。天盈達提供全面、專業的本地與國際SEO服務優化，助你增加生意轉換率，吸引更多的國際流量，提高品牌知名度和銷售業績。
#搜尋#關鍵字#網站
Thumbnail
avatar-avatar
小P趨勢投資
算力的盡頭是電力！009819 小P量化交易者眼中的AI基建雙引擎致勝邏輯
背景：從冷門配角到市場主線，算力與電力被重新定價   小P從2008進入股市，每一個時期的投資亮點都不同，記得2009蘋果手機剛上市，當時蘋果只要在媒體上提到哪一間供應鏈，隔天股價就有驚人的表現，當時光學鏡頭非常熱門，因為手機第一次搭上鏡頭可以拍照，也造就傳統相機廠的殞落，如今手機已經全面普及，題
#AI#算力#電力
Thumbnail
avatar-avatar
小P趨勢投資
算力的盡頭是電力！009819 小P量化交易者眼中的AI基建雙引擎致勝邏輯
背景：從冷門配角到市場主線，算力與電力被重新定價   小P從2008進入股市，每一個時期的投資亮點都不同，記得2009蘋果手機剛上市，當時蘋果只要在媒體上提到哪一間供應鏈，隔天股價就有驚人的表現，當時光學鏡頭非常熱門，因為手機第一次搭上鏡頭可以拍照，也造就傳統相機廠的殞落，如今手機已經全面普及，題
#AI#算力#電力
Thumbnail
avatar-avatar
釀電影，啜一口電影的美好。
性別之外，存在面前──淺談劇作《遊林驚夢：巧遇 Hagay》
這是一場修復文化與重建精神的儀式，觀眾不需要完全看懂《遊林驚夢：巧遇Hagay》，但你能感受心與土地團聚的渴望，也不急著在此處釐清或定義什麼，但你的在場感受，就是一條線索，關於如何找著自己的路徑、自己的聲音。
#2026北藝嚴選#北藝嚴選#臺北表演藝術中心
Thumbnail
avatar-avatar
釀電影，啜一口電影的美好。
性別之外，存在面前──淺談劇作《遊林驚夢：巧遇 Hagay》
這是一場修復文化與重建精神的儀式，觀眾不需要完全看懂《遊林驚夢：巧遇Hagay》，但你能感受心與土地團聚的渴望，也不急著在此處釐清或定義什麼，但你的在場感受，就是一條線索，關於如何找著自己的路徑、自己的聲音。
#2026北藝嚴選#北藝嚴選#臺北表演藝術中心
Thumbnail
avatar-avatar
網頁設計白話文運動的沙龍
淺談搜尋引擎運作原理， SEO對於網站曝光度的重要性
文章將搜尋引擎的運作原理分為三個段落進行介紹，並強調網站結合有效的SEO策略對提升曝光度的重要性。
#搜尋引擎#搜尋引擎優化#SEO
Thumbnail
avatar-avatar
網頁設計白話文運動的沙龍
淺談搜尋引擎運作原理， SEO對於網站曝光度的重要性
文章將搜尋引擎的運作原理分為三個段落進行介紹，並強調網站結合有效的SEO策略對提升曝光度的重要性。
#搜尋引擎#搜尋引擎優化#SEO
Thumbnail
avatar-avatar
陳沅綦的沙龍
柏林劇團《三便士歌劇》：巴里．柯斯基的經典再造，與布萊希特劇場的當代轉向
本文分析導演巴里・柯斯基（Barrie Kosky）如何運用極簡的舞臺配置，將布萊希特（Bertolt Brecht）的「疏離效果」轉化為視覺奇觀與黑色幽默，探討《三便士歌劇》在當代劇場中的新詮釋，並藉由舞臺、燈光、服裝、音樂等多方面，分析該作如何在保留批判核心的同時，觸及觀眾的觀看位置與人性幽微。
#2026北藝嚴選#北藝嚴選#臺北表演藝術中心
Thumbnail
avatar-avatar
陳沅綦的沙龍
柏林劇團《三便士歌劇》：巴里．柯斯基的經典再造，與布萊希特劇場的當代轉向
本文分析導演巴里・柯斯基（Barrie Kosky）如何運用極簡的舞臺配置，將布萊希特（Bertolt Brecht）的「疏離效果」轉化為視覺奇觀與黑色幽默，探討《三便士歌劇》在當代劇場中的新詮釋，並藉由舞臺、燈光、服裝、音樂等多方面，分析該作如何在保留批判核心的同時，觸及觀眾的觀看位置與人性幽微。
#2026北藝嚴選#北藝嚴選#臺北表演藝術中心
Thumbnail
avatar-avatar
阿榮 | 前端 ~ 互動藝術程式
「前端效能優化」前傳 | 前端效能優化
為什麼要學前端效能優化?
#程式#程式筆記#優化
Thumbnail
avatar-avatar
阿榮 | 前端 ~ 互動藝術程式
「前端效能優化」前傳 | 前端效能優化
為什麼要學前端效能優化?
#程式#程式筆記#優化
Thumbnail
avatar-avatar
詹育杰的沙龍
《轉轉生 Re:INCARNATION》：Qudus Onikeku、約魯巴哲學與 Afrobeat 的去殖民身體政治
《轉轉生》（Re:INCARNATION）為奈及利亞編舞家庫德斯．奧尼奎庫與 Q 舞團創作的當代舞蹈作品，結合拉各斯街頭節奏、Afrobeat／Afrobeats、以及約魯巴宇宙觀的非線性時間，建構出關於輪迴的「誕生—死亡—重生」儀式結構。本文將從約魯巴哲學概念出發，解析其去殖民的身體政治。
#2026北藝嚴選#北藝嚴選#臺北表演藝術中心
Thumbnail
avatar-avatar
詹育杰的沙龍
《轉轉生 Re:INCARNATION》：Qudus Onikeku、約魯巴哲學與 Afrobeat 的去殖民身體政治
《轉轉生》（Re:INCARNATION）為奈及利亞編舞家庫德斯．奧尼奎庫與 Q 舞團創作的當代舞蹈作品，結合拉各斯街頭節奏、Afrobeat／Afrobeats、以及約魯巴宇宙觀的非線性時間，建構出關於輪迴的「誕生—死亡—重生」儀式結構。本文將從約魯巴哲學概念出發，解析其去殖民的身體政治。
#2026北藝嚴選#北藝嚴選#臺北表演藝術中心
Thumbnail
avatar-avatar
Web開發日誌
製作簡單的側邊欄
這篇文章教你如何製作側邊欄，包括準備工作、HTML和CSS的部分，還有一些互動效果。文章涵蓋了連結、圖片、超連結、大小、顏色、排版、flex和滑鼠互動等內容。
#html#CSS#教學
Thumbnail
avatar-avatar
Web開發日誌
製作簡單的側邊欄
這篇文章教你如何製作側邊欄，包括準備工作、HTML和CSS的部分，還有一些互動效果。文章涵蓋了連結、圖片、超連結、大小、顏色、排版、flex和滑鼠互動等內容。
#html#CSS#教學
Thumbnail
avatar-avatar
藍寶傑尼的沙龍
什麼是RWD響應式網頁設計？了解其如何影響網站SEO
RWD（適應性網頁設計）不僅能提高使用者體驗，還對SEO有深遠影響。透過提升使用者體驗、減少重複內容、加快頁面載入速度、符合移動優先索引和簡化網站管理，RWD設計能顯著提升網站在搜尋引擎中的排名。
#網站#網頁#設計
Thumbnail
avatar-avatar
藍寶傑尼的沙龍
什麼是RWD響應式網頁設計？了解其如何影響網站SEO
RWD（適應性網頁設計）不僅能提高使用者體驗，還對SEO有深遠影響。透過提升使用者體驗、減少重複內容、加快頁面載入速度、符合移動優先索引和簡化網站管理，RWD設計能顯著提升網站在搜尋引擎中的排名。
#網站#網頁#設計
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News