With NextJS 13, along came server components and server actions. With both allowing you to run code directly on your node server without ever needing to hit an API endpoint, they abstract away a lot of the boilerplate and complexity that come with route handlers. Are they an effective replacement for route handlers in Next altogether? When should we use one vs. the other?
Gathering Data to be Used on Component Load
If your component must have some data to display on render, you would normally have to do a few things.
-
- You’d need to most likely have a useEffect within the component.
-
- Within that useEffect, you’d have to fetch that data, most likely by hitting an endpoint.
- You’d need to handle the state where the data hasn’t been fetched yet, but the component has mounted.
This is exactly the kind of place where a route handler isn’t needed. Using a server component, you can simply grab the data directly from your data store, and use it in your component. When the component actually gets rendered in the browser, everything is exactly in place. No loading state necessary.
Mutating Data
Server actions were created with a specific use case in mind: mutating data. If you find that you’re mutating data on some user action (form submit, button press, etc.), calling a server action instead of hitting an endpoint will do the job.
Fine-grained Control Iver HTTP Request and Response
Server actions have a major limitation: under the hood, they are always a POST request. This has potential implications for behavior that expects certain request types. This also removes a developer’s ability to set response headers manually, or manually set the status code of the response.
Server actions also do not expose the request itself. It can’t be inspected for header or request information, essentially only the request body is exposed within a server action.
Externally Accessible API
When adding route handlers to a NextJS app, those endpoints are accessible externally as well. If one wanted to do so, they could hit those endpoints from any client they’d like. Server actions, however, are only accessible from the NextJS client.
Fetching Data from the Client
Here’s a tricky one. It is widely suggested that server actions not be used for data fetching on the client. Does that mean you can’t do it? Well, technically, you can. Reasons why it’s suggested developers use route handlers are due to differences in how caching is handled, as well as some performance differences in how server actions work vs. using fetch to hit an endpoint defined in a route handlers.
That being said – server actions can generally be used for fetching data, as long as their idiosyncrasies don’t get in the way of what you’re trying to do. Although if you’re going by the book, it might be best to just follow NextJS’s recommendation and use route handlers here instead.
So, is SSR and server actions the future? Maybe! Will they ever fully replace route handlers? Almost definitely not! Do they make the developer experience way easier when compared to route handlers? Yes!