React 生態(tài)系統(tǒng)是一個技術(shù)不斷發(fā)展的動態(tài)景觀。本文深入探討了在 2025 年建立全端應(yīng)用程式的強(qiáng)大技術(shù)堆疊，使您能夠?qū)崿F(xiàn)自己的產(chǎn)品（例如 SaaS）或其最小可行產(chǎn)品（MVP）。

身為一名經(jīng)驗豐富的 Fullstack Web 開發(fā)人員，我花了數(shù)年時間完善我的方法。每年對技術(shù)堆疊進(jìn)行重新評估對於平衡前沿趨勢與長期專案穩(wěn)定性和可維護(hù)性至關(guān)重要。

我的上一次工作經(jīng)驗於 2024 年 11 月結(jié)束，它為我提供了寶貴的回饋。雖然我對最初的技術(shù)堆疊感到滿意，但回顧為未來的專案提供了寶貴的經(jīng)驗教訓(xùn)。

讓我們踏上這段發(fā)現(xiàn)之旅，探索這個簡潔而強(qiáng)大的選擇中等待著的令人興奮的可能性。

React 作為一個全端框架

混音.js

Remix.js 是一個全端 Web 框架，它優(yōu)先考慮開發(fā)人員體驗並利用 Web 基礎(chǔ)知識來創(chuàng)建快速、有彈性且用戶友好的 Web 應(yīng)用程式。

主要特點：

• 載入和取得資料： Remix 透過內(nèi)建載入器和操作簡化了資料擷取。載入器在渲染路線之前取得數(shù)據(jù)，而操作則處理表單提交和其他副作用。
• 基於檔案系統(tǒng)的路由：路由被定義為專案檔案系統(tǒng)中的文件，使路由結(jié)構(gòu)直觀且易於理解。
• 伺服器端渲染 (SSR)： Remix 擅長 SSR，提供出色的 SEO 和更快的初始載入時間。
• 資料傳輸：Remix可以將資料傳輸?shù)娇蛻舳?，提高感知效能和使用者體驗。
• 表單處理：整合表單處理簡化了常見任務(wù)，例如驗證、提交和錯誤處理。
• 測試： Remix 鼓勵在各個層級進(jìn)行測試，包括單元、整合和端到端測試。
• 靈活性： Remix 可以部署在各種環(huán)境中，包括 Node.js 伺服器和 Cloudflare Workers 等邊緣運算平臺。

使用 Remix 的好處：

• 更好的效能：SSR 和資料流有助於更快的載入時間和更流暢的使用者體驗。
• 更好的開發(fā)者體驗： Remix 對開發(fā)者體驗的關(guān)注使其使用起來很愉快，這要歸功於其直覺的路由、資料擷取機(jī)制和內(nèi)建功能。
• 靈活性和可擴(kuò)充性： Remix 可以部署在各種環(huán)境中，使其適應(yīng)不同的專案需求。
• 強(qiáng)大的社區(qū)和生態(tài)系統(tǒng)： Remix 擁有不斷發(fā)展的社區(qū)和支持性生態(tài)系統(tǒng)，提供各種資源和工具。

Remix.js 的核心提供了一種現(xiàn)代、高效的 Web 開發(fā)方法，使開發(fā)人員能夠建立高品質(zhì)、高效能、以使用者為中心的應(yīng)用程式。

星星

考慮一個專門的登陸頁？ Astro 在這項任務(wù)中表現(xiàn)出色！

雖然 Remix.js 擅長提供靜態(tài)和動態(tài)內(nèi)容的整體應(yīng)用程序，但 Astro 提供了一種引人注目的替代方案，專門用於創(chuàng)建卓越的登陸頁面。這就是為什麼 Astro 可能是完美的選擇：

主要特點：

• 超快效能： Astro 優(yōu)先考慮速度，提供閃電般的快速登陸頁面，讓訪客保持參與。
• 直覺的基於檔案的路由：與 Remix 類似，Astro 利用基於檔案的路由系統(tǒng)，可以輕鬆建立和管理登陸頁面的內(nèi)容。
• 基於元件的開發(fā)：建立可重複使用的元件，以最佳化開發(fā)流程並在整個登陸頁面上實現(xiàn)一致的設(shè)計。
• 與多個框架集成： Astro 與 React、Vue 和 Svelte 等流行框架無縫集成，讓您能夠利用現(xiàn)有的技能和偏好。
• 支援無頭內(nèi)容管理系統(tǒng) (CMS)： Astro 與多種無頭 CMS 解決方案配合良好，允許靈活管理登陸頁面的內(nèi)容。

