前端專有名詞(解析)
閱讀時間約 5 分鐘
在前端開發中，有許多專有名詞需要掌握，特別是關於渲染方式和應用架構。本文將介紹SSR (Server Side Rendering)、CSR (Client Side Rendering)、MPA (Multi-Page Application) 及 SPA (Single-Page Application) 的基本概念與優缺點。
SSR (Server Side Rendering)
什麼是SSR？
SSR指的是在伺服器上生成HTML內容，然後將這些內容發送到客戶端的渲染方式。這意味著當用戶發出請求一個頁面時，伺服器會生成完整的HTML並回傳，讓瀏覽器直接顯示。
優點
- SEO友好：由於伺服器直接輸出完整的HTML，搜索引擎可以輕鬆爬取並索引內容。
- 首次加載速度快：用戶在首次訪問時可以快速看到頁面內容。
CSR (Client Side Rendering)
什麼是CSR？
CSR則是在客戶端進行渲染的方式，當用戶請求頁面時，伺服器通常只回傳一個基本的HTML頁面和JavaScript檔案，後者在客戶端運行以生成和渲染內容。
優點
- 用戶體驗良好：由於只需加載一次頁面，後續的交互操作都可以無縫進行，感覺更流暢。
- 伺服器壓力小：伺服器負擔減輕，因為大部分渲染工作是在用戶的瀏覽器中完成的。
MPA (Multi-Page Application)
什麼是MPA？
MPA是一種傳統的網頁應用架構，每次用戶請求不同的頁面時，伺服器都會返回一個新的HTML頁面。這種方式相對來說比較直觀，容易實現。
優點
- 簡單明瞭：每個頁面都是獨立的，可以單獨加載。
- SEO友好：每個頁面都可以被搜索引擎單獨索引。
SPA (Single-Page Application)
什麼是SPA？
SPA則是一種只有一個HTML頁面的應用，所有的內容更新都是通過JavaScript來實現的，從而避免了整頁刷新。
優點
- 快速的用戶體驗：因為不需要重新加載整個頁面，所以用戶的操作感覺非常流暢。
- 減少伺服器請求：大多數資源只需加載一次，後續的請求都是以API的方式進行，減少了伺服器的負擔。
匯入與匯出
在JavaScript中，模組化撰寫是非常重要的概念。以下是如何使用匯入和匯出來組織你的程式。
HTML文件範例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>匯入匯出</title>
</head>
<body>
<!-- 如果要匯入必須加上 type="module" -->
<script src="./主要.js" type="module"></script>
</body>
</html>
匯出.js
const a = 10;
const b = 5;
// 預設匯出
export default a;
// 具名匯出
export { a, b };
主要.js
// 預設匯入
import aaa from './匯出.js';
// 具名匯入
import { a, b } from './匯出.js';
console.log(aaa);
console.log(`a為${a}`, `b為${b}`);
總結
這些基本概念是前端開發的重要基礎，理解它們可以幫助你更好地設計和實現網頁應用。在不斷變化的前端技術中，這些概念仍然保持著它們的核心地位，通常前端會經常使用到這些名詞。接下來會實作Node.js等。
對於這類的撰寫方式習慣嗎?歡迎多多進行良性的知識交流喔!目前是在學習階段，大家有不同看法的話歡迎進行良性的知識交流!
提醒，文章僅供正當的知識參考，文章不負任何責任。
留言0
查看全部
你可能也想看
Google News 追蹤
我很鼓勵投資人不要只投資台股，對股市有一點熟悉度後，建議範圍擴況大到美股，甚至是投資全球。因為台股僅是單一國家/市場，如果能將資產投資到其他國家，風險會更分散，機會也更多，特別是美國股市。
美股會很難懂嗎？我相信你認識的美國企業可能會比台灣企業多，我從標普500成分股前15大企業裡隨便抓十
美股因多家熱門話題與龍頭企業市值快速增長受到關注，本文介紹如何透過國泰世華CUBE App 開設台股及美股複委託帳戶、定期理財的便利性。
定期投資適合單筆資金有限、經驗不多的理財小白、上班族，或者忙碌、沒時間研究基本面的朋友，國泰世華CUBE App美股定額投資功能，操作便利性幾乎完勝海外券商。
這是張老師的第三本書，我想前二本應該也有很多朋友們都有讀過，我想絕對是受益良多，而這次在書名上就直接點出，著重在從投資的角度來切入
先學習 HTML, CSS, JavaScript 基礎觀念，
再透過實作專案，慢慢熟悉不同的語法使用方式。
CSS 是控制網頁外觀的語言，應用於網頁設計、UI/UX 設計、電子商務和移動應用開發。主要使用者包括前端開發者、UI/UX 設計師和網頁設計師。CSS 的特性有樣式控制、層疊優先級、響應式設計及分離內容與樣式。
※ 原本狀態：伺服器渲染
這是 MVC 架構下的 request / response 示意圖，在這張圖呈現的架構裡，畫面和資料都由同一個架構處理。
伺服器渲染流程：
瀏覽器針對特定網址送出請求。
路由器解析請求後，轉接給對應的 controller。
controller 按照要求，透過
※ 視圖模板
視圖模板（View Templates） 是在 MVC 架構中負責展示數據的 HTML 文件，包含模板語法，用於在渲染時插入實際數據。它們的主要目的是分離數據與展示邏輯，讓代碼更加模塊化和易於維護。
視圖模板設計和使用的核心理念，就是「重複的事情不要重複做、效益最大化、有效利用資源
是的，身為前端工程師的基本功！還是需要時不時拿出來打磨一番！
很多大公司的切版與前端是分開的，但不能因為碰不到就不去理解，假如要系統性的調整樣式，那麼你就一定要懂基礎，就好像你要調整微前端的架構，總不能連包板工具的設定都不會吧！
回到正題，這系列文章每個禮拜三都會更新一題CSS Battle的題
是的，身為前端工程師的基本功！
還是需要時不時拿出來打磨一番，這系列文章每個禮拜三都會更新一題CSS Battle的題目，歡迎與我交流喔！
是的，身為前端工程師的基本功！還是需要時不時拿出來打磨一番！
這系列文章每個禮拜三都會更新一題CSS Battle的題目與解法
您對前端有興趣，對CSS不陌生。CSS新特性前應瞭解基本內容。CSS屬性制定經歷過程，瀏覽器私有前綴及處理，開發者對新特性漸進增強，優雅降級處理，Web標準定義、作用等。
我很鼓勵投資人不要只投資台股，對股市有一點熟悉度後，建議範圍擴況大到美股，甚至是投資全球。因為台股僅是單一國家/市場，如果能將資產投資到其他國家，風險會更分散，機會也更多，特別是美國股市。
美股會很難懂嗎？我相信你認識的美國企業可能會比台灣企業多，我從標普500成分股前15大企業裡隨便抓十
美股因多家熱門話題與龍頭企業市值快速增長受到關注，本文介紹如何透過國泰世華CUBE App 開設台股及美股複委託帳戶、定期理財的便利性。
定期投資適合單筆資金有限、經驗不多的理財小白、上班族，或者忙碌、沒時間研究基本面的朋友，國泰世華CUBE App美股定額投資功能，操作便利性幾乎完勝海外券商。
這是張老師的第三本書，我想前二本應該也有很多朋友們都有讀過，我想絕對是受益良多，而這次在書名上就直接點出，著重在從投資的角度來切入
先學習 HTML, CSS, JavaScript 基礎觀念，
再透過實作專案，慢慢熟悉不同的語法使用方式。
CSS 是控制網頁外觀的語言，應用於網頁設計、UI/UX 設計、電子商務和移動應用開發。主要使用者包括前端開發者、UI/UX 設計師和網頁設計師。CSS 的特性有樣式控制、層疊優先級、響應式設計及分離內容與樣式。
※ 原本狀態：伺服器渲染
這是 MVC 架構下的 request / response 示意圖，在這張圖呈現的架構裡，畫面和資料都由同一個架構處理。
伺服器渲染流程：
瀏覽器針對特定網址送出請求。
路由器解析請求後，轉接給對應的 controller。
controller 按照要求，透過
※ 視圖模板
視圖模板（View Templates） 是在 MVC 架構中負責展示數據的 HTML 文件，包含模板語法，用於在渲染時插入實際數據。它們的主要目的是分離數據與展示邏輯，讓代碼更加模塊化和易於維護。
視圖模板設計和使用的核心理念，就是「重複的事情不要重複做、效益最大化、有效利用資源
是的，身為前端工程師的基本功！還是需要時不時拿出來打磨一番！
很多大公司的切版與前端是分開的，但不能因為碰不到就不去理解，假如要系統性的調整樣式，那麼你就一定要懂基礎，就好像你要調整微前端的架構，總不能連包板工具的設定都不會吧！
回到正題，這系列文章每個禮拜三都會更新一題CSS Battle的題
是的，身為前端工程師的基本功！
還是需要時不時拿出來打磨一番，這系列文章每個禮拜三都會更新一題CSS Battle的題目，歡迎與我交流喔！
是的，身為前端工程師的基本功！還是需要時不時拿出來打磨一番！
這系列文章每個禮拜三都會更新一題CSS Battle的題目與解法
您對前端有興趣，對CSS不陌生。CSS新特性前應瞭解基本內容。CSS屬性制定經歷過程，瀏覽器私有前綴及處理，開發者對新特性漸進增強，優雅降級處理，Web標準定義、作用等。