Bad points of Next.js 14

Last week, Next.js 14 was released. Compared with 13, this version has no API changes. The main update is that Turbopack brings significant performance improvements and the Server Actions function enters the stable version.

Next.js 14 brings three major new features

Turbopack: 5,000 tests passed in app router and page router
Local server startup time is about 50% faster
Hot module replacement is about 94% faster

However, not all tests have passed, currently only 90% of the tests have passed, so Turbopack is not stable yet.

Second point Server Actions are marked as stable.
Integrated caching and revalidation
Simple function calls, natively used with forms
Third point Partial pre-rendering (preview): fast initial static response + streaming dynamic content

The second point caused a huge discussion on Twitter, which is the picture below,

Everyone is making fun of this picture, and even "use electronics" appeared.

This writing method seems to have returned to the PHP era. The front-end and back-end codes are written in one file. It is very easy to understand, but many people are questioning the security of the code. Sql does not use placeholders. Will it be attacked by SQL injection?

Then let's analyze whether the code in the above slide has security issues, The most important thing is the following sentence.

await sql`INSERT INTO Bookmarks (slug) VALUES (${slug})`

SQL injection attack

First, let's take a look at how SQL injection attacks are performed.

For example, we need to obtain the current user's id through the URL and query the user's information. Use the following code to achieve this.

Once the user knows the vulnerability of the program and uses the following url to access it, our program will be destroyed instantly.

This is a valid SQL command, and all users will be deleted while querying.

When the database is executed in this case, it will become two sql queries:

The first sql select statement does not actually do anything;

The second sql will delete your entire Users database;

This is sql injection, so directly splicing sql without processing is unsafe.

A safe query method requires the use of parameterized queries, as follows:

userId will replace $1 in sql, so that sql execution is safe.

Tag template

Let's look at the sql statement in the slide above. The difference from the above two data operations is that it uses the tag template in ES6

await sql`INSERT INTO Bookmarks (slug) VALUES (${slug})`

A tag template is not a template string, but a special form of function call. "Tag" refers to the function, and the template string following it is its parameter.

tag`hello`
// is equivalent to
tag(['hello'])

Therefore, you need to define the function before the tag template

function tag(stringArr, ...values) {
// ...
}

The first parameter of the tag function is the template string, which is an array, and the following parameters are the values passed in the template, that is, the above sql is a function, and the execution code is equivalent to

await sql(['INSERT INTO Bookmarks (slug) VALUES (', ')'], slug)

Therefore, the query statements in the slides will not be executed directly on the database, but will be encapsulated by the sql function. The query language for calling the database is implemented inside sql, and there is no risk of sql injection.

Summary

Next.js 14.0 speeds up server startup time and module hot replacement by 50% and 94% respectively, introduces partial pre-rendering, allows definition of a static HTML shell, and then uses <Suspense /> to stream dynamic content; Server Actions has caused controversy, but that is just a joke after work. Compared with the original need to write an interface first and then call the interface, it greatly simplifies the development cost for developers, and can directly request the database to get data, which is really convenient for the front end.

So, what do you think? The above is the full content of this article. I hope this article is helpful to everyone. You can also refer to my previous articles or exchange your ideas and experiences in the comment area. Welcome to explore the front end together.

SQL injection attack

Tag template

Summary

Reference