bhylu.com

Advertisements

React Server Components

Recognize the architecture boundary without pretending that an ordinary Vite lab implements a Server Components framework.

How it works

Server Components run in a framework-supported server environment and can keep selected data work out of the browser bundle. Client components handle interactive state and browser APIs at the appropriate boundary. A standalone Vite client project does not become that architecture by adding an async component or a use server string. This lesson keeps a small interactive fixture in the browser and explains what a separate server-capable framework would need to provide.

Run the code

Use a separate empty lab folder with Node 22.12+ in the 22 series. Save the files below using their displayed paths; browsers may download only the basename, so create src, public or tests folders as listed. The pinned project uses React and React DOM 19.3.1 with Vite 7.3.1. Run npm install, then npm run dev and open the local address Vite prints. React examples do not run in Bhylu’s current playground.

No Apache, MySQL or change to Bhylu’s server configuration is needed. These are local teaching projects, not a publishing package. Keep generated dependencies and lockfiles in your own lab. Review the project setup.

Example

src/main.jsx

import React, { StrictMode, useState } from 'react';
import { createRoot } from 'react-dom/client';
import './style.css';

function App() {
  const [open, setOpen] = useState(false);
  return (
    <main>
      <h1>Neighbourhood lending desk</h1>
      <p>This fixture is a client-rendered React app.</p>
      <button onClick={() => setOpen((value) => !value)}>
        Show architecture boundary
      </button>
      {open && (
        <p id="boundary">
          Server data access needs a separately configured framework and authorization
          policy.
        </p>
      )}
    </main>
  );
}

createRoot(document.getElementById('root')).render(
  <StrictMode>
    <App />
  </StrictMode>,
);

Expected result

The browser fixture toggles an architecture note. It performs no server data access or Server Function invocation.

Choose a maintained framework when you need routing, data loading, streaming or Server Components integration. Verify its supported versions and deployment model. Code shipped to the browser cannot safely contain database credentials, and a server function still needs authorization and validation. The preceding renderToString and hydration labs prove their narrower contracts, not the operation of a full server-component protocol.

For API contracts and version differences, use React’s official documentation.

Advertisements