2 replies

Next JS 13 (noob) questions

Thank you, if you actually read threw all this. Would make my day!

So I have some question / want to make sure I got everything correct before I start implementing.

1. Fetching data from a db
When I just want to fetch simple data from my db I would just write the call directly in the server component right?

const ServerComponent = async() => {
  const data = await prisma.users.findMany();
}

const ServerComponent = async() => {
  const data = await prisma.users.findMany();
}

So I dont do?

const ServerComponent = async() => {
  const data = await axios.get("SOME_API_ROUTE");
}

const ServerComponent = async() => {
  const data = await axios.get("SOME_API_ROUTE");
}

2.Loading State
When I use the loading.tsx file at page level and any of the components lower in the component tree loads data, whatever is in there replaces everything that is inside the page.tsx file. Anything that is inside the layout stays?
As an example I have a page called Shop, this shop consists of an infinite scoll of items and some text at the top, this is all done in the page.tsx file.
This then is ofc used in the layout file, in the layout there is also a sidenav with filters and a navbar.
And in the loading.tsx file there is just some text that states loading.
Now when data is loaded everything in page.tsx gets replaced, even my text at the top right?
Is it possible to keep that text shown and only replace the actual items with the loading ui?

3. Sharing state?
Not sure how to call this, but lets stay with the example from above, I choose a filter in the sidenav, which would need to be a client component as it would need useState, how would I then pass this to the component that actually fetches the data?
And how would I then refetch the data and show the loading state again?

4. Fetching more data
Regarding pagination and infinite scrolling, I watched the video and there (at least normal pagination) is done using query params.
Is that the pattern that should be used in general?
Or do you just fetch the initial items on the server and then use something like react-query to do the client side data fetching?
In that case there would be some code duplication as the same db call would once be in my react code and in my api route right?

Thanks a lot for reading all of this (probably also stupid) questions

TTC

Theo's Typesafe Cult•3y ago•

2 replies

NotLuksus

Next JS 13 (noob) questions

const ServerComponent = async() => {
  const data = await prisma.users.findMany();
}

const ServerComponent = async() => {
  const data = await prisma.users.findMany();
}

So I dont do?

const ServerComponent = async() => {
  const data = await axios.get("SOME_API_ROUTE");
}

const ServerComponent = async() => {
  const data = await axios.get("SOME_API_ROUTE");
}

Next JS 13 (noob) questions

Next JS 13 (noob) questions

Similar Threads

Similar Threads

Similar Threads