Is it better to fetch data once and save it in state or to refetch it with server functions in next js 13?

I am currently working on a next js project, and I have a question about data fetching. In the latest version of next js, there is the ability to fetch data directly from the database through server components. In older versions of next js, you would fetch data and then save it to a state and update the state locally whenever your data changes. You would likely also use a context to share data between components and pages. My question is which method is better in terms of performance and in terms of code quality. Also, in server components how do you share data between pages and how do you update data when it is changed? I believe there is a revalidate option, but I am not sure about that.

Fetching is better, but fetching many times makes the server busy, so you can use caching solution.

You can create a page with NO SSR, instead you can fetch data with SWR.
It's clear if you have to get data from your API, you have to create another page in /api direction to response the requests from client.

This lib created by NextJS developers. It will cache fetched data and prevents your server from many requests.
You can install and read documents in here:
https://swr.vercel.app/