Server Actions: NextJS 13.4’s Best New Feature
NextJS 13.4, the latest version of the popular React framework, has introduced an exciting new feature called Server Actions. This feature has been highly anticipated by the NextJS community and is set to revolutionize the way we handle server-side rendering.
What are Server Actions?
Server Actions allow developers to define custom server-side processes that can be executed during the server rendering phase. This means that instead of waiting for the client-side JavaScript to load and execute before rendering, NextJS can now perform certain actions on the server itself.
By leveraging Server Actions, developers can improve performance and enhance the user experience by reducing the time it takes to render a page. Previously, developers had to wait for JavaScript to load on the browser before rendering content, leading to slower page load times. With Server Actions, the server can perform tasks in parallel, saving precious milliseconds and improving overall performance.
How do Server Actions work?
Server Actions are defined as asynchronous functions called getServerActions that return a Promise. These functions are executed during the server-side rendering phase, allowing you to fetch data, make API calls, or perform any other server-related task.
Inside the getServerActions function, you have access to both server-side specific APIs and the NextJS context. This gives you the flexibility to fetch data from external sources, read from databases, or even do computations on the server.
When a page is requested, NextJS will pre-render the page and execute the getServerActions function on the server. Once the Server Actions are resolved, the result is transferred to the client and integrated seamlessly with the client-side rendering process. This ensures a smooth transfer of data and a consistent rendering experience for the user.
Why are Server Actions so important?
Server Actions open up a world of possibilities for NextJS developers. They allow for more complex preprocessing on the server, enabling advanced content rendering and dynamic data fetching. This feature greatly improves the performance of data-intensive applications by reducing latency and alleviating unnecessary API calls.
Developers can leverage Server Actions to fetch data from various sources, such as APIs or databases, and include that data directly in the HTML response. This reduces the need for additional API requests from the client, resulting in faster page render times. It also enables instant rendering of data-driven components, making the user interface feel snappier and more responsive.
Furthermore, Server Actions pave the way for better server-side caching and enhanced SEO optimization. By precomputing and caching data on the server, NextJS can deliver consistent and reliable content to search engines, improving search rankings and visibility.
Conclusion
Server Actions in NextJS 13.4 offer a powerful new toolset for developers to optimize server-side rendering and enhance performance. The ability to execute custom server processes during the rendering phase opens up a world of possibilities for data-intensive applications. Improved content rendering, reduced latency, and enhanced SEO optimization are just a few benefits of Server Actions.
If you’re a NextJS developer, make sure to explore this exciting new feature and leverage it in your projects. With Server Actions, you can take your server-side rendering to the next level and deliver blazing-fast and dynamic web experiences to your users.
tanks please git hub?
how do you clean the input values after submitting the action?
I'm having 2008 flashbacks. Next is becoming exactly what all the old MVC frameworks were. I'd advise everyone to look at why we moved away from them.
great video, really thankyou
I really appreciate your videos thanks a lot
I just have one question regarding using server action with a form, how can i show an err message on client in case an err occurred in the server action
Is it possible to use an abort controller with server actions? With a search form, if I debounce the input but send the request automatically on keyup, I'd like to abort any inflight requests to avoid race conditions. Is that possible?
"Let's re-enabled javascript, because we are not crazy." Lol Love it.
how would this work on vercel?
I assume these are serverless.
So you would get different todo lists?
Can you please do a video on PWA with next.js 13.4
In my opinion one of the most difficult things about nextjs 13 (app router) is figuring out when to utilize the vast number of different features offered (am I alone here?). Please consider doing a project in which you explain why you are making certain choices about when to use which features. There's not a ton of information yet about best practices in real world scenarios so it would be wonderful to see how someone like yourself approaches these choices.
Getting data:
1. Load and display it in a server component using plain typescript/javascript
2. Load it in a server component and display it in a client component by passing serialized data through props (maybe because you need to be able to click on the items)
3. Fetch the data in a client component using server actions
4. Fetch the data in a client component using "fetch"
5. Use a state management system like redux and handle data fetching through the store
Submitting data:
1. using server actions in a client component
2. using "fetch" to submit the form
Server/client component patterns
1. Keep client components at the leaves of your tree (then there is no way to have your server components know about the state of your client components without having them manipulate the url or using a global state manager)
2. Nest server components inside your client components (you cannot pass props to the children so your server components still can't know about the clients state)(
3. Using query params in your server components as a channel of communication from client components (you can only access query params in page.tsx files so you have to do tons of prop drilling for this to work which I understand is not advised when using server components)
To be clear, I'm pretty sure I understand how to implement any one of these strategies in a vacuum but have no intuition for the way an application of any reasonable size would chose to utilize these different features.
I made a stack over flow question that better describes the types of misunderstanding that I have: https://stackoverflow.com/questions/76839581/how-to-choose-between-nextjs-13-app-router-server-client-component-patterns
Great Video Sir, can you please list down VS code extensions you use?
Can we use App Router for production ready application? Or it is too early to use app router and we should use pages router?
Really good video. thank you! How can I empty text input after submitting form using server action?
nice video. what browser is that though
What is this from action attribute assigned a function? Where can I read more? As per the docs it should be string URL
Wonder if we use Axios instead fetch it will still cache for us or not ?
I'm getting a typescript error when I try and pass my action function into the form. " Type 'Promise<ServerActionResponse>' is not assignable to type 'string' " Any ideas how to fix this?
That "use server" syntax is hacky as hell. Giant turn off. Couple that with the security vulnerability in the pinned comment, I would HIGHLY recommend not using this.
thank you!
how come after reloading, the variable storing the todos has two todos? My first thought is after a reload, the variable resets to its initial state