Best practises for fetching data, as a beginner
Answered
Atlantic menhaden posted this in #help-forum
Atlantic menhadenOP
I'm working on a website where I need to fetch user data to be displayed in a list. It first fetches an initial set of users and uses infinite scrolling to fetch more data as the user scrolls down.
I had two questions about data fetching in this situation:
- When using react server components, does it make more sense to use route handlers and make an API call or just use the function which interacts with the db directly in the React code?
- What's the difference between using getServerSideProps or getStaticProps vs making an API call or using the db function described above to fetch the user data?
I have read the docs on these topics but I'm still a bit confused on when to use which.
I had two questions about data fetching in this situation:
- When using react server components, does it make more sense to use route handlers and make an API call or just use the function which interacts with the db directly in the React code?
- What's the difference between using getServerSideProps or getStaticProps vs making an API call or using the db function described above to fetch the user data?
I have read the docs on these topics but I'm still a bit confused on when to use which.
Answered by James4u
So to answer your question, i fyou are using app router, don't try to create api routes - just query out your db in your
server components14 Replies
@Atlantic menhaden I'm working on a website where I need to fetch user data to be displayed in a list. It first fetches an initial set of users and uses infinite scrolling to fetch more data as the user scrolls down.
I had two questions about data fetching in this situation:
- When using react server components, does it make more sense to use route handlers and make an API call or just use the function which interacts with the db directly in the React code?
- What's the difference between using getServerSideProps or getStaticProps vs making an API call or using the db function described above to fetch the user data?
I have read the docs on these topics but I'm still a bit confused on when to use which.
There is no benefit to calling a route handler from a server component, it’s actually a negative because they both run on the server, and you’ll need to make another network round trip to get your data, route handlers are for third-party apps to interact with your app (e.g webhooks) you should be fetching the data directly in your server component if you can
@Plague There is no benefit to calling a route handler from a server component, it’s actually a negative because they both run on the server, and you’ll need to make another network round trip to get your data, route handlers are for third-party apps to interact with your app (e.g webhooks) you should be fetching the data directly in your server component if you can
Atlantic menhadenOP
Makes sense, thank you. What about getStaticProps? Why use this
instead of doing it this way:
export const getStaticProps = (async (context) => {
const users = await db.select().from(userTable);
return { props: { repo } }
}) satisfies GetStaticProps<{
repo: Repo
}>
export default function UsersList({
repo,
}: InferGetStaticPropsType<typeof getStaticProps>) {
return <h1>{users}</h1>;
}instead of doing it this way:
export default async function UsersList() {
const users = await db.select().from(userTable);
return <h1>{users}</h1>;
}@Atlantic menhaden The second code example is server component
in app router
getStaticProps() is in page routerSo to answer your question, i fyou are using app router, don't try to create api routes - just query out your db in your
server componentsAnswer
To answer your second question, again it's page router vs app router
@Atlantic menhaden Makes sense, thank you. What about getStaticProps? Why use this
ts
export const getStaticProps = (async (context) => {
const users = await db.select().from(userTable);
return { props: { repo } }
}) satisfies GetStaticProps<{
repo: Repo
}>
export default function UsersList({
repo,
}: InferGetStaticPropsType<typeof getStaticProps>) {
return <h1>{users}</h1>;
}
instead of doing it this way:
js
export default async function UsersList() {
const users = await db.select().from(userTable);
return <h1>{users}</h1>;
}
Yeah as james said, two different routers, two different ways of fetching data.
Atlantic menhadenOP
Ah okay, thank you both. Docs aren't very clear about what's meant for client comps and server comps
you are welcome!
@Atlantic menhaden plz mark solution if it helped you! 🙂
Atlantic menhadenOP
Can I mark multiple solutions since 2 different people answered?
I think yes!
@Atlantic menhaden Can I mark multiple solutions since 2 different people answered?
no, only the latest will be marked (cc @James4u)
-# - it will show 2 embeds here but in forum site it only uses latest for the answered message
-# - it will show 2 embeds here but in forum site it only uses latest for the answered message