Fetching Data (Next.js)

You can view my commits on GitHub

Ways to fetch data

• API
• ORMs
• SQL

API

An API layer can be used to

• Interact with a 3rd party services that provide an API.
• Fetching data from the client.
  • API layer that runs on the server.
  • avoid exposing database secrets to the client.

In Next.js, create API endpoints using Route Handlers.

Database queries

• Logic to interact with a relational databases like Postgres with with SQL, or an ORM like Prisma.
• Write database queries when creating API endpoints and logic to interact with your database.

Using Server Components to fetch data

• Next.js uses React Server Components by default.
• React server components fetch data on the server

Benefits to fetching data with Server Components:

• Server Components support promises, providing a simpler solution for asynchronous tasks.
  • Use async/await syntax without useEffect, useState or data fetching libraries.
• Server Components execute on the server.
  • You can keep expensive data fetches and logic on the server and only send the result to the client.
  • If using React server components you can skip the API layer, and query your database directly without exposing database secrets to the client.

Using SQL

For this dashboard project, I'll write database queries using the Vercel Postgres SDK and SQL.

Reasons to use SQL:

• SQL is the industry standard for querying relational databases.
• ORMs generate SQL under the hood.
• The Vercel Postgres SDK provides protection against SQL injections.

In /app/lib/data.ts, query the database by importing the sql function from @vercel/postgressql

Fetching data for the dashboard overview page

In /app/dashboard/page.tsx, Page is an async component. This allows you to use await to fetch data. There are 3 components which receive data: <Card>, <RevenueChart>, and <LatestInvoices>. We fetch data by importing functions from data.ts and calling them inside the components.

Fetching with JS vs SQL

Fetching and sorting the invoices using JavaScript can be inefficient. Instead of sorting through the latest invoices in-memory, you can use an SQL query to fetch only the last 5 invoices.

Prerendering

By default, Next.js utilizes Static Rendering to enhance performance. However, prerendering does not automatically update to reflect real-time changes in data.

Request waterfall

• Network requests depending on the completion of previous requests.
• This can result in blocking data requests.
• Useful to satisfy a condition before making the next request.
• If the waterfall is unintentional, it can negatively impact performance.

Parallel data fetching

• Initiate all data requests at the same time to avoid waterfalls.
• The Promise.all() and Promise.allSettled() initiate all promises at the same time.
• Executing all data fetches at the same time can lead to performance gains.
• Disadvantage: if one data request is slower than all the others.