SSR (Server Side Rendering) 伺服器端渲染
伺服器端渲染（SSR）是一種在伺服器端渲染 HTML 頁面的技術，表示伺服器收到瀏覽器的請求之後，在伺服器端生成「完整的 HTML」。因為生成 HTML 的時候會在伺服器端先取得內部或外部 API 資料，所以 SSR 可以省去多次的來回往返。
SSR 的優點
- 更快的首次渲染時間：SSR 可以更快地向用戶提供內容，因為 HTML 頁面已經在伺服器端渲染完成。
- 更好的 SEO：SSR 可以讓搜尋引擎看到完整的 HTML 頁面，這可以提高搜尋排名。
- 更好的無障礙性：SSR 可以為不使用 JavaScript 的用戶提供更好的體驗。
SSR 的缺點
- 更複雜的開發：SSR 需要開發人員了解伺服器端渲染技術。
- 潛在的性能問題：SSR 增加了伺服器的負載，如果沒有正確配置，可能會導致性能問題。
SSR 的兩個流行框架
- Next.js
- Nuxt.js
參考資料
- Gemini AI
留言0
查看全部
你可能也想看
Google News 追蹤
嘿，大家新年快樂~ 新年大家都在做什麼呢？
跨年夜的我趕工製作某個外包設計案，在工作告一段落時趕上倒數。
然後和兩個小孩過了一個忙亂的元旦。在深夜時刻，看到朋友傳來的解籤網站，興致勃勃熬夜體驗了一下，覺得非常好玩，或許有人玩過了，但還是想寫上來分享紀錄一下~
※ 原本狀態：伺服器渲染
這是 MVC 架構下的 request / response 示意圖，在這張圖呈現的架構裡，畫面和資料都由同一個架構處理。
伺服器渲染流程：
瀏覽器針對特定網址送出請求。
路由器解析請求後，轉接給對應的 controller。
controller 按照要求，透過
介紹不同的渲染技術和軟體應用，包括戲劇性對比度、虛幻引擎、OC渲染、建築渲染、V射線、3D渲染、PBR等，讓您深入瞭解這些技術對於創造視覺吸引力和真實感的重要性。
※ 靜態資源回傳
※ 什麼是靜態資源：
定義：是指事先準備好的資源，這些資源在伺服器上是靜態的、不會隨著每個請求而改變。
資源通常包括：
靜態 HTML 文件。
CSS。
圖像（Image）。
Video。
字體文件：google fonts。
favicon：網頁名稱旁邊的ico
SEO服務優化是根據搜尋引擎運作原理及用戶搜尋行為，對網站進行技術和內容上的優化，提升網站排名和自然搜尋流量。天盈達提供全面、專業的本地與國際SEO服務優化，助你增加生意轉換率，吸引更多的國際流量，提高品牌知名度和銷售業績。
圖片大小
漂亮的圖片讓人賞心悅目，對網站美化也是一大加分項，但若是為了呈現自家商品或吸引人的圖片搭配文字，而塞進過量的圖片，導致網站本身太重跑得太慢，容易使客人失去耐性。｜SEO工具
隨著時代的進步網路速度也與時俱進，但若網站本身太重，就算網路狀況再良好也無法馬上將網站載好，根據統計，大多數人的
R036 Blog API 伺服器的維護更新日誌 (2024/04/30)
開發環境技術
語言: Javascript
環境: Node JS
框架: Express.js
本次維護目的
優化及測試API伺服器程運行
重溫程式碼架構以便日後更新優化
Reac
CSS 的繼承性是開發網頁樣式時的一個重要概念，它使得樣式設計更加靈活和高效，有助於提高程式碼的可讀性、一致性和可重用性，並加快開發速度，從而提供更好的開發體驗。
前言
現在的前端需求已經越來越高，要考慮HTML及CSS的切版美觀程度，以及React以及Flutter所提出的元件(Componet、widget)觀念，也就是將元件模組化，使元件可以更動態的被程式運行，而不用靜態的客製化每一個介面。開發一個好的元件可以提升整體的開發速度，讓任何使用元件的開發者
嘿，大家新年快樂~ 新年大家都在做什麼呢？
跨年夜的我趕工製作某個外包設計案，在工作告一段落時趕上倒數。
然後和兩個小孩過了一個忙亂的元旦。在深夜時刻，看到朋友傳來的解籤網站，興致勃勃熬夜體驗了一下，覺得非常好玩，或許有人玩過了，但還是想寫上來分享紀錄一下~
※ 原本狀態：伺服器渲染
這是 MVC 架構下的 request / response 示意圖，在這張圖呈現的架構裡，畫面和資料都由同一個架構處理。
伺服器渲染流程：
瀏覽器針對特定網址送出請求。
路由器解析請求後，轉接給對應的 controller。
controller 按照要求，透過
介紹不同的渲染技術和軟體應用，包括戲劇性對比度、虛幻引擎、OC渲染、建築渲染、V射線、3D渲染、PBR等，讓您深入瞭解這些技術對於創造視覺吸引力和真實感的重要性。
※ 靜態資源回傳
※ 什麼是靜態資源：
定義：是指事先準備好的資源，這些資源在伺服器上是靜態的、不會隨著每個請求而改變。
資源通常包括：
靜態 HTML 文件。
CSS。
圖像（Image）。
Video。
字體文件：google fonts。
favicon：網頁名稱旁邊的ico
SEO服務優化是根據搜尋引擎運作原理及用戶搜尋行為，對網站進行技術和內容上的優化，提升網站排名和自然搜尋流量。天盈達提供全面、專業的本地與國際SEO服務優化，助你增加生意轉換率，吸引更多的國際流量，提高品牌知名度和銷售業績。
圖片大小
漂亮的圖片讓人賞心悅目，對網站美化也是一大加分項，但若是為了呈現自家商品或吸引人的圖片搭配文字，而塞進過量的圖片，導致網站本身太重跑得太慢，容易使客人失去耐性。｜SEO工具
隨著時代的進步網路速度也與時俱進，但若網站本身太重，就算網路狀況再良好也無法馬上將網站載好，根據統計，大多數人的
R036 Blog API 伺服器的維護更新日誌 (2024/04/30)
開發環境技術
語言: Javascript
環境: Node JS
框架: Express.js
本次維護目的
優化及測試API伺服器程運行
重溫程式碼架構以便日後更新優化
Reac
CSS 的繼承性是開發網頁樣式時的一個重要概念，它使得樣式設計更加靈活和高效，有助於提高程式碼的可讀性、一致性和可重用性，並加快開發速度，從而提供更好的開發體驗。
前言
現在的前端需求已經越來越高，要考慮HTML及CSS的切版美觀程度，以及React以及Flutter所提出的元件(Componet、widget)觀念，也就是將元件模組化，使元件可以更動態的被程式運行，而不用靜態的客製化每一個介面。開發一個好的元件可以提升整體的開發速度，讓任何使用元件的開發者