Is data fetching using SWR necessary?

[devevignesh]

Can you please explain the use of swr in the app? According to Next.js doc, "fetching data in Server Components unless you have a specific reason for fetching data on the client".

Without swr

expanses/page.tsx

export default async function Page() {
  return (
    <>
      <LayoutHeader title="expenses" />
      <div className="w-full overflow-x-auto p-4 pt-3">
        <ExpensesSummary />
        <ExpenseTable />
      </div>
    </>
  );
}

expenses/summary.tsx

async function getData() {
  const res = await fetch('https://api.example.com/...')
   if (!res.ok) {
    throw new Error('Failed to fetch data')
  }
  return res.json()
}
 
export default async function ExpensesSummary() {
  const data = await getData()
 
  return <div></div>
}

expenses/table.tsx

async function getData() {
  const res = await fetch('https://api.example.com/...')
   if (!res.ok) {
    throw new Error('Failed to fetch data')
  }
  return res.json()
}
 
export default async function ExpensesTable() {
  const data = await getData()
 
  return <div></div>
}

According to Next.js: Behind the scenes, React and Next.js will cache and dedupe requests to avoid the same data being fetched more than once.

[gokulkrishh]

@devevignesh Hi, Sure let me explain. For couple of reasons i choose SWR library and doing most of my GET requests in client side.

1. In one place, i am calling userInfo in server side like here. If you look at the code i need to pass cookies to make it work because latest supabase using cookies for auth (previously i think localStorage)
2. Expense.fyi Data depends on the two things
   • 1. Overview page - It depends on client side component which is datePicker
   • 2. Other pages - it depends on the select component (All, this week or this Month).
   • Hence i went with the client instead of server side.
3. SWR does caches the network requests (GET for this app only).

I think i can move some of API from client side to server side if needed. But i chose not to do it. If you think you can make this better, send a PR 🤓.

I know NextJS says we can make requests in server side and move it only if needed in client side, but its not a hard fast rule. Ideally where to make API call depends on the application. In my case, i want to make API calls on the select dropdown change + date picker in overview.

Hope this answers your questions.

[devevignesh]

@gokulkrishh I understand it now. Thanks for explaining. Sure, I will try to send a PR for this.