Why I don't use React-Query and tRPC anymore

Summary

Dans cette vidéo, l'animateur explique pourquoi il n'utilise plus React Query et tRPC avec Next.js, malgré qu'il n'ait rien contre ces outils en principe. Il montre comment React Query permet de mettre en cache les données pour éviter les requêtes réseau redondantes, mais souligne que Next.js gère déjà ce caching de manière efficace. Concernant tRPC, il est utilisé pour assurer une communication client-serveur type-safe, mais Next.js propose des actions de serveur qui offrent les mêmes avantages. L'animateur recommande toujours l'utilisation de React Query et tRPC dans des applications React non-Next.js, mais pour Next.js, il préfère les fonctionnalités natives du framework.

Takeaways

• 😀 L'auteur a arrêté d'utiliser React Query et tRPC dans Next.js, mais il reconnaît leur utilité en dehors de Next.js.
• 🔍 React Query est utilisé pour la mise en cache des données pour éviter les requêtes réseau redondantes.
• 🎯 Avec React Query, il n'y a pas de requête réseau lorsque l'on clique sur un élément qui a déjà été chargé, contrairement à l'utilisation traditionnelle de `useEffect`.
• 🌐 Next.js offre une mise en cache intégrée qui rend inutile l'utilisation de React Query pour la récupération de données.
• 🛠️ Dans Next.js, la mise en cache fonctionne automatiquement et persiste même après le déploiement grâce à la mise en cache des résultats des appels de récupération.
• 📱 Next.js utilise également la pré-extraction avec le composant `Link` pour améliorer les performances de navigation.
• 💡 tRPC est utilisé pour la communication client-serveur type-safe, offrant une meilleure expérience de développement avec TypeScript.
• 🛂 tRPC permet de spécifier les types d'entrée et de sortie pour les requêtes et les mutations, réduisant les erreurs et améliorant la maintenance du code.
• 🚀 Next.js introduit les actions serveur qui offrent une alternative à tRPC pour les mutations de données côté serveur.
• ⚙️ Les actions serveur sont similaires à des fonctions locales et sont appelées de manière universelle, mais nécessitent une validation des entrées.
• 🌐 Si l'on envisage de prendre en charge des clients en dehors de Next.js, comme une application mobile React Native, tRPC pourrait être préférable à cause de sa portabilité.

Q & A

Pourquoi l'auteur n'utilise-t-il plus React Query ou tRPC dans Next.js?

L'auteur mentionne qu'il n'utilise plus React Query ou tRPC dans Next.js car Next.js fournit des fonctionnalités de mise en cache intégrées et des actions de serveur qui rendent ces outils superflus dans la plupart des cas.

Quel est l'avantage principal de React Query mentionné dans le script?

React Query permet de mettre en cache les données récupérées, évitant ainsi de faire de nouvelles requêtes réseau pour les mêmes données, ce qui améliore l'efficacité et les performances de l'application.

Comment Next.js gère-t-il le chargement des données sans React Query?

Next.js utilise des fonctions asynchrones dans les composants de page pour charger les données, et met en cache automatiquement les résultats des appels de récupération de données, évitant ainsi les nouvelles requêtes réseau pour les données déjà demandées.

Quelle est la différence entre l'utilisation de React Query dans une application React FEAT et dans Next.js?

Dans une application React FEAT, React Query est utilisé pour la mise en cache côté client, tandis que dans Next.js, la mise en cache est gérée par le framework lui-même, ce qui rend souvent inutile l'utilisation de React Query.

Pourquoi l'auteur pense-t-il que les actions de serveur dans Next.js sont préférables à tRPC pour les mutations de données?

Les actions de serveur dans Next.js offrent une communication type-safe entre le client et le serveur, similaire à tRPC, mais avec l'intégration native dans Next.js et sans nécessiter de boulot supplémentaire pour le typage et la validation des données.

Quels sont les problèmes que tRPC résout dans les applications React traditionnelles?

tRPC permet de faire la communication client-serveur type-safe, évite la nécessité de se souvenir des URL des points de terminaison et fournit des avertissements de TypeScript si les données ne sont pas du type attendu.