使用 Astro 作為登陸頁面的好處

• 專注於開發(fā)人員體驗： Astro 簡潔的語法和基於文件的結(jié)構(gòu)簡化了開發(fā)，使您能夠?qū)Ｗ㈧秳?chuàng)建有影響力的登陸頁面。
• 快速原型設(shè)計： Astro 的速度使其成為登陸頁面設(shè)計中快速原型設(shè)計和迭代的理想選擇。
• SEO 優(yōu)化： Astro 產(chǎn)生乾淨(jìng)且結(jié)構(gòu)良好的 HTML，有助於為您的登陸頁面提供強(qiáng)大的搜尋引擎優(yōu)化 (SEO)。
• 縮短建造時間： Astro 的增量建造最大限度地縮短了建造時間，從而加快了開發(fā)週期。

透過利用Astro 的優(yōu)勢，您可以建立高效能、開發(fā)人員友善的登陸頁面，以捕捉潛在客戶並推動SaaS 的成長，同時節(jié)省寶貴的時間來專注於Remix/Next 應(yīng)用程式中的核心產(chǎn)品開發(fā)。

伺服器元件

想像一下您正在建造一棟房子。伺服器組件就像建築工人一樣處理繁重的專業(yè)任務(wù)。這些元件不是在內(nèi)部（瀏覽器）執(zhí)行所有操作，而是在外部伺服器上工作。

他們做什麼？

• 取得材料：從資料庫或API檢索數(shù)據(jù)，就像取磚來建造一堵牆。
• 進(jìn)行複雜的計算：執(zhí)行複雜的數(shù)學(xué)或邏輯運算，例如計算房間的面積。
• 保護(hù)您的家：他們處理安全任務(wù)，例如檢查某人是否有權(quán)進(jìn)入。

它們?yōu)槭颤N有用？

• 你的房子建造得更快：透過在伺服器上完成一些工作，你的網(wǎng)站對訪客的載入速度更快。
• T*您的家比較安全：* 敏感資料在較安全的地方處理，遠(yuǎn)離入侵者。
• 您可以專注於裝飾： 伺服器元件處理繁重的工作，因此您可以專注於讓您的網(wǎng)站看起來良好且效能良好。

伺服器功能

想像一下您的房子有一個對講系統(tǒng)。伺服器功能就像使用對講機(jī)要求屋外的工作人員做某事。

它們?nèi)绾芜\作？

• 你（你的 React 元件）告訴工作人員（伺服器功能）要做什麼，例如「請帶更多磚塊」。
• 工人完成任務(wù)並給你結(jié)果。

它們?yōu)槭颤N有用？

• 溝通非常容易：您不必?fù)?dān)心發(fā)送和接收訊息的技術(shù)細(xì)節(jié)。
• 您可以做很多事情：您可以要求伺服器函數(shù)執(zhí)行伺服器元件可以執(zhí)行的幾乎任何操作。

伺服器操作

想像一下，您有一個用於對講機(jī)的預(yù)先定義命令清單。伺服器操作就像那些命令。

這些是什麼？

• 這些是旨在執(zhí)行特定任務(wù)的伺服器功能，例如提交表單或更新資料庫。

它們?yōu)槭颤N有用？

• 它們易於使用：它們已經(jīng)配置為執(zhí)行特定的操作，因此您無需編寫大量程式碼。
• 有許多函式庫可以幫助您： 有像 next-safe-actions 和 zsa 這樣的函式庫，可以為您提供常見任務(wù)的預(yù)定義伺服器操作。

React 中的狀態(tài)管理

祖斯坦

Zustand 是一個輕量級且靈活的 React 應(yīng)用程式狀態(tài)管理函式庫。它提供了一個簡單直覺的 API 來管理全域和本地狀態(tài)，使其成為各種規(guī)模專案的絕佳選擇。

主要特點：

• 極簡 API： Zustand 具有簡潔且易於學(xué)習(xí)的 API，並且具有最少的樣板程式碼。
• 以效能為導(dǎo)向： Zustand 專為最佳效能而設(shè)計，具有高效的狀態(tài)更新和最小的開銷。
• 靈活：提供靈活且模組化的狀態(tài)管理方法，讓您可以根據(jù)需要建立和管理多個商店。
• 易於學(xué)習(xí)：簡單的 API 和清晰的文件使 Zustand 易於學(xué)習(xí)並整合到您的 React 專案中。

import create from "zustand";

const useStore = create((set) => ({
  count: 0,
  increment: () => set((state) => ({ count: state.count + 1 })),
}));

