TopSpeed Group · 技術架構分析

topspeed-official 與 topspeed-media
技術架構對照

兩個專案共用同一套技術底盤（Laravel 12 + React 18 + Vite + Tailwind，相同的 CI/CD），但前後端的整合方式截然不同──這也是兩者最關鍵的差異所在。

一句話結論

底盤相同，差別在「整合模式」：official 是以 Blade 伺服器渲染為主、局部掛 React 的行銷網站（React Islands）；media 是整頁由 React 接管、有資料庫與後台的動態平台（Inertia.js）。共同基礎只說一次，差異處左右並列對照。

共同基礎（兩者一致）

這層在兩個專案幾乎一模一樣，所以只呈現一次。下方再針對差異處分開比較。

後端框架Laravel 12 / PHP 8.2+

前端React 18.3 + TypeScript

建置工具Vite + laravel-vite-plugin

樣式Tailwind CSS

輪播元件Swiper

本機環境WAMP / Apache

CI/CDGitHub Actions → SSH

部署環境dev / production 雙環境

部署通知Discord Webhook

架構型態單一 Monorepo 前後端同庫

前後端關係（核心差異）

同樣是 Laravel 回傳頁面，但「React 介入的程度」完全不同──這決定了整個架構的走向。沿著箭頭看一次請求的流程。

topspeed-official 官方行銷網站（超跑車險）

React Islands · Blade SSR 為主

使用者瀏覽器 GET /aboutus傳統整頁導覽，每頁一次請求

▼HTTP 請求

Laravel 12 — 伺服器渲染 PageController → Blade 模板直接吐出完整 HTML；內容多來自 config/cases.php 靜態陣列

▼回傳完整 HTML（內嵌 data-react 容器）

瀏覽器載入 Vite bundle app.tsx 只在標記區塊掛上互動「島嶼」HeroSlider · FloatingActions · CaseFinder，其餘維持靜態

▼

資料層以靜態內容為主

config 靜態陣列

無資料庫 · 無對外 API · 無登入機制

topspeed-media 內容創作者 / 網紅經營平台

Inertia.js · 整頁 React 應用

使用者瀏覽器 GET /activity之後導覽由前端接管（類 SPA 體驗）

▼HTTP 請求

Laravel 12 — 伺服器驅動路由 → Inertia::render('Activity', props)回傳「元件名 + JSON props」，而非整頁 HTML

▼Inertia 回應

React SPA（TypeScript）整頁由 React 接管、客戶端 hydration表單 POST /api/public/contact-form → 後端服務

▼REST · 第三方整合

後端服務與資料層 PublicController → 通知，MySQL 儲存

MySQL + EloquentSanctum 登入GCS 儲存稽核 / 佇列

逐項對照

綠色標示為兩者「相同」之處；其餘為差異。

面向	topspeed-official	topspeed-media
定位	官方行銷網站（超跑車險）	內容創作者 / 網紅經營平台
前後端整合	React Islands（Blade SSR + 局部互動）	Inertia.js（整頁 React，伺服器驅動）
後端框架	Laravel 12 / PHP 8.2	Laravel 12 / PHP 8.2
前端	React 18 + TS（局部掛載）	React 18 + TS（整頁應用）
樣式	Tailwind + 自訂 CSS	Tailwind + PostCSS
資料庫	無資料庫（內容為靜態）	MySQL + Eloquent ORM
對外 API	無	REST（聯絡表單等）
登入驗證	無	Session + Sanctum（後台 Admin）
第三方整合	—	GCS · 稽核 · Excel
背景作業	—	PM2 佇列 worker
部署	GitHub Actions → SSH（dev/prod）	GitHub Actions → SSH + PM2
整體複雜度	輕量，以靜態頁面為主	少量後台與資料庫資料渲染

兩者相同（共同底盤） official 特性 media 特性