React Server Component with External API Integration

Display a use-case of a React Server Component fetching data from an external API, rendering the response on the server side before sending it to the client.
import { createFromFetch } from 'react-server-dom-webpack';

// This is your server component which uses fetch to load data from an API
export default function ServerComponent() {
   // Use createFromFetch to create a resource from a fetch call
   const resource = createFromFetch(fetch(''));
   // The resource is read in the render, this will
   // throw a promise if the resource is not yet ready
   // and suspend rendering
   const data =;
   return (
       <h1>Data from API</h1>
       { => (
         <div key={}>{}</div>
This piece of code demonstrates how to create a React server component that fetches data from an external API using createFromFetch to create a data-fetching resource. This resource is then read during rendering. If the data isn't ready, it will throw a promise to suspend the rendering, and once the data is ready, it will display it inside a div element.