function Counter() {
  const count = useStore((state) => state.count);
  const increment = useStore((state) => state.increment);

  return <button onClick={increment}>Count: {count}</button>;
}

畏縮

Recoil.js 是 React 應(yīng)用程式的狀態(tài)管理庫，與 Context API 等傳統(tǒng)方法相比，它提供了更精細(xì)、更靈活的方法來管理共享狀態(tài)。它提供了獨特的資料流程圖，可讓您建立複雜的狀態(tài)結(jié)構(gòu)並從現(xiàn)有狀態(tài)派生新狀態(tài)。

關(guān)鍵概念：

• 原子：它們是《Recoil》中狀態(tài)的基本單位。原子是獨立的，可以被多個元件訂閱。它們提供了一種儲存和共享簡單值的方法。
• 選擇器：選擇器是從現(xiàn)有原子或其他選擇器衍生新狀態(tài)的純函數(shù)。它們允許您建立複雜的狀態(tài)結(jié)構(gòu)並即時執(zhí)行計算。
• RecoilRoot： 該元件是 Recoil 應(yīng)用程式的根。為所有 Recoil 原子和選擇器提供上下文。
• 訂閱： 元件訂閱原子或選擇器以在狀態(tài)變更時接收更新。 Recoil 使用高效的機(jī)制來確保元件僅在其依賴的資料實際發(fā)生變更時才重新渲染。

進(jìn)階功能：

• 非同步值： Recoil 支援非同步值，讓您從 API 取得資料並管理載入狀態(tài)。
• 持久化：您可以將 Recoil 狀態(tài)持久化到本機(jī)儲存或其他儲存機(jī)制，以便在後續(xù)頁面載入時恢復(fù)它。
• 時間旅行調(diào)試： Recoil 提供時間旅行調(diào)試工具，讓您檢查和回滾狀態(tài)變更。
• 自訂掛鉤：您可以建立自訂掛鉤來封裝複雜的狀態(tài)管理邏輯。

import create from "zustand";

const useStore = create((set) => ({
  count: 0,
  increment: () => set((state) => ({ count: state.count + 1 })),
}));

function Counter() {
  const count = useStore((state) => state.count);
  const increment = useStore((state) => state.increment);

  return <button onClick={increment}>Count: {count}</button>;
}

React 中的 CSS 樣式

順風(fēng) CSS

快速發(fā)展的革命性

雖然開發(fā)者社群對 Tailwind CSS 的看法各不相同，但我堅信它是目前快速產(chǎn)品開發(fā)和長期 CSS 維護(hù)最有效的解決方案。

根據(jù)我自己的經(jīng)驗和許多同事的回饋，Tailwind 提供了幾個關(guān)鍵優(yōu)勢：

• 快速原型設(shè)計： Tailwind 的實用程式優(yōu)先方法可讓開發(fā)人員快速建立 UI 元素並設(shè)計其樣式，而無需編寫自訂 CSS 類別。這顯著加快了原型設(shè)計和迭代過程。
• 一致的樣式： Tailwind 提供了一組預(yù)先定義的實用程式類，確保整個專案的樣式一致。這消除了不斷重新發(fā)明輪子的需要，並有助於維持有凝聚力的設(shè)計系統(tǒng)。
• 更好的開發(fā)人員體驗： Tailwind 在現(xiàn)代程式碼編輯器中直覺的語法和自動完成功能改善了開發(fā)人員體驗，使編寫和維護(hù) CSS 更快、更愉快。
• CSS 檔案大小減少： 透過利用預(yù)先定義的實用程式類，您通?？梢燥@著減小 CSS 檔案的整體大小，從而加快頁面載入時間並提高效能
。
• 強(qiáng)大的社區(qū)和生態(tài)系統(tǒng)： Tailwind 擁有一個龐大且活躍的社區(qū)，提供對廣泛文件、有用資源以及大量社區(qū)構(gòu)建的插件和擴(kuò)展的訪問。

根據(jù)我的經(jīng)驗，Tailwind 的初始學(xué)習(xí)曲線相對較小。大多數(shù)開發(fā)者在一周內(nèi)就可以熟練使用，並且在開發(fā)速度和可維護(hù)性方面的長期收益遠(yuǎn)遠(yuǎn)超過初始投資。

我鼓勵您嘗試 Tailwind。您可能會驚訝於它可以在多大程度上簡化您的 CSS 工作流程並提高您的工作效率。

在 React 中取得數(shù)據(jù)

React/Tanstack 查詢

