Suggest an editImprove this articleRefine the answer for “Can fetch be used directly in a Server Component?”. Your changes go to moderation before they’re published.Approval requiredContentWhat you’re changing🇺🇸EN🇺🇦UAPreviewTitle (EN)Short answer (EN)Yes, **it can** - and it is one of the most typical ways to load data in the App Router. **Key point:** using `fetch` directly in a Server Component is both possible and expected; it is the basic Next.js (App Router) pattern.Shown above the full answer for quick recall.Answer (EN)ImageYes, **it can** - and this is one of the most typical ways to load data in the App Router. In Next.js, **Server Components run on the server**, so `fetch` inside them: - runs **on the server**, not in the browser - can safely use **secrets** (via `process.env`) - supports **caching and revalidation** at the Next.js level - does not increase the client JavaScript bundle (because the code never goes to the client) --- ## How this usually looks logically - A server component renders - Inside it, `fetch()` is called - Next.js waits for the response - It builds the HTML already with the data - It serves the HTML to the user --- ## Default cache: an important point In the App Router, `fetch` in a server component is **usually cached** (for "static" behavior), if: - the request is considered cacheable - you didn't explicitly disable the cache Because of this, people sometimes wonder: "Why doesn't the data update on every page refresh?" Most often it's because the cache is being used. --- ## How to control the behavior ### 1) Always fresh data If you need to get data **on every request** (for example, personal data or fast-changing values), the cache is disabled. The logic: "don't store and don't reuse the response". ### 2) Refresh once every N seconds If you need the data to be "almost fresh", but without a request on every visit, revalidation is set. The logic: "keep the response cached for N seconds, then refresh". ### 3) Static (maximum caching) If the data barely changes, you can leave caching on, and the page will be very fast. --- ## Limitations and nuances ### 1) You cannot use browser things A Server Component has no: - `window` - `localStorage` - `document` - `useEffect` If you need something "after loading in the browser", that's already a Client Component. ### 2) For private data, avoid a shared cache If a request depends on a specific user (cookies/headers/session), it's important to: - either disable the cache - or configure it carefully so you don't cache someone else's data and serve it to another user --- ## Summary **Yes,** using `fetch` **directly in a Server Component is both possible and expected**; it is the basic Next.js (App Router) pattern: - data loads on the server - HTML arrives already filled in - caching and refresh are controlled by settingsFor the reviewerNote to the moderator (optional)Visible only to the moderator. Helps review go faster.