Quels sont les cas où l'auteur recommande toujours l'utilisation de React Query dans Next.js?

L'auteur recommande l'utilisation de React Query dans Next.js pour les cas où il y a besoin de récupération de données côté client après une action de l'utilisateur, comme le défilement infini, ou pour les applications qui nécessitent un soutien pour des clients en dehors de Next.js.

Quelle est la fonctionnalité de Next.js qui permet de précharger les données pour les liens avant qu'ils ne soient cliqués?

La fonctionnalité de Next.js qui permet de précharger les données est le composant Link, qui précharge les pages associées aux liens en les rendant dans la vue portante.

Comment les actions de serveur dans Next.js améliorent-elles l'expérience utilisateur sur les formulaires?

Les actions de serveur dans Next.js améliorent l'expérience utilisateur en fournissant une progression vers l'amélioration, ce qui signifie que les formulaires fonctionnent même sans JavaScript activé, et en intégrant des fonctionnalités avancées telles que l'utilisation de l'état de soumission et des UI optimistes.

Quel est l'inconvénient principal des actions de serveur mentionné dans le script?

L'inconvénient principal des actions de serveur est qu'elles ne peuvent pas être facilement utilisées en dehors de Next.js, ce qui limite leur utilisation si l'on souhaite prendre en charge des clients en dehors de Next.js.

Outlines

00:00

🔍 Introduction au problème de la récupération de données avec React Query et tRPC dans Next.js

Le présentateur explique qu'il ne utilise plus React Query et tRPC dans ses projets Next.js, bien qu'il n'ait rien contre ces outils en soi. Il pense qu'ils sont encore très utiles en dehors de Next.js et qu'il est important de reconnaître le talent des personnes qui les ont créés et les entretiennent. Il propose de passer en revue un projet pour illustrer son point de vue. Le projet en question est un exemple de recherche d'emplois où l'utilisateur peut cliquer sur un poste pour voir les détails. Chaque clic déclenche une nouvelle requête réseau, ce qui est inefficace car les données pourraient être mises en cache. Le présentateur montre comment React Query pourrait résoudre ce problème en mettant en cache les données une fois qu'elles ont été récupérées, évitant ainsi de nouvelles requêtes réseau inutiles.

05:00

🚀 Les avantages de React Query dans les applications React FEAT

Le présentateur compare l'utilisation de React Query avec la méthode traditionnelle d'utilisation de l'API fetch dans une application React FEAT (comme Create React App). Il montre que React Query offre un moyen plus efficace de gérer la récupération de données en mettant en cache les résultats des requêtes, ce qui permet d'éviter les requêtes réseau redondantes. Il illustre cela par un exemple où, après avoir récupéré les détails d'un poste, il est possible de naviguer entre les différents postes sans devoir réeffectuer de nouvelles requêtes. Il souligne que, bien que React Query puisse faire beaucoup plus, la mise en cache est le principal avantage pour lequel il l'utilise dans les applications React FEAT.

10:01

🌐 Adaptation de React Query et tRPC dans le contexte de Next.js

Le présentateur explique que dans Next.js, les choses changent car la mise en cache est gérée différemment. Il montre comment, dans Next.js, on peut effectuer des appels de récupération de données directement dans le corps de la fonction composant sans utiliser useEffect. Next.js met automatiquement en cache les résultats des appels de récupération de données, ce qui rend inutile l'utilisation de React Query pour cette tâche. Il illustre cela en montrant que les données récupérées ne déclenchent pas de nouvelles requêtes réseau lorsqu'elles sont reconsultées. Il mentionne également que Next.js possède plusieurs niveaux de mise en cache, y compris la mise en cache des résultats de rendu des composants serveur et des composants clients.

15:03

🛠️ Quand utiliser React Query et tRPC dans Next.js et quand privilégier les fonctionnalités natives

