Understand Server actions in NextJS 14

Server actions in NextJS is very powerful feature introduces by the Vercel. Server Actions are asynchronous functions that are executed on the server. They can be used in Server and Client Components to handle form submissions and data mutations in Next.js applications.

What are Server Actions in NextJS 14?

Server Actions in nextJS 14 are asynchronous functions introduced in Next.js 14 that are specifically executed on the server-side. They offer a powerful and convenient way to handle various tasks, including:

• Data mutations: Updating or modifying data on your server (e.g., creating, editing, or deleting database entries).
• Form submissions: Handling form submissions securely and efficiently, keeping sensitive user data off the client.
• Server-side logic: Performing complex logic or calculations that are not well-suited for the client-side due to security, efficiency, or architectural reasons.

Key Benefits of Server Actions:

• Improved Security: Sensitive data (like passwords or payment information) never leaves the server, preventing potential client-side vulnerabilities like cross-site scripting (XSS).
• Enhanced Performance: By offloading critical tasks to the server, you can potentially reduce client-side workload and improve user experience, especially on slower devices.
• Simplified Data Fetching: Server Actions streamline the process of fetching and updating data, providing a more unified approach compared to traditional client-side fetching methods.
• Progressive Enhancement: Server Actions ensure that your application functions even without JavaScript enabled, improving accessibility and compatibility.

Creating and Using Server Actions:

Define the Server Action:

• Create an asynchronous function within a page, layout, or API route component.
• Annotate the function with the server.actions decorator.
• The function signature takes an optional event.req argument, providing access to the incoming request object.

import { server } from '@next/server';

export default function MyComponent() {
  const handleSubmit = async (event) => {
    event.preventDefault();

    const data = await server.actions.submitData(event.req, {
      name: event.target.name.value,
      email: event.target.email.value,
    });

    console.log('Data submitted successfully:', data);
  };

  return (
    <form onSubmit={handleSubmit}>
      {/* Form fields */}
      <button type="submit">Submit</button>
    </form>
  );
}

// Server Action definition
export const server = {
  actions: {
    async submitData(req, { name, email }) {
      // Perform server-side operations (e.g., database interaction)
      // ...

      return { success: true, message: 'Data submitted successfully' };
    },
  },
};

Calling the Server Action:

• You can call Server Actions from various components (pages, layouts, even client-side components) using the server.actions() function.
• Pass any necessary data as arguments to the Server Action.
• The Server Action’s return value can be used to update the UI or handle further logic.

// In a client-side component
import { server } from '@next/server';

const MyClientComponent = () => {
  const handleClick = async () => {
    const response = await server.actions.fetchData();
    console.log('Fetched data:', response);
  };

  return (
    <button onClick={handleClick}>Fetch Data</button>
  );
};

Additional Considerations:

• Error Handling: Implement proper error handling mechanisms within your Server Actions to gracefully handle unexpected situations and provide informative feedback to the user.
• Authentication: Consider implementing authentication strategies if your Server Actions involve user-specific data or require access control.
• Testing: Thoroughly test your Server Actions to ensure they function as expected and handle edge cases properly.

Behavior

Server actions can be invoked using the action attribute in a form element

• Server Components support progressive enhancement by default, meaning the form will be submitted even if JavaScript hasn’t loaded yet or is disabled.
• In Client Components, forms invoking Server Actions will queue submissions if JavaScript isn’t loaded yet, prioritizing client hydration.
• After hydration, the browser does not refresh on form submission.

Server Actions are not limited to <form> and can be invoked from event handlers, useEffect, third-party libraries, and other form elements like <button>.

Server Actions integrate with the Next.js caching and revalidation architecture. When an action is invoked, Next.js can return both the updated UI and new data in a single server roundtrip.

Behind the scenes, actions use the POST method, and only this HTTP method can invoke them.

The arguments and return value of Server Actions must be serializable by React. See the React docs for a list of serializable arguments and values.

Server Actions are functions. This means they can be reused anywhere in your application.

Server Actions inherit the runtime from the page or layout they are used on.

Server Actions inherit the Route Segment Config from the page or layout they are used on, including fields like maxDuration.

Conclusion:

Server Actions offer a valuable toolkit for Next.js developers, enabling secure, efficient, and streamlined handling of data mutations, form submissions, and server-side logic in your applications. By leveraging the benefits of server-side execution, you can enhance the security, performance, and overall user experience of your Next.js projects.