對於大多數(shù)資料收集需求，我優(yōu)先考慮伺服器元件，因為它們固有的效能優(yōu)勢和改進(jìn)的資料安全性。透過處理伺服器上的資料加載，我可以最大限度地減少瀏覽器中執(zhí)行的 JavaScript 數(shù)量，從而加快初始頁面加載速度並提供更好的使用者體驗。

但是，對於更複雜的場景，例如無限滾動、分頁或即時資料更新，我利用了React的強(qiáng)大功能查詢。 React Query 提供了一個強(qiáng)大且靈活的解決方案來管理用戶端的資料擷取、快取和更新。

例子：

• 伺服器元件：非常適合取得產(chǎn)品頁面、使用者個人資料或部落格文章的初始資料。
• React Query： 非常適合在 feed 中實現(xiàn)無限滾動、管理表中的分頁資料或處理聊天應(yīng)用程式的即時更新。

透過策略性地組合伺服器元件和 React Query，我可以在 React 應(yīng)用程式中實現(xiàn)效能、可維護(hù)性和開發(fā)人員體驗之間的最佳平衡。

資料庫和 ORM

棱鏡

我的資料庫互動首選

Prisma ORM 仍然是我在 React 專案中與資料庫互動的首選。儘管像 Drizzle 這樣的新型 ORM 正在獲得關(guān)注，但 Prisma 已被證明是一個穩(wěn)定可靠的解決方案，擁有強(qiáng)大的社群和廣泛的文件。

Prisma 主要特點：

• 類型安全： Prisma 從您的資料庫架構(gòu)產(chǎn)生 TypeScript 類型，確保整個應(yīng)用程式的類型安全並降低執(zhí)行階段錯誤的風(fēng)險。

範(fàn)例：

import create from "zustand";

const useStore = create((set) => ({
  count: 0,
  increment: () => set((state) => ({ count: state.count + 1 })),
}));

function Counter() {
  const count = useStore((state) => state.count);
  const increment = useStore((state) => state.increment);

  return <button onClick={increment}>Count: {count}</button>;
}

為使用者和貼文產(chǎn)生的類型提供了明確的指導(dǎo)並防止意外的資料結(jié)構(gòu)。

• 聲明式架構(gòu)定義： 使用 Prisma 架構(gòu)語言（一種宣告式且直覺的語法）定義您的資料庫架構(gòu)。

範(fàn)例：

import create from "zustand";

const useStore = create((set) => ({
  count: 0,
  increment: () => set((state) => ({ count: state.count + 1 })),
}));

function Counter() {
  const count = useStore((state) => state.count);
  const increment = useStore((state) => state.increment);

  return <button onClick={increment}>Count: {count}</button>;
}

• 簡化查詢： Prisma 提供了流暢且直觀的查詢創(chuàng)建 API，讓您可以輕鬆地以最少的努力編寫複雜的資料庫查詢。
• 遷移： Prisma Migrate 透過易於使用的遷移系統(tǒng)簡化了資料庫架構(gòu)更改，使您能夠隨著時間的推移安全地發(fā)展資料庫。

使用棱鏡的好處

• 提高生產(chǎn)力： Prisma 透過自動執(zhí)行重複性任務(wù)（例如產(chǎn)生 SQL 查詢和管理資料庫架構(gòu)變更），顯著提高了開發(fā)人員的生產(chǎn)力。
• 提高程式碼品質(zhì)：類型安全、生成類型以及對最佳實踐的關(guān)注有助於提高程式碼品質(zhì)和減少錯誤。
• 提高可維護(hù)性：Prisma 的聲明式方法和清晰的模式定義使得隨著時間的推移更容易理解和維護(hù)資料庫互動。
• 強(qiáng)大的社區(qū)和生態(tài)系統(tǒng)： Prisma 擁有一個龐大且活躍的社區(qū)，提供廣泛的文檔、教程和支援資源。

雖然像 Drizzle 這樣的新 ORM 提供了有前途的功能，但 Prisma 的穩(wěn)定性、成熟的生態(tài)系統(tǒng)以及對開發(fā)人員體驗的高度關(guān)注使其成為我大多數(shù)專案的首選。

蘇帕貝斯

Supabase 是 Firebase 的開源替代品，提供全套後端服務(wù)，包括即時 PostgreSQL 資料庫、驗證、儲存和邊緣功能。它為開發(fā)人員提供了一種快速有效的方式來建立全端 Web 應(yīng)用程序，而無需管理基礎(chǔ)設(shè)施的麻煩。

Supabase 主要特色：