Le présentateur discute des cas où l'on peut encore avoir besoin d'utiliser React Query dans Next.js, comme pour la récupération de données côté client après une action de l'utilisateur, par exemple le défilement infini. Il mentionne également que tRPC est utile pour la communication client-serveur type-safe, mais que dans Next.js, on peut obtenir les mêmes avantages en utilisant des modèles de données objets (ORM) comme Prisma. Il montre comment, avec des composants serveur et des actions serveur, on peut bénéficier de la même type-sécurité et d'une communication efficace avec le backend sans avoir besoin de tRPC. Il conclut en soulignant que, bien que React Query et tRPC soient des outils puissants, Next.js offre des fonctionnalités natives qui rendent souvent ces outils superflus, en particulier pour la mise en cache et la communication avec le backend.

Keywords

💡React Query

React Query est une bibliothèque qui permet de gérer les données distantes et leur mise en cache de manière efficace dans une application React. Dans la vidéo, l'orateur explique qu'il n'utilise plus React Query avec Next.js, car Next.js offre déjà des fonctionnalités de mise en cache intégrées. Cependant, React Query reste utile dans d'autres contextes, comme les applications React classiques, pour optimiser les appels réseau et éviter les requêtes redondantes.

💡tRPC

tRPC est une bibliothèque qui facilite la communication client-serveur de manière type-safe, en utilisant TypeScript. Dans le script, l'orateur mentionne qu'il n'utilise plus tRPC avec Next.js en raison de l'introduction des actions serveur dans Next.js qui offrent des avantages similaires. Cependant, tRPC est encore utile pour les applications mono-répertoire où le client et le serveur sont contrôlés par le même développeur.

💡Next.js

Next.js est un framework React permettant de créer des applications web avec des fonctionnalités de routage côté serveur et de génération de site statique. La vidéo discute de la manière dont Next.js gère la mise en cache et les appels API, rendant souvent inutile l'utilisation de bibliothèques supplémentaires comme React Query et tRPC.

💡Mise en cache

La mise en cache est un mécanisme permettant de stocker temporairement des données pour une utilisation future, afin d'améliorer les performances et de réduire le trafic réseau. Dans le contexte de la vidéo, la mise en cache est abordée comme une fonctionnalité intégrée à Next.js qui rend la plupart des appels à React Query obsolètes pour le chargement de données.

💡Hooks

Les hooks sont une fonctionnalité introduite dans React qui permet d'utiliser des états et d'autres fonctionnalités de cycle de vie des composants de classe sans écrire de classe. Dans la vidéo, 'useEffect' est mentionné comme un hook utilisé traditionnellement pour gérer les appels API, mais qui est en partie remplacé par les fonctionnalités intégrées de Next.js.

💡API Fetch

L'API Fetch est une API web standard pour récupérer des ressources d'un serveur via des requêtes HTTP. Dans le script, l'utilisation de l'API Fetch est discutée comme une méthode traditionnelle de récupération de données, qui peut être optimisée ou remplacée par des solutions plus avancées telles que React Query ou les actions serveur de Next.js.

💡TypeScript

TypeScript est un super-ensemble de JavaScript qui ajoute des types statiques à votre code. Dans la vidéo, TypeScript est mentionné comme un outil permettant de rendre la communication client-serveur plus sûre et plus prévisible, avec des bibliothèques comme tRPC qui s'appuient sur les types pour fournir une expérience de développement plus robuste.

💡Server Components

Les composants serveur Next.js sont des composants React qui sont rendus côté serveur et peuvent accéder directement à la base de données et aux APIs. Dans le script, les composants serveur sont mentionnés comme une raison supplémentaire pour laquelle les outils tels que React Query et tRPC peuvent devenir moins nécessaires, car ils permettent une gestion efficace des données et des requêtes de manière type-safe.

💡Server Actions

Les actions serveur sont une fonctionnalité de Next.js qui permettent d'exécuter du code sur le serveur en réponse à des événements côté client, comme le soumission d'un formulaire. Dans la vidéo, les actions serveur sont discutées comme une alternative à tRPC pour les mutations de données, offrant des avantages tels que la validation des données et l'intégration avec le cycle de vie des composants React.

💡SSR (Server-Side Rendering)

Le rendu côté serveur est un processus où le HTML d'une page web est généré sur le serveur avant d'être envoyé au client. Dans le contexte de la vidéo, SSR est abordé comme une fonctionnalité clé de Next.js qui permet de créer des applications web rapides et efficaces, en rendant les bibliothèques de gestion des données comme React Query moins essentielles pour certaines tâches.

