公眾號「古時的風箏」，專注于后端技術，尤其是 Java 及周邊生態。

個人博客：

大家好，我是風箏

最近這兩天，在前端圈最火的圖片莫過于下面這張了。

這是一段 React 代碼，就算你完全沒用過 React 也沒關系，一眼看過去就能看到其中最敏感的一句代碼，就是那句 SQL 。
咱(zan)們把這端代碼簡化一下，大概就(jiu)是下面(mian)這個樣子。

<button formAction={ async() => (
	"use server"
	await sql`INSERT INTO Bookmarks (slug) VALUES (${slug});`;
)}>
提交
</button>

意思就是在頁面上點擊一個叫做「提交」的按鈕，觸發一個 formAction(提交表單)的動作。這有點看到了當年 JSP 和 PHP 的味道了。這還不是最神奇的，最厲害的是提交表單要執行的動作不是一個接口請求，而是直接執行一條 SQL 。使用 use server標簽，標示這是(shi)一個服(fu)務端端執行的方法(fa)。

一時間竟(jing)分(fen)不出這到底是前端(duan)還是后端(duan)了。

這么發展下去，React 就是妥(tuo)妥(tuo)的(de)全棧語言了。此時的(de) PHP 在旁邊笑而不語，還說(shuo)我(wo)不是世界上(shang)最好的(de)語言，你們(men)終究(jiu)還是會(hui)活成我(wo)的(de)樣子。

自從前(qian)后端(duan)分離(li)以來，前(qian)端(duan)框架可謂是百花(hua)齊放，一(yi)片繁榮。最(zui)早的是 Angular，然后就(jiu)是 React 和 Vue，到(dao)現(xian)在(zai)基本都是 Vue 和 React 的天下了。

如果你用過原生的 JavaScript 或者 JQuery，那就能感(gan)受到(dao) React 或者 Vue 的出現，完全改變了前端的開發方式。

React 目(mu)前的最新版(ban)本(ben)是(shi) 18，支持(chi) ES（ECMAScript） 和TS（TypeScript），除了(le)畫界面和寫CSS之外，完全可以把它(ta)當(dang)做一個(ge)面向對象的語言工具使用。

這(zhe)次支持執行(xing)(xing)執行(xing)(xing)后(hou)端(duan) SQL 的(de)特性是 Next.js 開放(fang)的(de)，Next.js 是 在React 框架上再次高度封裝(zhuang)的(de)一(yi)個框架。有點(dian)像 Spring Boot與 Spring 的(de)關系，Spring 好比是 React，Spring Boot 就是 Next.js。

本來好好的(de)前端(duan)(duan)，為什么要直(zhi)接支(zhi)持寫 SQL 呢，這也并不是無跡可尋的(de)。前兩年，React 就推(tui)出(chu)(chu)了React Server Components 。大致的(de)意思就是說這是一種服(fu)務(wu)器端(duan)(duan)組件，為了提高(gao)性(xing)能，由服(fu)務(wu)器直(zhi)接渲染，渲染出(chu)(chu)來的(de)結(jie)果通過元(yuan)數據(ju)的(de)形式(shi)發給前端(duan)(duan) React，React 拿到元(yuan)數據(ju)后(hou)與現有(you)的(de) UI 樹合(he)并，最終由瀏覽器渲染。

React 官方是(shi)大力推(tui)薦 Next.js 的(de)(de)，有了官方推(tui)薦加上(shang)本身已經支(zhi)持(chi)的(de)(de)服務器端組(zu)件(jian)，Next.js 不知道是(shi)出于(yu)什(shen)么樣的(de)(de)目(mu)的(de)(de)，竟(jing)然(ran)直接支(zhi)持(chi)執行服務端方法了。之前要通(tong)過 HTTP 請(qing)求，現在直接就(jiu)跳過這一(yi)步了。

說實話，站在(zai)一個前端(duan)框架的(de)視角上，加上我(wo)本身是一個后端(duan)開(kai)發，我(wo)是有一點(dian)看(kan)不懂(dong)這個操作(zuo)了。服務(wu)端(duan)組件還能理解，畢竟開(kai)發效(xiao)率和性能要兼顧，這無可(ke)厚(hou)非。

但(dan)是(shi)(shi)直接支(zhi)持服(fu)務端執行，是(shi)(shi)技(ji)術(shu)的輪回（照著(zhu)PHP的方向）還是(shi)(shi)技(ji)術(shu)的變(bian)革呢，此(ci)時的 Next.js 就像是(shi)(shi)一(yi)個站(zhan)在十字路口的汽車，油(you)都加滿了(le)，就看各位開(kai)(kai)發者駕(jia)駛員開(kai)(kai)著(zhu)它往哪(na)邊(bian)走(zou)了(le)。

反正依我看(kan)來，我是(shi)覺得前端框架越(yue)簡單越(yue)好。原因(yin)很(hen)簡單，搞這么復雜，我都快(kuai)不會用了。

不(bu)光是(shi)我看不(bu)懂，畢竟咱是(shi)個后端外行，不(bu)是(shi)專業(ye)的。但是(shi)前端同學也(ye)是(shi)一片(pian)調(diao)侃，調(diao)侃的大致意思就是(shi) React Next.js 啥都能(neng)干，既然連后端都能(neng)整(zheng)了，那其他(ta)的也(ye)能(neng)全棧(zhan)了。

比如有人調侃給 Next.js 賦能 AI，使用 use ai，直接(jie) prompt 編(bian)程了。

還有賦能 k8s 的

以及賦(fu)能二進制編程的

最厲害的(de)，還有賦能刪(shan)庫跑路的(de)。

調侃(kan)歸(gui)調侃(kan)，既然口子已經開(kai)了，就會有過來吃螃(pang)蟹的人(ren)，至于之后會變成什么(me)樣子，只(zhi)能拭目(mu)以待了。

推薦閱讀