• 即時 PostgreSQL： Supabase 利用 PostgreSQL 強(qiáng)大的資料庫功能，讓您可以建立複雜的資料模型並執(zhí)行強(qiáng)大的查詢。即時功能可讓您建立具有即時更新的應(yīng)用程序，例如聊天應(yīng)用程式和儀表板。
• 身份驗證： Supabase 提供靈活的身份驗證系統(tǒng)，支援多種方法，例如電子郵件/密碼、社交登入和自訂身份驗證提供者。它還提供無密碼身份驗證和多重身份驗證等功能。
• 儲存： Supabase 包含檔案儲存服務(wù)，可讓您直接從應(yīng)用程式上傳和管理檔案。您可以為檔案產(chǎn)生公用 URL 並設(shè)定權(quán)限來控制存取。
• 邊緣功能：這些無伺服器功能可讓您在更靠近使用者的邊緣執(zhí)行自訂程式碼。這對於資料轉(zhuǎn)換、伺服器端渲染和自訂身份驗證邏輯等任務(wù)非常有用。
• GraphQL API：除了 REST API 之外，Supabase 還提供 GraphQL API，提供更靈活、更具表現(xiàn)力的資料查詢方式。

為什麼選擇蘇帕貝斯？

• 快速開發(fā)： Supabase 透過提供預(yù)先建置的後端服務(wù)來加速開發(fā)，讓您專注於建置應(yīng)用程式的前端。
• 可擴(kuò)充性： Supabase 建置在可擴(kuò)展的基礎(chǔ)設(shè)施之上，使其適合各種規(guī)模的應(yīng)用程式。
• 開源： 作為開源，Supabase 提供透明度、靈活性和強(qiáng)大的社群。
• 成本效益： Supabase 提供慷慨的免費套餐和靈活的定價計劃，使小型和大型項目都能負(fù)擔(dān)得起。

何時使用 Supabase

• 即時應(yīng)用程式： Supabase 非常適合需要即時更新的應(yīng)用程序，例如聊天應(yīng)用程式、協(xié)作工具和儀表板。
• 快速原型製作： Supabase 的易用性使其成為快速建立原型和 MVP 的絕佳選擇。
• 全端 Web 應(yīng)用程式： Supabase 可以用作簡單和複雜 Web 應(yīng)用程式的後端。

資料管理和驗證

打字稿

TypeScript 無疑是 JavaScript 專案的業(yè)界標(biāo)準(zhǔn)。其靜態(tài)類型系統(tǒng)與介面和模組等現(xiàn)代功能相結(jié)合，提供了許多好處，例如更高的類型安全性、更好的錯誤檢測、更高的生產(chǎn)力和更愉快的開發(fā)體驗。業(yè)界對 TypeScript 的採用證明了它的價值和有效性。

佐德

用於類型安全驗證的強(qiáng)大工具

Zod 已成為 React 專案中驗證的主要選擇，特別是與 TypeScript 結(jié)合使用時。透過利用 Zod 的類型安全方法，您可以顯著提高應(yīng)用程式的穩(wěn)健性和可維護(hù)性。

Zod 主要特點

• 型別安全驗證： Zod 利用 TypeScript 的型別系統(tǒng)來定義並強(qiáng)制執(zhí)行資料模式。這可確保您的應(yīng)用程式接收到的資料符合預(yù)期的結(jié)構(gòu)，防止意外錯誤並提高資料完整性。
• 聲明式模式： Zod 允許您使用簡潔且富有表現(xiàn)力的語法以聲明方式定義資料模式。這使得您可以輕鬆地為資料建立複雜的驗證規(guī)則。
• 錯誤處理： Zod 提供詳細(xì)且資訊豐富的錯誤訊息，可以輕鬆識別和修正驗證問題。這些錯誤訊息可以輕鬆整合到您的使用者介面中，為用戶提供有用的回饋。
• 可擴(kuò)充性： Zod 提供靈活且可擴(kuò)展的 API，讓您可以建立自訂驗證規(guī)則並將其與應(yīng)用程式的其他部分整合。

使用 Zod 的好處

• 提高程式碼品質(zhì)：透過強(qiáng)制執(zhí)行資料類型和驗證規(guī)則，Zod 可以幫助您編寫更強(qiáng)壯、更可靠的程式碼，同時減少意外錯誤。
• 改進(jìn)的開發(fā)人員體驗： Zod 的類型安全方法和資訊豐富的錯誤訊息使編寫、偵錯和維護(hù)程式碼變得更加容易，從而顯著改善了開發(fā)人員的體驗。
• 改善使用者體驗：透過向使用者提供清晰且有用的錯誤訊息，Zod 有助於改善應(yīng)用程式的整體使用者體驗。
• 降低維護(hù)成本：透過儘早檢測資料驗證問題，Zod 可以幫助降低與您的應(yīng)用程式相關(guān)的長期維護(hù)成本。

