React、前端、後端到底是什麼？給剛開始學 Web 的新手看的超白話版

最近社群裡聊到一個很常見的問題： 「React 專案是不是要一直開著後端？」

這個問題背後，其實常常還藏著另外幾個：前端跟後端到底差在哪？為什麼有時候要用 PM2，有時候又不用？現在 React 到底是用 JS 還是 TS？

這些問題會混在一起很正常，因為「寫程式」、「部署」、「程式在哪裡執行」本來就是不同的概念。

這篇就用最簡單的方式整理一次，不塞太多術語。文章裡的圖都可以動手玩，目標是讓完全沒碰過前後端的人也看得懂。

一、React 是前端

先記最重要的一句：

React 本身主要是拿來做前端畫面的。

登入畫面、商品列表、按鈕、表單、後台管理介面、遊戲網站、會員中心，這些通常都是前端負責。

你可以把前端想成：使用者手上正在操作的那一層。

例如你打開一個購物網站，看到「加入購物車」，按下去之後畫面出現商品。這些畫面與操作，大部分就是前端。

二、那後端是什麼？

假設你按下「登入」，前端可能會把 Email 和密碼送到後端。後端會開始處理：

最後再把結果回傳給前端。簡單來說：

前端負責互動與呈現。 後端負責資料、規則、權限與核心邏輯。

可以想成餐廳。你跟服務生點菜，就像前端呼叫 API；廚房收到訂單之後開始處理，就像後端執行程式。你看得到菜單、看得到服務生，也吃得到菜，但你看不到廚房裡的料理過程。

三、前端不是「一定要透過後端才能做任何事情」

這是新手很容易誤會的地方。前端其實自己就可以做很多事情，不用每一件事都去問後端：

所以比較像是：前端自己能處理的，就自己處理；需要伺服器資料、權限或重要邏輯，才去找後端。

例如「把按鈕變成紅色」不需要後端。但「請告訴我這個會員帳戶還剩多少錢」，通常就應該去問後端。

四、那為什麼有人說「不要相信前端」？

因為前端是在使用者的電腦或手機上執行的，使用者有辦法修改它。

例如網站寫了「如果不是管理員，就不要顯示刪除按鈕」。這只能代表畫面上看不到按鈕，不代表安全，因為懂技術的人還是可能直接呼叫 DELETE /users/123。

所以真正重要的權限檢查，一定要放在後端。後端還是要一關一關確認：

因此有一句很重要的話：

前端可以負責使用體驗，但後端必須負責真正的安全。

五、React 為什麼有時候不用一直開程式？

假設你使用 React 加 Vite，開發完成之後執行 npm run build：

React 會被打包成一些檔案，它們跟圖片、HTML 很像。你可以把它們放在 Nginx、Cloudflare Pages、Netlify、Vercel、AWS S3 上面。

這時候其實沒有一個 React.exe 一直在伺服器背景跑。真正執行 React 的地方，通常是：使用者的瀏覽器。

所以一般的 React SPA（單頁應用），不一定需要 PM2。

六、那 PM2 到底在幹嘛？

PM2 可以先把它理解成：

幫你顧著 Node.js 程式，不要讓它死掉。

例如你有一個 Node.js 後端，它必須一直執行。不然前端呼叫 API 沒有人回，網站就壞了。如果 Node.js 掛掉，PM2 可以幫忙重新啟動。

所以很多人以前會有這個印象：「網站伺服器上的程式一定要一直開著。」其實要看你說的是前端還是後端。

七、最簡單的情況

假設你用 React、Node.js 加 MySQL。React 打包完是靜態檔案，Node.js 和 MySQL 則都要一直活著。前端與後端溝通的方式，就是 HTTP 請求與回應：

把它放進整個流程裡，看一次請求怎麼走：

所以 PM2 通常是在顧 Node.js Backend，不是在「顧 React」。

八、那 Next.js 為什麼又不一樣？

這也是很多人開始混亂的地方。因為 Next.js 不一定只有前端，它可以同時做一些伺服器上的事情，例如 SSR、Server Components、Server Actions、API Route。

這時候如果你自己把 Next.js 部署在 VPS 上，就可能真的需要 PM2，讓 Next.js Server 一直運作。

九、可是我放 Vercel 為什麼不用 PM2？

因為有人幫你處理掉了。

Vercel、Cloudflare、AWS 這些平台可以幫你管理伺服器。所以不是「現在網站已經不需要 Server 了」，而是：

Server 還是存在，只是你不用自己照顧它。

這就是現在很多雲端平台方便的地方。

十、所以「前端放伺服器」到底是什麼意思？

這句話也很容易害新手搞混。把 React Build 完的檔案放到伺服器，這些檔案確實放在伺服器。但是使用者進入網站之後，伺服器會把 app.js 傳出去，瀏覽器才開始執行 JavaScript。

所以：

檔案放在哪裡，和程式在哪裡執行，是兩件不同的事情。

這個觀念一懂，很多問題就會突然變簡單。

十一、React 現在到底用 JS 還是 TS？

兩個都可以。TypeScript 最大的特色之一，就是多了一套型別系統。例如你宣告 age 是數字，卻不小心塞進一段文字，TypeScript 就會提醒你：這裡怪怪的。

所以 TypeScript 可以幫你提早發現很多錯誤。它最後仍然會被轉成 JavaScript 才執行。

十二、那「TS + TS」是不是高手才用？

不是。現在前端 React 加 TypeScript、後端 Node.js 加 TypeScript，是非常常見的組合，例如 React 搭配 NestJS。

十三、新手只要先記住這張圖

前端在使用者的瀏覽器，後端在伺服器，兩邊透過 HTTP / API 溝通，後端再去資料庫存取資料。

十四、PM2 也只要記這個

React SPA 通常不需要 PM2。Node.js 後端與 Next.js SSR 自架時可能會用 PM2。放在 Vercel 這類平台，則是平台幫你管理。

就這樣。

最後總結

如果你是剛開始學 Web，不用一開始就把事情想得太複雜。

先記五句就好：

1. React 主要是做前端。
2. 前端通常在瀏覽器執行。
3. 後端通常在伺服器執行。
4. 前後端通常透過 HTTP / API 溝通。
5. PM2 是拿來管理需要持續執行的 Node.js 程式，不是 React 必備工具。

等這些概念熟了，再慢慢往下面這些繼續學就好。不用第一天就全部懂。

---

本文整理：Sun

社群討論參與與觀念交流：Psycho、Noct、Justin-wutopia、Andy.C、Sun

本文內容為社群討論後重新整理的白話版本，並非逐字引用，也不代表所有參與者對全文每一項技術描述皆有共同立場。