Highlights

The speaker no longer uses react query or tRPC in Next.js projects.

React query is praised for its caching capabilities outside of Next.js.

tRPC is acknowledged for its type safety in client-server communication.

Next.js has built-in caching that reduces the need for react query.

The speaker demonstrates how react query caches data with useQuery hook.

Next.js automatically caches data fetching, eliminating the need for react query in most cases.

Server components in Next.js provide type safety similar to tRPC without additional setup.

Server actions in Next.js offer a way to mutate data on the server with type safety.

The speaker suggests using react query for client-side data fetching in Next.js.

tRPC may still be relevant for Next.js if planning to support clients outside of it.

Server actions provide progressive enhancement, working even with JavaScript disabled.

The speaker recommends using Next.js server actions over tRPC for mutations within Next.js.

The video includes a demonstration of setting up and using server actions in Next.js.

The speaker discusses the limitations of server actions, such as the loss of type intelligence.

The video concludes with a recommendation for a course on advanced React and Next.js.

A summary of when to use react query and tRPC in different React application scenarios is provided.

Transcripts

everyone I've been getting some

questions about using react query and

trpc in the latest nextjs so I

personally do not use react query or

trpc anymore and in this video I want to

explain why I don't have anything

against these tools in principle I think

they're still very useful outside nextjs

and I also think that the people who

build them and maintain them are very

talented people let's actually take a

look at why I don't use them anymore so

I'm going to use this remote Dev project

that is from my reacted next escore some

of you will recognize it and here we are

actually doing some data fetch so let's

actually start with react query so the

user can search for something and then

we get a list of results and the user

can click on one of those results to get

the detail right so here I clicked on

the at security so that's what we see

here let me actually zoom in a little

bit so you can see here that I can click

around and every time I click on one of

them we are loading the actual details

of that particular job item right very

standard very typical situation here I'm

using the same image for all of them by

the way so don't be confused they are

actually different right so you can see

the title here is front end devel veler

react and the company name at security

here the company name is Asen as so you

can see we're we're loading the relevant

details for the one that we clicked and

when I look in the network tab you can

also see that whenever I click on one of

them there is a new network request so

the data is being Fetch and most

importantly when I click on one that we

already saw there is a new network

request all right so how would we

implement this well traditionally

without react query you would have the

typical use effect right so you would

use use effect and then you can use the

fetch API to actually fetch the relevant

uh job item details right based on the

ID that we get here we're going to set

the loading is to set to true and

ultimately we get the data so we store

that in state and then here with is

loading we're setting that back to false

again right this is basically how you

learn react initially right so you have

use effect and that's how you fetch data

the downside of this is now if I click

on the first one you can see there is a

network request if I click on the second

one there is a new network request what

happens if I now go back to the first

one the one that we just fetched if I

click on the first first one there is a

new network request there is no caching

and when I go back to the second one

there is a new network request we see a

loading State there is zero caching so

literally every time we click on one of

them there is a new network request and

that is very inefficient right because

why are we making a new network request

we just requested this information 5

seconds ago so that's where react query

comes into play so let's actually

replace this with react query all right

so I have commented this out and I

replaced all of that with react query

here so with react quer you get the use

Query hook and it will give you the data

and an is loading flag as well so with

react query um there's three arguments

here that will specify so this ID is

like a caching key the second part is

the actual data fetching right so with

react query you still have to specify

how you want to do the actual data

fetching and then how long it should be

cached so what's the benefit of doing

this well if I now save here and now uh

Let me refresh here for a clean slate

all right so now we see the first one

here what if I click on the second one

well it's going to fetch initially it

has to fetch the data right but what

happens now if we go back to the first

one you can see that was instant right

if I now click on the second one you can

see that's instant there is no loading

State now I can click around between

these two because they have already been

fetched once and react query knows that

if it's an ID that it has seen before

right which is why we keep track of it

in here it can see that when you pass in

an ID and it's an ID that we have

already fetched for before react query

knows uh we already did this data

fetching for ID number five let's say so

we're not going to run all of this again

I'm just going to give you the data from

that number five from before so that's

