So just when Vercel introduced Next.js 14 in Next.js Conf 2023, many have been criticizing it with multiple arguments. We will go through each of those arguments and see how valid are those arguments.
Before seeing those arguments. Let's have an introduction about Next.js
Next.js is a Fullstack React.js modern framework developed by Vercel. With Next.js we can build both frontend and backend in the same project using the same language and the same set of tools. It combines client-side and server-side rendering, optimizing performance and user experience.
It has features like in-built Routing system which allows us to use routing without having to user external libraries like React-Router. It offers other features like Server Side Rendering(SSR), Static Site Generation(SSG), Image Optimization and Automatic Code Splitting. Next.js has gained widespread adoption and a strong developer community.
Ok, now let's look at the arguments against Next.js server actions.
1. Next.js is PHP
Looking at the server action code shown in the Next.js Conference, some criticized it saying that Next.js is PHP. But this is not a valid argument.
Next.js and PHP are fundamentally different. PHP runs entirely on the backend while Next.js offers full power of frontend and backend development. Next.js is a modern JavaScript framework for building client-side web applications with server-side rendering capabilities, while PHP is a server-side scripting language traditionally used for generating dynamic server-rendered content.
2. This code is vulnerable to SQL Injection attacks
A SQL injection (SQLi) attack is a type of cyberattack that occurs when an attacker manipulates or injects malicious SQL code into a database query.
The primary goal of an SQL injection attack is to exploit poorly sanitized user inputs that are directly incorporated into SQL queries without proper validation or escaping.
We can prevent the SQL Injection using parameterized SQL statements like the following code.
INSERT INTO Bookmarks Values (@slug)
With this technique, the hacker cannot change the SQL statement, because it is fixed. So, the argument that this code is vulnerable to SQL Injection attacks is invalid.
3. This code violates the Separation of Concerns principle.
Separation of Concerns (SoC) is a design principle in software engineering that advocates breaking a software system into distinct, well-defined modules or components, each of which addresses a specific and separate concern.
The primary objective of SoC is to enhance the maintainability, scalability, and readability of software systems by reducing complexity and enabling more straightforward troubleshooting and development.
Yes, the code shown in the conf slide does violate the separation of concerns. But I believe it is just to show the server actions code with little code as possible. We can just take out the code inside the formAction={} and put it in a separate function. In this way, we can just call that function inside the formAction={() => addBookmark(slug)} or we can put the server related code in a separate module.
The separation of concerns doesn't dictate how we should separate concerns.
"Software engineering is not black and white" - Mosh Hamedani
In conclusion, the arguments against the Next.js server actions are not so strong. Next.js is gaining good traction with its advanced features and developer experience. With this, I do not mean that it is perfect and free from criticisms but it is a powerful tool for building modern web applications.
Credits - Mosh Hamedani
Top comments (1)
The server action will have the same result as passing parameters to a restapi and receiving the query results. It will not affect security.
The code example is written as an inline function, and as mentioned in the text, it is not parameterized.
This makes it look like PHP and vulnerable to SQL injection.