I have the following basic code in two separate files designed to test server components in the React 19 beta:
// file: App.jsx
'use client';
import React, { Suspense, useState } from 'react';
import TestServer from './TestServer';
import clsx from 'clsx';
export default function App() {
const [red, setRed] = useState(false);
return (
<div className={clsx("p-3 m-3", red && "border border-2 border-danger")}>
<Suspense fallback={<p>Loading...</p>}>
<header>
<h1>React 19 Test</h1>
<TestServer timeout={2000} />
<button onClick={() => setRed(!red)}>Toggle Red Border</button>
</header>
</Suspense>
</div>
);
}
// file: TestServer.jsx
'use server';
export default async function TestServer({timeout = 1000}) {
const response = await new Promise((resolve) => {
setTimeout(() => {
resolve('Server is running');
}, timeout);
});
return <p>{response}</p>;
}
This seems to work as expected when I run it. The component suspends for 2 seconds, showing the loading text, then displays the response and button until you press the button, at which point it restarts the process with the updated “red” value, which is demonstrated by an outline.
However, looking into the console I get the warnings async/await is not yet supported in Client Components, only Server Components. This error is often caused by accidentally adding `'use client'` to a module that was originally written for the server.
and A component was suspended by an uncached promise. Creating promises inside a Client Component or hook is not yet supported, except via a Suspense-compatible library or framework.
The way I’m reading this, I think my server component is being run on the client still, thus the fact that I manually create a promise and set the TestServer
component to be async triggers the warnings. What is the correct way to implement this test such that these warnings do not appear?