在前端開發中，有許多專有名詞需要掌握，特別是關於渲染方式和應用架構。本文將介紹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等。
對於這類的撰寫方式習慣嗎?歡迎多多進行良性的知識交流喔!目前是在學習階段，大家有不同看法的話歡迎進行良性的知識交流!
提醒，文章僅供正當的知識參考，文章不負任何責任。