前端出大事儿了

2023-11-02 09:41 由风的姿态发表于 #前端开发

公众号「古时的风筝」，专注于后端技术，尤其是 Java 及周边生态。

个人博客：www.moonkite.cn

大家好，我是风筝

最近这两天，在前端圈最火的图片莫过于下面这张了。

这是一段 React 代码，就算你完全没用过 React 也没关系，一眼看过去就能看到其中最敏感的一句代码，就是那句 SQL 。
咱们把这端代码简化一下，大概就是下面这个样子。

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

意思就是在页面上点击一个叫做「提交」的按钮，触发一个 formAction(提交表单)的动作。这有点看到了当年 JSP 和 PHP 的味道了。这还不是最神奇的，最厉害的是提交表单要执行的动作不是一个接口请求，而是直接执行一条 SQL 。使用 use server标签，标示这是一个服务端端执行的方法。

一时间竟分不出这到底是前端还是后端了。

这么发展下去，React 就是妥妥的全栈语言了。此时的 PHP 在旁边笑而不语，还说我不是世界上最好的语言，你们终究还是会活成我的样子。

自从前后端分离以来，前端框架可谓是百花齐放，一片繁荣。最早的是 Angular，然后就是 React 和 Vue，到现在基本都是 Vue 和 React 的天下了。

如果你用过原生的 JavaScript 或者 JQuery，那就能感受到 React 或者 Vue 的出现，完全改变了前端的开发方式。

React 目前的最新版本是 18，支持 ES（ECMAScript）和TS（TypeScript），除了画界面和写CSS之外，完全可以把它当做一个面向对象的语言工具使用。

这次支持执行执行后端 SQL 的特性是 Next.js 开放的，Next.js 是在React 框架上再次高度封装的一个框架。有点像 Spring Boot与 Spring 的关系，Spring 好比是 React，Spring Boot 就是 Next.js。

本来好好的前端，为什么要直接支持写 SQL 呢，这也并不是无迹可寻的。前两年，React 就推出了React Server Components 。大致的意思就是说这是一种服务器端组件，为了提高性能，由服务器直接渲染，渲染出来的结果通过元数据的形式发给前端 React，React 拿到元数据后与现有的 UI 树合并，最终由浏览器渲染。

React 官方是大力推荐 Next.js 的，有了官方推荐加上本身已经支持的服务器端组件，Next.js 不知道是出于什么样的目的，竟然直接支持执行服务端方法了。之前要通过 HTTP 请求，现在直接就跳过这一步了。

说实话，站在一个前端框架的视角上，加上我本身是一个后端开发，我是有一点看不懂这个操作了。服务端组件还能理解，毕竟开发效率和性能要兼顾，这无可厚非。

但是直接支持服务端执行，是技术的轮回（照着PHP的方向）还是技术的变革呢，此时的 Next.js 就像是一个站在十字路口的汽车，油都加满了，就看各位开发者驾驶员开着它往哪边走了。

反正依我看来，我是觉得前端框架越简单越好。原因很简单，搞这么复杂，我都快不会用了。