React Advanced Features: Server Components
An exciting feature coming to React 18
What are React Server Components?
React Server Components allow the server and the client (browser) to collaborate in the rendering of a React application.
A typical React element tree renders the Parent Component which, in turn, renders the Child Components. Server Components makes it possible for some components in this tree to be rendered by the server, and some components to be rendered by the browser.
Why do we need React Server Components?
Before React Server Components, all React components are “client” components — they are all run in the browser. When your browser visits a React page, it downloads the code for all the necessary React components, constructs the React element tree, and renders it to the DOM.
The browser is a good place for this, because it allows your React application to be interactive — you can install event handlers, keep track of state, mutate your React tree in response to events, and update the DOM efficiently.
So why would we want to render anything on the server?
- The server has more direct access to your data sources — be they your databases or the file system. The server can directly fetch the data you need without hopping through some public API endpoint, and it is usually more closely located with your data sources, so it can fetch the data more quickly than a browser can.
- The server can make well use of “heavy” code modules, like an npm package for rendering markdown to html, because the server doesn’t need to download these dependencies every time they’re used — unlike the browser, which must download all used code as JavaScript bundles.
Naming components “for server” and components “for client”
The React team has defined this based on the extension of the file that the component was written in: if the file ends with .server.jsx, it contains server components; if it ends with .client.jsx, it contains client components. If it has neither, then it contains components that can be used as both server and client components.
Server Components may render Client Components (and native HTML elements), but Client Components cannot render or import Server Components, since Server Components cannot run in the browser and may have code that does not work in the browser.
What if the client component depends on server components? While you can’t import and render Server Components from Client Components, you can still use Composition — that is, the client component can still take in props for example, as children may happen to be rendered by server components.
// ClientComponent.client.jsx
export default function ClientComponent({ children }) {
return (
<div>
<h1>Hello from client land</h1>
{children}
</div>
)
}// ServerComponent.server.jsx
export default function ServerComponent() {
return <span>Hello from server land</span>
}// OuterServerComponent.server.jsx
// OuterServerComponent can instantiate both client and server
// components, and we are passing in a <ServerComponent/> as
// the children prop to the ClientComponent.
import ClientComponent from './ClientComponent.client'
import ServerComponent from './ServerComponent.server'
export default function OuterServerComponent() {
return (
<ClientComponent>
<ServerComponent />
</ClientComponent>
)
}
These restrictions may have implications on how you organize your components to better take advantage of React Server Components.
Side note: Here’s a video on Data fetching with React Server Components.
Server Components is not the same as Server-Side Rendering (SSR)
It’s a bit confusing because they both have “server” in the name, and they’re both doing work on the server. Using React Server Components does not require using SSR, and vice versa! SSR simulates an environment for rendering a React tree into raw html; it does not differentiate between server and client components, and it renders them the same way!
Conclusion
In short, React Server Components make it possible for the server and the browser to do what they do best. You can expect to start using this in React v18, which should be released out to the public later this year (2022).
React Server Components are still in research and development and experimental feature in Next.js.
Build composable web applications
Don’t build web monoliths. Use Bit to create and compose decoupled software components — in your favorite frameworks like React or Node. Build scalable and modular applications with a powerful and enjoyable dev experience.
Bring your team to Bit Cloud to host and collaborate on components together, and greatly speed up, scale, and standardize development as a team. Start with composable frontends like a Design System or Micro Frontends, or explore the composable backend. Give it a try →