called caching and let me show you that

in a network tab as well so if I click

on the last one here in the list you can

see there is a network request here and

there's no way around it initially you

need to actually fetch the data and now

let's say I click on the one uh on top

of that so there's another Network

request okay it's the first time so

you're going to have to get the data but

what happens now if we click on the last

one again you can can see I clicked

there there was no new network request

if I click on the one above it you can

see there is no new network request I

can I can click back and forth between

them there are no new network requests

because react query caches these job

items um when we fetch them now react

query can do many other things but I

would argue that this was the main

reason we were using react query and

this is still how I would do it in a

react feat app right so remote Dev is a

react feat app and in a feat app I would

still use re react query all right so

that's for feed right nothing really

changes for react feed apps or create

react app in case you're still using

that right so that all states the same

now in nextjs I would argue things

change a little bit so here I actually

converted the same app to uh the nextjs

framework so here it's the same app all

the same features and you can see when I

click on the second one you can see

there's a loading indicator there and if

I click on the third one there is a

loading indicator but what happens now

if I click on the second one the one

that we just saw that we already fetch

the data off you can see it's instant

when I click here it's instant right so

these first three I already fetched

their data so the next time I come back

to them I'm there's not going to be a

new network request because nextjs

actually caches that for me so let me

show you how it looks like in nextjs so

in nextjs we do not use use effect we

can actually make it async and then you

can do the data fetching directly here

in the component function body and then

if you do it like this next as will

automatically cash all of this and let

me prove that to you in the network tab

as well if I go to the second page here

let's say I pick the first one here you

can see there is an initial Network

request if I click on the second one

here there is there are actually two

Network requests we can ignore that but

you can see there is a network request

for every click what happens now if I go

back to that first one that I just

clicked if I click on that one you can

see it's instant there is no new network

request if I click on the other one you

can see it's also instant there is no

new network request because nextjs

automatically caches your fetch request

actually and how do we get the loading

State like we got with react query

though because if you look here you can

see we are still getting this spinner

here so how do you get that loading

State actually the loading State Works a

little bit differently so on the page in

a nextjs project so here on the page

component here is that component that's

actually doing the data fetching I can

wrap it in a suspense and then you can

specify a fall back so while the async

component is suspended right you can see

right while this is going on it will

render the f back here and this is the

component that actually shows a loading

spinner right so you can see here there

is a spinner in here right make sure you

add a key prop to the suspense so that

every time the ID changes the suspense

is triggered again very common Pitfall

actually right so next you ask comes

with built-in caching so that's why I

don't use react query for data fetching

in nextjs right so nextjs is very

aggressively cached actually so it will

actually automatically cach the result

of this fetch call this individual fetch

call whatever result of that is it will

actually cash that and that's actually

the most powerful cache in nextjs this

will persist even throughout deployment

and nextd S also caches the result of

this render right so your server

components this is your server component

the result of this render is a so-called

RSC payload react server component

payload so basically the render result

the render result itself is also

separately cached and there is also a

client side cache that nextjs manages

for us and that's actually why it's so

Snappy here because as I click around it

will actually use that client side cache

right so it will not make new network

requests to the back end because it can

see that we're requesting something that

has already been requested before right

so those are the three main caches in

nextjs now if you use the nextjs link

component which we actually do use here

in that in that list so for every item

in that list it's wrapped in this link

component where it will actually specify

what needs to happen to the URL when you

click on it this is actually prefetched

so as these links come into the viewport

nexts will automatically prefetch that

for me behind the scenes so then when

you click it there won't even be a

loading state it will be instant now

here we still get a loading State

because I'm in development here so that

link component prefetching is only

enabled in production mode that's nextjs

is very aggressively cached and that's

why I don't use react query in nextjs

however sometimes you still need to do

client side fetching right so there are

still some edge cases where you where

you actually want to do client side

fetching in that case the fetch API for

example is not automatically cached

right so this is only automatically

cached on the server so if you do client

side fetching you may still want to use

react query and usually that's the case

when you want to fetch data after a user

action for example infinite scroll right

so the user first has to scroll and then

you want to fetch data well you may want

to look into react query or you want to

do things like polling and some other

