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!
Was this page helpful?