Learn Next.js: Fetching Data | Next.js

Tags

Top Highlights

• If you're fetching data from the client

• keep expensive data fetches and logic on the server

• Server Components support promises

• APIs are an intermediary layer between your application code and database. There are a few cases where you might use an API: If you're using 3rd party services that provide an API. If you're fetching data from the client, you want to have an API layer that runs on the server to avoid exposing your database secrets to the client.

• you can query the database directly without an additional API layer

• The data requests are unintentionally blocking each other, creating a request waterfall.

• Next.js prerenders routes to improve performance, this is called Static Rendering

• A "waterfall" refers to a sequence of network requests that depend on the completion of previous requests

• SQL is the industry standard for querying relational databases

• Using Server Components to fetch data

• relatively new approach: async React Server Components.

• You can use async/await

• understanding of SQL can help you understand the fundamentals of relational databases

• provides protection against SQL injections.

• There are a few cases where you have to write database queries: When creating your API endpoints, you need to write logic to interact with your database. If you are using React Server Components (fetching data on the server), you can skip the API layer, and query your database directly without risking exposing your database secrets to the client.

• In Next.js, you can create API endpoints using Route Handlers.

• Route Handlers.

• Route Handlers.

• A common way to avoid waterfalls is to initiate all data requests at the same time - in parallel. In JavaScript, you can use the Promise.all() or Promise.allSettled() functions to initiate all promises at the same time. For example, in data.ts, we're using Promise.all() in the fetchCardData() function:

• Good to know: