Can someone explain to me some basic concepts? Eli5
So it seems there are three ways to do data fetching. I am asking about the pages/ dir but I think everything applies to the app/ dir
- fetch data in the page itself (getServerSideProps)
- Making API routes and then using the api routes in my page
- tRPC
when I first learnt nextJS, I don't remember ever learning about api routes, I learnt that you fetch data with getServerSideProps and it's friends.
Then all the tutorials were using API routes, so I was confused, was what I learnt outdated? are there cases where I should use API routes and others where using the nextjs
getServerSideProps functions was better? To add to the problem, I never got any formal experience with nodeJS so all the new terms like request, response and POST and GET confused me.
Then I watch theo's video tutorial expecting it to be using api routes and it seems to use tRPC, from the homepage tRPC doesn't really explain well what it does, but after using it I really liked it, it seems like a fresh breath of air from the api routes stuff.
But then I had a realization, why did we go from fetching data in the page itself to using API routes in the first place!! like getServerSideProps seemed perfectly reasonable.
An additional related question is, from my understanding fetching data in the page itself can only be done from one of next's fetching functions getServerSideProps etc.. (atleast that's true in the pages/ dir) so why am I all of the sudden able to do this inside a normal component function without using any nextjs or react functions.
const { data } = api.posts.getAll.useQuery();
so if someone would ELI5 this whole mess to me I would appreciate it!1 Reply
Fetching on client means
- render the page shell
- then fetch from whatever source you are looking into
- proceed from that
This is called: client side rendering, you render a shell on server and the content on the clients device
----
Get server side props is a variation of that
- request a page
- fetch the data before send the page to the client
- render the page with the said data already, that way the client can get the full page from the start
---
Trpc allows you to make typesafe calls
What does that mean? When requesting from an external source, you can't know for sure what is the type of the data being returned. Trpc allows you, when you control both sides, to give correct types for the external call and detect errors soon