我的方法

雖然 Zod 提供了強(qiáng)大的客戶端驗證功能，但我更喜歡主要將其用於伺服器端驗證，特別是在伺服器操作中。這種方法可讓客戶端表單保持輕量級，並避免了許多第三方表單庫帶來的複雜性。透過依靠本機(jī) HTML 驗證進(jìn)行基本檢查，我可以維護(hù)精簡且高效的表單元件架構(gòu)。

測試和工具

類比服務(wù)人員 (MSW)

Mock Service Worker (MSW) 是一個極大改善了我的工作流程的工具。如果您還沒有使用它，讓我向您展示為什麼它值得您關(guān)注。

Mock Service Worker 是一個強(qiáng)大的用於 API 模擬的 JavaScript 函式庫。使用 Service Workers 在網(wǎng)路層級攔截請求，允許您直接在瀏覽器或 Node.js 執(zhí)行時模擬 API。這使得它非常適合測試、調(diào)試甚至開發(fā)，無需依賴後端。

為什麼我喜歡使用都市固體廢物

對我來說，MSW 解決了許多其他模擬庫無法解決的問題：

• 真實模擬： MSW 在網(wǎng)路層級攔截請求，因此模擬行為與真實伺服器幾乎沒有區(qū)別。這就像你的口袋裡有一個後端模擬器。
• 客戶端和伺服器測試：無論您是測試 React 應(yīng)用程式還是 Node.js 服務(wù)，MSW 在這兩種環(huán)境中都能完美運作。
• 減少依賴：您不需要額外的測試伺服器或複雜的模擬配置。 MSW 保持乾淨(jìng)簡單。
• 彈性：您可以模擬 REST API、GraphQL 甚至 WebSocket。如果您的應(yīng)用程式可以發(fā)出請求，MSW 可以模擬它。
• 更好的調(diào)試：透過清晰的日誌和偵錯工具，您可以準(zhǔn)確地知道哪些請求正在被模擬以及如何模擬。

城市生活垃圾對比傳統(tǒng)的模擬工具

根據(jù)我的經(jīng)驗，MSW 比 Axios 攔截器或自訂模擬等工具更脫穎而出：

• 可擴(kuò)展性：使用 MSW，您的模擬可以在應(yīng)用程式的邏輯之外運行，從而使它們可重複使用和可維護(hù)。
• 隔離：與攔截器不同，MSW 不會幹?jǐn)_您的應(yīng)用程式程式碼。這意味著測試後不會出現(xiàn)混亂的拆卸代碼。
• 類似瀏覽器的行為： MSW 使用 Service Workers 模仿瀏覽器級行為，確保您的測驗盡可能接近真實世界的條件。

為什麼你應(yīng)該嘗試都市固體廢棄物

API 是現(xiàn)代應(yīng)用程式的支柱，測試它們並不一定很痛苦。 MSW 提供了一種現(xiàn)實、靈活且對開發(fā)人員友好的方式來模擬 API，而不會產(chǎn)生不必要的複雜性。

無論您是在開發(fā)、調(diào)試還是測試，MSW 都是遊戲規(guī)則的改變者。這是我以前不知道需要的工具，但現(xiàn)在我離不開它。

如果您希望在 2025 年提升您的開發(fā)流程，請嘗試 MSW。您的團(tuán)隊會感謝您，您的程式碼也會大放異彩。

劇作家

談到 2025 年的現(xiàn)代 Web 測試，Playwright 已成為我的首選工具之一。它不僅僅是一個測試庫；它也是一個測試庫。對於想要精確度、速度和多功能性的前端開發(fā)人員來說，感覺就像是一個強(qiáng)大的工具。

Playwright 是一個用於瀏覽器自動化的 Node.js 函式庫。它由 Microsoft 創(chuàng)建，可讓您使用一致的 API 在所有主要瀏覽器（Chromium、Firefox、WebKit）中為 Web 應(yīng)用程式編寫端對端測試。這就像擁有一把用於瀏覽器測試的瑞士軍刀，優(yōu)雅、強(qiáng)大且易於開發(fā)人員使用。

劇作家為何脫穎而出

根據(jù)我的經(jīng)驗，劇作家很擅長：

