07/04/2026
1 min
This example shows a React Server Component built with Next.js App Router, where the component runs entirely on the server instead of the browser. Because it does not include the "use client" directive, it is treated as a server-side component by default. The getPosts function performs a data fetch directly from an external API using fetch, and the option cache: 'no-store' ensures that the data is always fresh on every request. Since the component is declared as async, it can use await to resolve the fetched data before rendering. Unlike client components, there is no need to use hooks like useEffect or useState for data fetching. The data is retrieved on the server and the final HTML is generated before being sent to the client.
.
1// app/posts/page.tsx
2
3async function getPosts() {
4 const res = await fetch('https://jsonplaceholder.typicode.com/posts', {
5 cache: 'no-store', // ensures fresh data
6 });
7
8 if (!res.ok) {
9 throw new Error('Failed to fetch posts');
10 }
11
12 return res.json();
13}
14
15export default async function PostsPage() {
16 const posts = await getPosts();
17
18 return (
19 <div>
20 <h1>Posts</h1>
21 <ul>
22 {posts.slice(0, 5).map((post: any) => (
23 <li key={post.id}>
24 <strong>{post.title}</strong>
25 </li>
26 ))}
27 </ul>
28 </div>
29 );
30}