Fetching Data (Next.js)
Tags: webdev, javascript, sql, nextjs
Published: 2024-04-30 18:36:28

You can view my commits on [GitHub](https://github.com/Samuel-Lubliner/nextjs-dashboard/commit/7e2d57a4b34976dc490ba8726a860169e3042029)

## 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](https://nextjs.org/docs/app/building-your-application/routing/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](https://vercel.com/docs/storage/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.