Next 13 - Data fetching

Looking to get into development? As a full-stack developer I guide you on this journey and give you bite sized tips every single day 👊

Fetching data

The recommended way of fetching data is using server components, as discussed in the previous article.

According to the docs, there are a lot of benefits from fetching from server components:

Access to backend services like database and API that don't run on the client

Keep your secure keys on the server so they don't leak to the client

Fetch and render in the same environment

Caching your renders on the server

Send less JavaScript to bundle

One important note is that they recommend you refetch data over passing it down. Underwater, they deduplicate your requests and return cached results. So it's more efficient to have the server do the heavy lifting, and the client requests the data.

How does the fetching work?

They changed to use the fetch Web API, which is fantastic. It's a super powerful API, so happy to see this choice.

Fetch will always return a promise so we can await the result; by default, it's a cached request/results.

Let's show you an example.

In our component, we can create a data fetching function that would look like this.

async function getData() { const res = await fetch('https://jsonplaceholder.typicode.com/todos'); return res.json(); }

Our component itself can then use this function like this.

export default async function AccountPage() { const table = await getData(); return ( <ul> {table.map((todo) => ( <li key={todo.id}>{todo.title}</li> ))} </ul> ); }

And yep, that's it, simple. I like the abstraction of thought here to simplify everything using native APIs.

It's also a great abstraction to move towards a unique concern architecture by simply making the components as small and self-sufficient as possible.

We also get many options around the fetch API that we can leverage, but it might be best to review them once we need them.

Thank you for reading, and let's connect!

Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on Facebook or Twitter

Next 13 - Data fetching

Comments

More from this blog

I wrote 1000 articles, what’s next?

Vendure community and more

Deploying Vendure

Vendure - Overwriting email templates

Customizing vendure

Fetching data

How does the fetching work?

Thank you for reading, and let's connect!

Command Palette

Comments

More from this blog

Fetching data

How does the fetching work?

Thank you for reading, and let's connect!