things in that case you may still want

to use react query in nextjs but

generally I don't use react query in

next J all right so what about trpc

let's go back to our feat example so TR

RPC is for client server communication

making that type safe so let's actually

go back to this example of fetching data

without react query just the traditional

way right so we just use use effect here

this is how you would do it

traditionally you would fetch the data

like this now one of the problems with

this is when we get data back here if

you hover data you can see it is typed

as any and we don't want to have anyes

in our codebase because any means

anything goes typescript should warn me

here hey this method does not exist but

as you can see because it's as any well

you can do anything this is not type

safe so the main problem here is you

don't have a good type here another

problem is of course you need to

remember the actual URL of the end point

that you're making that request to right

so this is not a robust way of

communicating with a back end all right

so then here I have an example of trpc

so you have to do some setup there is a

little bit of a boiler plate here but

the benefit is now I don't have to

remember the end point I can just use

trpc I can see what I have available

trpc oh I have a job python by ID method

on here and what do we want to do with

that well I just want to get data that's

called a query and actually I need to

pass some value to the endpoint if I

forget that typescript warns me here so

I get a warning here I need to specify

an input right if I pass in the wrong

input of a number type let's say I even

get a warning it should be a string

right so I'm just going to pass that ID

so I'm getting a job item by its ID now

the main benefit here is now when I

hover data you can see I'm getting the

actual type right so here now I get the

actual type so now if I make a mistake

on this and I think I can call some

method typescript will actually warn me

right and I can fix my mistake so now

this return value is properly typed and

another benefit is of course I don't

have to remember the actual URL of the

endpoint right so I can just use some

trpc object here and tapescript will

provide intelligence here to see what I

can do with that all right so then let's

go back to next JS how do we get those

same benefits without using trpc so trpc

is for when you control both the client

side as well as the server side right so

realistically you're not going to do a

fetch call to some third party API most

of the time typically you're going to

get this type of data from your own

database and you're going to use an OM

right so here for example with Prisma if

I get the job item by ID if I now hover

the data you can see I already get this

correct type and I also don't have to

remember some URL right so for getting

data I don't need to use trpc to get

these benefits server component allow me

to use Prisma directly here right so

with server components in xjs and your

omm you already will get the correct

type here right so to get those benefits

for getting data you don't need to use

trpc all right so that was for getting

data now what about mutations right

basically your postp put and delete

request well if you have some kind of

form let's say and when you submit the

form you want to add let's say a job

item to the database right so what you

would do typically before trpc again you

had to sort of guess the URL for the

endpoint and here you need to pass the

actual data but how do you know the

specific data or format and here I don't

get any intelligence here right I don't

get any relevant intelligence here so I

don't really know what to pass exactly

I'm just kind of guessing here also if I

get any return value let's say an error

or something like that right so if I get

any return value here you don't get this

properly typed you're going to get some

any type as we saw before all right so

what if we want to do the same with trpc

well you can use that trpc object so I

can use intelligence here to see the

options I have here so I don't have to

guess the the endpoint URL I can see

there is some option to create a job

item and I want to do a mutation so I

can do M mutate and then here I can pass

the data how do I know what data to pass

typescript tells me here so the input

needs to be an object with a title and

description right so here I can see what

I need to pass right so description and

title if I make a mistake if I make it a

number I get a warning here from

typescript so you can see all of this is

properly typed including any return

value I may get if I hover data you can

see data is going to be of this

particular shape right so with trpc you

get that very nice types saave client

server communication all right so then

why not use trpc in nextjs well nextjs

has another major Innovation and maybe

this is even the biggest one which is

server actions so server actions are

meant to mutate data on the server so

instead of using the onsubmit event

handler you would actually use the

action attribute and then here you can

invoke a server action so I actually

created a server called create job item

I actually put that in a separate file

we'll take a look at that in a second I

could technically also Define it in here

if I wanted to but I like to put them in

a separate file I can also do uh create

job item right I don't have to remember

a URL if I don't pass anything

typescript will warn me actually right

so it expects an argument here I know I

need to specify an argument here and

then here also you can see I'm getting

intelligence here so TP is telling me

hey you need to pass description and

title right so here I can say title if I

make a type mistake again you can see

I'm passing a number here I get a

warning here right so here you can see

type number is incorrect I can fix my

mistake right so with server actions I

also get that intelligence I don't need

to remember some URL endpoint and if

this returns anything if we uh get

something back here if I hover a result

you can see this has been automatically

inferred by typescript and so these

server actions you can call them from

anywhere from the client side server

side and so these server actions you can

invoke them anywhere and they provide

the same benefits and so the server

actions are very similar to just normal

local functions right and typescript can

infer whatever you return from that

function it can infer what you are

returning and so then here as a result

we get that type so let's actually take

a look at how we Implement a server

action like that so I like to put them

in a separate file I don't want to have

them lingering around in some components

they're very important functions

actually so I want to have a dedicated

place for them in my code base so with

us server at the top of the file every

function in here becomes a so-called

server action so here I have my server

action here I Define the input right so

you need to pass a new job item and it

should be an object with title and

description just like how you would

specify normal function with its

parameters right so you would give a

name for the parameter and then the type

and whatever type you specify here that

will automatically be uh suggested here

when you try to use it right so here we

got the intelligence because I have

typed this here I didn't need to do

anything else since surf actions are

basically like post API endpoints next s

behind the scenes will actually make a

post request to uh the back end and

since we cannot trust anything coming

from the client we do want to validate

that whatever we get here that this is

actually of the shape that should be

right so if we pass something that's not

of the correct shape we are actually

returning something here from this

function just like you would return

something from a normal local function

and whatever you return here this is

also what you will get here as the type

right so types skit will just give you

that type right so it could be this type

in case there is a validation problem

right and then we can do the actual

mutation in our database and then with

revalidate we can update the UI in the

same network request I have other videos

and server action so we can't spend too

much time on them but you can see that

we get the same results here with just

using server actions there is no

additional boilerplate required to make

all of that type safety work server

actions also have some additional

benefit for example here in forms they

provide Progressive enhancement which is

a very fancy word but it means that if

you just specify the server action like

this this will actually work without any

JavaScript enabled and if you actually

do provide some more code like what we

we're doing here and maybe here you also

want to have maybe a toast message in

case there is an error if you do it like

that it will actually need JavaScript

but then still this form will be

prioritized in hydration and the server

actions are also integrated with some

powerful hooks like use form status to

get a pending State and also use

optimistic to get optimistic UI one

downside here is I did type it as an

object like this realistically like I

just said we don't really know what we

get here you cannot trust any anything

coming from the client and with

typescript you do want to be as precise

as possible so a more precise type for

this input is actually unnown we don't

really know what we're going to get this

would be a more precise type and then

you need to validate it with for example

zot which is actually very similar to

how you would do it in trpc as well so

that doesn't change you would run it

through some schema first and then once

that is successful uh you would use that

variable right so then you would use

validated job item. dat. tile. data and

then here here you also get the proper

type right so after validation you do

get the right type here on the backend

side now the downside of doing this is

now when you use the server action since

it's typed as unknown we don't really

know what we need to pass here right so

now we lose that intelligence so that's

one downside if you properly type it you

do lose the intelligence now there are

some rapper libraries that will fix that

so my guess is that we will get some

rapper library for Server actions that

that will fix some of its downsides now

one major downside of server actions

that is going to be hard to to fix is

that you cannot easily use them outside

nextjs so if you also want to support

let's say a react native mobile app

client you can't use these server

actions so if your plan is to support

clients outside nextjs you may want to

stick to trpc so if you're a little bit

confused by now completely normal nextjs

has really changed the landscape of web

development in my opinion if you want to

master latest react and nextjs I highly

recommend you go through my professional

react and nextjs course in which we

start from absolute scratch and by the

end we're building some really cutting

edge nextjs applications you can find

the link in the description so just to

sum up this video I would still use

react query and trpc in a react feed app

for example but in a nextjs application

I'm probably not going to use react

query or trpc I'm doing some client side

data fetching in some Edge case in which

case I would use react query or I'm

planning on supporting clients outside

nextjs in which case I would use trpc

for my endpoints thanks for watching

this video and I hope to see you the

next one bye