• 多瀏覽器支援：與預(yù)設(shè)僅支援基於 Chromium 的瀏覽器的 Cypress 不同，Playwright 可讓您在 Chromium、Firefox 和 WebKit 中進(jìn)行測試。這使得確保您的應(yīng)用程式在不同環(huán)境中運作至關(guān)重要。
• 平行測試： Playwright 的內(nèi)建並行化改變了遊戲規(guī)則。測試運行得更快，保持 CI 管道順暢並提高開發(fā)人員的工作效率。
• Headless 和 Headed 模式：無論您是在 CI 中除錯還是執(zhí)行測試，Playwright 都能無縫適應(yīng)。
• 情境隔離： 使用 Playwright，您可以建立模仿不同使用者的隔離瀏覽器上下文。對於具有複雜身份驗證流程或多租戶場景的應(yīng)用程式來說，這是一個救星。
• API 測驗： Playwright 不會停留在 UI 上。您可以直接在測試腳本中進(jìn)行API調(diào)用，確保您的前端和後端協(xié)調(diào)工作。

讓我們來看一些程式碼

以下是如何在 TypeScript 中編寫 Playwright 測試的快速範(fàn)例。此測試檢查登入頁面：

import create from "zustand";

const useStore = create((set) => ({
  count: 0,
  increment: () => set((state) => ({ count: state.count + 1 })),
}));

function Counter() {
  const count = useStore((state) => state.count);
  const increment = useStore((state) => state.increment);

  return <button onClick={increment}>Count: {count}</button>;
}

到 2025 年，測試不再是可選的。使用者期望無縫的體驗，而自動化是提供這些體驗的方式。 Playwright 將強(qiáng)大功能與開發(fā)人員友好的功能相結(jié)合，使其成為必備工具。

如果您還沒有探索過，那麼現(xiàn)在是時候了。當(dāng)您的測試運行得更快、錯誤減少並且您的用戶感到高興時，未來的您將感謝您。

部署及住宿

Cloudflare（網(wǎng)域和 CDN）

Cloudflare 仍然是現(xiàn)代 Web 開發(fā)的基石。對我來說，它不僅僅是一項服務(wù)，它還是創(chuàng)建快速、安全和可擴(kuò)展應(yīng)用程式的一個組成部分。無論您是獨立開發(fā)人員還是大型團(tuán)隊的一員，Cloudflare 都有可以提升您的堆疊的工具。

什麼是 Cloudflare？

Cloudflare 是一套完整的 Web 效能和安全工具。它最初是一個內(nèi)容交付網(wǎng)路 (CDN)，但如今它的功能遠(yuǎn)不止於此。借助 Cloudflare，您可以優(yōu)化網(wǎng)站的效能，保護(hù)其免受惡意攻擊，甚至使用其強(qiáng)大的邊緣運算平臺來建立無伺服器應(yīng)用程式。

為什麼我信任 Cloudflare

以下是 Cloudflare 成為我的堆疊重要組成部分的主要原因：

• 速度無所不在： 憑藉其全球 CDN，Cloudflare 可確保您的應(yīng)用程式的靜態(tài)資產(chǎn)以閃電般的速度交付，無論您的用戶身在何處。它的快取是資產(chǎn)密集型應(yīng)用程式或全球受眾的救星。
• 無與倫比的安全性：Cloudflare 的 Web 應(yīng)用程式防火牆 (WAF) 和 DDoS 保護(hù)為我解決了無數(shù)麻煩。這就像擁有一個處於自動駕駛狀態(tài)的安全團(tuán)隊。
• 邊緣無伺服器運算：使用 Cloudflare Workers 改變了遊戲規(guī)則。它允許我在邊緣運行輕量級功能，減少延遲並卸載傳統(tǒng)伺服器的工作。
• 易於使用： 設(shè)定 Cloudflare 只需幾分鐘，但好處是巨大的。其直覺的儀表板和開發(fā)人員友好的工具使其可以輕鬆與任何堆疊整合。
• 成本效益： 就其提供的價值而言，Cloudflare 的定價是無與倫比的。即使它的免費套餐也包含一些功能，可以幫助您開始使用，而無需擔(dān)心成本。

創(chuàng)建現(xiàn)代應(yīng)用程式意味著提供快速、安全和可靠的體驗。 Cloudflare 讓您可以實現(xiàn)這一切，而無需使堆疊過於複雜。從無與倫比的 CDN 到創(chuàng)新的邊緣運算平臺，我會向所有希望在 2025 年確保其應(yīng)用程式面向未來的開發(fā)人員推薦這個工具。

