大家都在嘲笑 Next.js 14

上周 Next.js 14 发布了,该版本相较于 13,没有任何 API 变更,主要更新点是 Turbopack 带来了大幅的性能提升以及 Server Actions 功能进入稳定版本。

Next.js 14 带来了三个主要新功能

  • Turbopack:在 app router 和 page router 中通过了 5,000 个测试

    • 本地启动服务器时间快了约 50%
    • 热模块替换速度快了约 94%

然而并不是所有的测试都通过了,当前只通过了 90% 的测试,所以 Turbopack 还不稳定。

  • 第二点 Server Actions 被标记为稳定。
    • 集成了缓存和重新验证
    • 简单的函数调用,与表单原生配合使用
  • 第三点 部分预渲染(预览):快速的初始静态响应 + 流式动态内容

其中第二点在 Twitter 中引起了巨大讨论,也就是下面这张图,

大家都在拿这张图开玩笑,甚至出现了 "use electronics"。

这种写法好像仿佛回到了 PHP 时代,前端后代码写在一个文件里,它非常容易理解,但是很多人在质疑代码的安全问题,Sql 没有使用占位符,它是否会受到SQL 注入攻击

那么我们来分析下,上面幻灯片中的代码是否存在安全问题, 最主要是下面这句。

js 复制代码
await sql`INSERT INTO Bookmarks (slug) VALUES (${slug})`

SQL 注入攻击

首先来看下 Sql 是如何注入攻击的。

比如,我们需要通过 Url 获得当前用户的 id,查询该用户的信息,使用以下代码来实现。

一旦用户知道了程序的漏洞,使用以下 url 来访问,那么我们的程序将瞬间被摧毁。

这是一个有效的 SQL 命令,查询的同时将删除所有用户。

数据库在这种情况下执行,它会变成两个 sql 查询:

第一个 sql select 语句,它实际上不做任何事情;

第二个 sql 会删除你的整个 Users 数据库;

这就是 sql 注入,因此,直接拼接的 sql,不经过处理,是不安全的。

安全的查询方法是需要使用参数化查询, 如下:

userId 会替换 sql 中的$1,这样 sql 执行就安全了。

标签模板

我们再看上面幻灯片中的 sql 语句,与上面两种操作数据不同的是他使用的是 ES6 中的 标签模板

js 复制代码
await sql`INSERT INTO Bookmarks (slug) VALUES (${slug})`

标签模板其实不是模板字符串,而是函数调用的一种特殊形式。"标签"指的就是函数,紧跟在后面的模板字符串就是它的参数。

js 复制代码
tag`hello`
// 等同于
tag(['hello'])

因此在标签模版之前需要先定义函数

js 复制代码
function tag(stringArr, ...values){
  // ...
}

tag 函数的第一个参数是模版字符串,它是一个数组,后面的参数为模版中传入的值,也就是上面的sql 是一个函数,执行代码等同于

js 复制代码
await sql(['INSERT INTO Bookmarks (slug) VALUES (',')'], slug)

因此幻灯片中的查询语句并不会直接在数据库上执行,而是经过了 sql 这个函数的封装,调用数据库的查询语言都在 sql 内部实现,它没有 sql 注入的风险。

小结

Next.js 14.0 加快了启动服务器时间和模块热替换,分别提速 50%和 94%,引入了部分预渲染,允许定义一个静态 HTML 壳,然后可以用<Suspense />流式传输动态内容; Server Actions 虽然引起了争议,那也只是大家工作之余的调侃,相比原先必须先写一个接口,再调接口,但对开发者来说是极大地简化了开发成本,可以直接请求数据库拿数据,对前端来说,真的太方便了。

那么,你认为呢? 以上就是本文全部内容,希望这篇文章对大家有所帮助,也可以参考我往期的文章或者在评论区交流你的想法和心得,欢迎一起探索前端。

相关推荐
西瓜_号码2 小时前
React中Redux基础和路由介绍
javascript·react.js·ecmascript
伟笑4 小时前
React 的常用钩子函数在Vue中是如何设计体现出来的。
前端·react.js
FogLetter4 小时前
React组件开发进阶:本地存储与自定义Hooks的艺术
前端·javascript·react.js
AliciaIr7 小时前
深入React事件机制:解密“合成事件”与“事件委托”的底层奥秘
javascript·react.js
心.c9 小时前
后台管理系统-权限管理
javascript·react.js·github
杨进军9 小时前
实现 React 函数组件渲染
前端·react.js·前端框架
归于尽9 小时前
被 50px 到 200px 的闪烁整破防了?useLayoutEffect 和 useEffect 的区别原来在这
前端·react.js
杨进军9 小时前
实现 React Fragment 节点渲染
前端·react.js·前端框架
杨进军9 小时前
实现 React 类组件渲染
前端·react.js·前端框架
FogLetter9 小时前
React组件开发之Todos基础:从零打造一个优雅的待办事项应用
前端·javascript·react.js