Next.js Discord

Discord Forum

Is this good practice?

Answered
Silky ant posted this in #help-forum
Open in Discord
Silky antOP
Hello everyone. I'm a little lost. What's the best practice for data fetching in the app dir?
First of all, I only use server actions exported from an actions.ts file (getTemplates in this case).
I first fetch the data on my page.tsx, doing something like this:
// page.tsx
export default async function Page() {
  return (
    <Suspense fallback={"fallback skeleton"}>
      <FetchTemplates />
    </Suspense>
  );
}

async function FetchTemplates() {
  const templates = await getTemplates();
  return <Templates templates={templates} />;
}

It renders the Templates component, which is a client component in which I use tanstack query:
// Templates.tsx
export default function Templates({ templates }: { templates: Template[] }) {
  const { data } = useQuery({
    queryKey: ["templates"],
    queryFn: async () => getTemplates(),
    initialData: templates,
  });
 
 return <div>{data.map(() => ...)}</div>
}

Is there anything I could be optimizing or doing better?
Also, what does the experimental ppr flag change in all of this?
Answered by B33fb0n3
yea, it's okay
View full answer

23 Replies

B33fb0n3
I recommend you to fetch the data serverside. Yes, I know, you already doing this. By why calling an endpoint two times? You said, that the methods are exported as server action, so why running a server action on a server for data fetching? That’s not how it should be. Create a file for datafetching and use the methods from that, to fetch data from your data source. Then you are good to go 🙂 @Silky ant
Silky antOP
why? wouldnt that be a duplicate?
@B33fb0n3 I recommend you to fetch the data serverside. Yes, I know, you already doing this. By why calling an endpoint two times? You said, that the methods are exported as server action, so why running a server action on a server for data fetching? That’s not how it should be. Create a file for datafetching and use the methods from that, to fetch data from your data source. Then you are good to go 🙂 <@368664186433175562>
Silky antOP
this is the servrer action
export async function getTemplates() {
  const { userId } = auth();
  if (!userId) return [];

  const data = await db
    .select()
    .from(template)
    .where(eq(template.userId, userId))
    .orderBy(desc(template.id))
    .all();

  return data;
}

would it be any different if i copy paste this into my component?
@Silky ant this is the servrer action ts export async function getTemplates() { const { userId } = auth(); if (!userId) return []; const data = await db .select() .from(template) .where(eq(template.userId, userId)) .orderBy(desc(template.id)) .all(); return data; } would it be any different if i copy paste this into my component?
B33fb0n3
if you are using server actions, a endpoint will be created and you will get the data from this endpoint (this server action).
if you just use getTemplates (without server actions), there are no additional endpoint created 🙂
B33fb0n3
it seems like the functions itself is not a server actions. So you should be able to just remove the use server.

What do you think is faster:
Create a endpoint -> fetch data (on endpoint) -> return data
fetch data -> return data
@B33fb0n3 it seems like the functions itself is not a server actions. So you should be able to just remove the use server. What do you think is faster: Create a endpoint -> fetch data (on endpoint) -> return data fetch data -> return data
Silky antOP
yeah i could just copy paste the file and remove use server
but id still have to change the imports everywhere
as for the endpoints i didnt know server actions create endpoints when theyre called from a server component, or that its faster this way
B33fb0n3
the functions staying in the same file, so no need for import change
Silky antOP
i have "use server" at the top of the file
B33fb0n3
yea
Silky antOP
but in every server component i called the action i should now change it to the new file
B33fb0n3
no need for a new file 🙂
or does the client uses the functions?
Silky antOP
yes
B33fb0n3
oh
Silky antOP
i wrote them once and used both on client and server
B33fb0n3
well... then I guess...
Silky antOP
i switched to a separate file now and changed imports but get some weird error
only one route renders and it doesnt seem to be faster. guess ill stick with actions
but is the way i do things okay? page being server component with suspense that renders the async component in which i fetch server side and then returns the client component?
B33fb0n3
yea, it's okay
Answer
Silky antOP
thank you