如果您尚未探索 Cloudflare，現(xiàn)在是最佳時機(jī)。您的用戶會注意到差異，您也會注意到。

其他實用程式：

回覆電子郵件並重新發(fā)送

電子郵件傳送的強(qiáng)大組合

React Email 和 Resend 提供了一個引人注目的解決方案，可在您的 React 應(yīng)用程式中建立和發(fā)送高品質(zhì)的電子郵件。

• React Email： 這個函式庫可讓您直接在 React 元件中建立具有視覺吸引力和響應(yīng)式的電子郵件範(fàn)本。透過利用元件、狀態(tài)和 props 等熟悉的 React 概念，您可以建立動態(tài)、易於維護(hù)的電子郵件佈局。

• 重新傳送： 這個強(qiáng)大的電子郵件 API 提供了一種可靠且有效率的方式來傳送交易電子郵件，例如歡迎電子郵件、密碼重設(shè)和訂單確認(rèn)。 Resend 提供高交付能力、強(qiáng)大的分析以及與現(xiàn)有基礎(chǔ)設(shè)施輕鬆整合等功能。

主要優(yōu)點

• 更好的開發(fā)人員體驗： React Email 可讓您使用熟悉的 React 模式建立電子郵件模板，從而改善開發(fā)人員體驗，從而提高生產(chǎn)力和可維護(hù)性。
• 一致的品牌：透過在電子郵件範(fàn)本中使用 React 元件，您可以確保整個應(yīng)用程式（包括電子郵件）的品牌和樣式保持一致。
• 更好的送達(dá)率： Resend 強(qiáng)大的基礎(chǔ)設(shè)施和對送達(dá)率的關(guān)注有助於確保您的電子郵件可靠地到達(dá)預(yù)期收件人。
• 輕鬆整合： Resend 提供簡單的 API 和 SDK，可輕鬆與您的 React 應(yīng)用程式整合。

範(fàn)例：

import create from "zustand";

const useStore = create((set) => ({
  count: 0,
  increment: () => set((state) => ({ count: state.count + 1 })),
}));

function Counter() {
  const count = useStore((state) => state.count);
  const increment = useStore((state) => state.increment);

  return <button onClick={increment}>Count: {count}</button>;
}

import { atom, selector, useRecoilState, useRecoilValue } from "recoil";

// Atom for user data (fetched asynchronously)
const userDataAtom = atom({
  key: "userData",
  default: null,
  effects_UNSTABLE: [
    ({ setSelf }) => {
      // Fetch user data from API and set it
    },
  ],
});

// Selector to extract the user's name
const userNameSelector = selector({
  key: "userName",
  get: ({ get }) => {
    const userData = get(userDataAtom);
    return userData?.name || "Guest";
  },
});

function UserProfile() {
  const userName = useRecoilValue(userNameSelector);

  return <div>Hello, {userName}!</div>;
}

此範(fàn)例展示如何使用 React Email 建立簡單的歡迎電子郵件模板，然後使用 Resend API 發(fā)送它。

透過結(jié)合 React Email 和 Resend 的強(qiáng)大功能，您可以簡化電子郵件工作流程、提高電子郵件通訊品質(zhì)並改善整體使用者體驗。

條紋

Stripe 是一個強(qiáng)大且廣泛使用的支付網(wǎng)關(guān)，提供一整套用於接受線上付款的功能。

潛在的挑戰(zhàn)

• 複雜性：雖然功能強(qiáng)大，但 Stripe 廣泛的功能集可能會讓人不知所措，特別是對於較小的項目或付款要求較簡單的項目。
• 不斷發(fā)展的 API：Stripe 不斷推出新功能並更新其 API，這有時可能需要對您的整合進(jìn)行調(diào)整。

import create from "zustand";

const useStore = create((set) => ({
  count: 0,
  increment: () => set((state) => ({ count: state.count + 1 })),
}));

function Counter() {
  const count = useStore((state) => state.count);
  const increment = useStore((state) => state.increment);

  return <button onClick={increment}>Count: {count}</button>;
}

---

本質(zhì)上，這就是我今天為新的全端 React 專案選擇的技術(shù)堆疊。這只是一種可能的組合，最適合您的專案的技術(shù)堆疊最終將取決於您的特定要求和優(yōu)先順序。我鼓勵您探索這些技術(shù)並嘗試不同的組合，以找到最適合您的技術(shù)。

我希望這對您有所幫助和/或教您一些新東西！

@khriztianmoreno？

以上是技術(shù)堆疊5的詳細(xì)內(nèi)容。更多資訊請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！