隨著邊緣計算的普及，越來越多前端團(tuán)隊開始探索將頁面渲染部署到用戶更近的邊緣節(jié)點(diǎn)。而 Next.js + Edge SSR（邊緣服務(wù)端渲染），正逐步成為現(xiàn)代 Web 架構(gòu)的主流方案之一。

但開發(fā)者也會面臨新的挑戰(zhàn)：

• Edge SSR 有哪些特殊約束？

• 項目結(jié)構(gòu)是否需要調(diào)整？

• 如何組織代碼與配置，才能真正“邊緣友好”？

這篇文章將帶你從 目錄結(jié)構(gòu) → 渲染機(jī)制 → 部署配置，一步步搭建一個可擴(kuò)展的 Edge SSR 項目。

一 、什么是 Edge SSR？

Edge SSR（Edge Server-Side Rendering）是指在 CDN 邊緣節(jié)點(diǎn)實時執(zhí)行服務(wù)端渲染邏輯，并返回 HTML 的能力。

與傳統(tǒng) SSR 相比，它有兩個顯著優(yōu)勢：

• 離用戶更近： 渲染點(diǎn)分布在全球

• 啟動更快： 使用輕量運(yùn)行時（如 V8 isolates）

平臺支持情況：

平臺	是否支持 Edge SSR	示例
Vercel	? 支持，默認(rèn)配置即可啟用	middleware.ts, app router
Cloudflare Workers	? 支持	wrangler + pages functions
Netlify	? 支持 edge functions	自定義 edge handler

二、項目結(jié)構(gòu)推薦（基于 Next.js）

.
├── app/                        # 新 App Router 路由結(jié)構(gòu)（推薦）
│   ├── layout.tsx             # 頁面布局
│   └── page.tsx               # 頁面組件
├── middleware.ts              # 運(yùn)行在 Edge 的中間件
├── lib/                       # 工具函數(shù)、請求封裝
├── components/                # 通用 UI 組件
├── edge-functions/            # 自定義 edge 函數(shù)（可選）
├── vercel.json                # 配置 Edge SSR 入口
└── package.json

推薦啟用的特性

• App Router + app/ 目錄

• middleware.ts：路由級邏輯邊緣執(zhí)行

• fetch 配合 cache: 'force-cache' 與 revalidate tag

• dynamic = 'force-dynamic' 用于需要實時數(shù)據(jù)的頁面

三、 中間件配置（運(yùn)行在邊緣）

// middleware.ts
import { NextResponse } from 'next/server'export function middleware(request) {const token = request.cookies.get('token');if (!token) return NextResponse.redirect('/login');return NextResponse.next();
}

📍 注意：middleware 默認(rèn)部署在 Edge Runtime，不支持 Node APIs（如 fs、net 等）

四、頁面級別的渲染策略

靜態(tài)緩存頁面

export const revalidate = 3600;

→ 頁面會在 CDN 緩存，1 小時自動重建一次。?

強(qiáng)制動態(tài)渲染（Edge SSR）

export const dynamic = 'force-dynamic';

→ 每次請求都會由邊緣節(jié)點(diǎn)實時渲染，無緩存。

五、部署平臺配置（以 Vercel 為例）

vercel.json

{"rewrites": [{ "source": "/api/(.*)", "destination": "/api/$1" }],"functions": {"middleware.ts": {"runtime": "edge"}}
}

其他平臺如 Netlify、Cloudflare 也支持相似結(jié)構(gòu)，只需指定 Edge 環(huán)境運(yùn)行點(diǎn)即可。

六、常見誤區(qū)與調(diào)試建議

問題	說明	解決方法
fetch 無法緩存	沒有配置 cache: 'force-cache'	添加緩存策略或 revalidate tag
使用了不支持的 Node API	Edge 不支持 fs, crypto 等模塊	抽離邏輯或遷移到常規(guī)函數(shù)
中間件邏輯太重	執(zhí)行慢、冷啟動代價高	中間件僅做鑒權(quán)、跳轉(zhuǎn)等輕量操作

總結(jié)：邊緣時代，前端也寫“后端”了

你可能寫的是頁面組件，但運(yùn)行的地方已經(jīng)不是瀏覽器、也不是傳統(tǒng)后端，而是：

CDN 的邊緣節(jié)點(diǎn)。

最靠近用戶的地方。

真正全球加速的入口。

?