React are introducing a new kind of component - Server Components - that run ahead of time and are excluded from your JavaScript bundle. Server Components can run during the build, letting you read from the filesystem or fetch static content. They can also run on the server, letting you access your data layer without having to build an API. You can pass data by props from Server Components to the interactive Client Components in the browser.
RSC combines the simple “request/response” mental model of server-centric Multi-Page Apps with the seamless interactivity of client-centric Single-Page Apps, giving you the best of both worlds.
Since our last update, we have merged the React Server Components RFC to ratify the proposal. We resolved outstanding issues with the React Server Module Conventions proposal, and reached consensus with our partners to go with the "use client" convention. These documents also act as specification for what an RSC-compatible implementation should support.
The biggest change is that we introduced async / await as the primary way to do data fetching from Server Components. We also plan to support data loading from the client by introducing a new Hook called use that unwraps Promises. Although we can’t support async / await in arbitrary components in client-only apps, we plan to add support for it when you structure your client-only app similar to how RSC apps are structured.
Now that we have data fetching pretty well sorted, we’re exploring the other direction: sending data from the client to the server, so that you can execute database mutations and implement forms. We’re doing this by letting you pass Server Action functions across the server/client boundary, which the client can then call, providing seamless RPC. Server Actions also give you progressively enhanced forms before JavaScript loads.
React Server Components has shipped in Next.js App Router. This showcases a deep integration of a router that really buys into RSC as a primitive, but it’s not the only way to build a RSC-compatible router and framework. There’s a clear separation for features provided by the RSC spec and implementation. React Server Components is meant as a spec for components that work across compatible React frameworks.
Here's a concise guide on how to use React Server Components in bespoke app development:
1. Setting Up Your Project:
Begin by creating a new React app or integrating React into your existing project. Ensure that you're using a version of React that supports Server Components.
npx create-react-app my-server-components-app
cd my-server-components-app
2. Install React Experimental Builds:
As React Server Components are experimental, you'll need to use the experimental build of React.
npm install react@experimental react-dom@experimental
3. Configure Babel:
Ensure that your Babel configuration is set up to support experimental features.
{
"presets": ["@babel/preset-env", "@babel/preset-react"],
"plugins": [
"@babel/plugin-syntax-jsx",
["@babel/plugin-transform-react-jsx", { "runtime": "automatic" }]
]
}
4. Create a Server Component:
Server Components are created using the .server.js extension. For example:
export default function MyServerComponent(props) {
return <div>{props.message}</div>;
}
5. Use Server Component in Client:
You can use the server component in your regular React components.
import React from 'react';
import MyServerComponent from './MyServerComponent.server.js';
function App() {
return (
<div>
<h1>Hello from the Client!</h1>
<MyServerComponent message="Hello from the Server!" />
</div>
);
}
export default App;
6. Run Your App:
Start your development server and check if everything is working.
7. Server-Side Rendering (SSR):
One of the key benefits of RSC is Server-Side Rendering. Ensure that your server supports SSR for React Server Components.
8. Handling Data Fetching:
RSC enables efficient data fetching on the server. You can use hooks like useEffect to fetch data without impacting the client-side performance.
9. Optimizing Performance:
Leverage the lazy loading nature of RSC to optimize your app's performance by sending only the necessary components to the client.
10. Testing and Debugging:
Use the tools provided by React and your browser's developer tools to test and debug your React Server Components.
Remember, as of my last update, React Server Components are experimental, and the APIs and best practices may evolve. Always refer to the official React documentation and community discussions for the most up-to-date information.