This post was updated October 2023 to reflect the latest React Server Component capabilities.
An in-depth look at React Server Components and how you can take advantage of this now stable feature using our NextJS starter app.
With the introduction of React 18 in 2022, React Server Components (RSC) were initially introduced as an experimental feature. Since then, they've matured into a stable capability with a lot of great benefits. Follow along as we explore the basics of what React Server Components are, how to effectively build them in the context of our NextJS sample app, and what to expect from RSC in the near future as the capability continues to evolve!
We’ll cover:
- Benefits and limitations of RSC
- Quickstart: Writing a React Server Component
- Current and future state of RSC
- RSC x Miro (explore our sample app!)
React Server Components: Why use them?
There’s a reason that React has invested time and resources developing React Server Components (and partnered with Vercel/NextJS): they’re efficient, in-demand by developers, and offer simple ways to improve the overall performance of any dependency-heavy application.
React Server Components render server-side first. By rendering React components server-side first, it means we can enjoy each of the benefits below. 🤓
Improved performance
- Reduce the load time for apps with big bundles
- Since RSC are not included in the app bundle, they don’t contribute to its size, meaning smaller bundles and apps overall (see the MomentJS example above)
Direct access to your backend
- RSC allow direct access to your backend and database, enabling fast data fetching
More dynamic than standard server side rendering
- RSC can be re-fetched multiple times to re-render data (unlike traditional server side rendering, which typically happens once—on initialization)
Use them alongside client and shared components
- You can use a mix of client side and server side components (denoted by their extension), as needed. Shopify does a great job of visualizing this:
(Source: Shopify, Custom Storefronts / Hydrogen / Framework / RSC)
As with any newer capability, there are going to be aspects that are continuing to evolve, or perhaps some unanswered questions about which direction things are headed in the future. We’ll call out what we do know later on, but it’s a good time to be explicit about some current limitations (as of this writing):
- Again, RSC are continuing to evolve, stay up to date on the latest in the official NextJS documentation
- RSC are not intended for the interactivity that a typical frontend or set of client-side components would offer. They should be used thoughtfully, and aren’t an answer to all our frontend woes!
It’s strongly recommended to stick to the NextJS structure for leveraging RSC (instead of trying to create your own, standalone react server component bundles), due to the complexity and evolving nature of RSC.
Get your hands dirty
With the stable release of RSC in NextJS, we decided to get our hands dirty and have some fun.
And speaking of sticking to the NextJS structure/boilerplate for leveraging React Server Components, that’s exactly what we’ve done in our Miro app. In addition to testing out RSC, we wanted to add a little bit of our own twist to things. So, we created a Miro-inspired application that both helped us explore RSC and create a more visually robust app. As a bonus, we used Miro as our authorization provider in order to kill two birds with one stone. 😎
You can clone the moment-time branch of our GitHub repo and start playing around. To get up and running:
- Clone the repo
- From the root, run
git checkout origin/moment-time - Create a
.envfile with the following credentials:
MIRO_CLIENT_ID=""
MIRO_CLIENT_SECRET=""
MIRO_REDIRECT_URL="http://localhost:3000/auth/redirect/"
- Reference the
README.mdfor steps to generate Miro Client ID and Miro Client Secret - Run
npm install - Run
npm run startand visit localhost:3000
Before diving into our starter app, you’ll want to make sure you’re up to speed with the basic conventions for writing react components, and it doesn’t hurt to review the official NextJS documentation on React Server Components.
By default, any components included in the app directory of your NextJS app will be rendered on the server as React Server Components. See an example in our app's page.tsx file, where we import a large package, MomentJS. But because this component is within the app directory, it will render server-side first and the frontend bundle size will remain untouched.
You can also use client components within the app directory, but you will need to be explicit about this in your component file. This requires the use client directive to ensure the file is loaded client side. See an example of this in our TimeDifference.tsx file, where we create a client component to show the change in time in realtime. This is an example of how you might use client components to complement server components — for situations where you want to add interactivity (think of timers, stock updates, flight details, etc.).
Write your first React Server Component
Write your first React Server Component in NextJS, in just a few simple steps:
- Inside your NextJS project, navigate to the
appdirectory - Create a new component
- Call this component from the main
index.jspage (or if you're using our sample app,page.tsx).
This component should render server-side first. To verify, load page.tsx (or whatever page you wish to call the component in) and check out the page’s source code. You’ll see your server component reflected directly in the html markdown.
Miro Sample App
Let’s take a look at a specific example in our sample app here. We’re leveraging the moment.js NPM package to generate today’s date-time server-side. In our page.tsx file, we’re importing MomentJS and returning it in our HTML.
// app/page.tsx
import moment from 'moment'
[...]
return (
<div className="grid wrapper">
<time>
{moment().format('MMMM Do YYYY, h:mm:ss a')}
</time>
[...]
</div>
)
And when we go to our app and inspect the page source, we’ll see our server component has been directly injected into the HTML on our frontend:
In contrast, when we look at TimeDifference.tsx in our sample app, we are using the use client directive at the top of the file to ensure the component is loaded client-side. You'll notice in the page source this is reflected as follows, since the time difference is rendered client-side:
Further exploration
Okay, so we’ve talked a bit about RSC and we’ve seen how we’re using it in our Miro sample app—but this is just the tip of the iceberg!
We’ve used the MomentJS example to leverage RSC in our app, but there are other use cases that you can test out. Here are a couple of ideas to keep the momentum going:
- Create a new server component in our sample app that leverages a different dependency. For example, any larger NPM packages are great candidates to keep server-side!
- Take an existing or older React app of your own and groom through your components to see if you’re currently including any heavy dependencies on your frontend. If so, try and convert these to server-side components!
- Show us what you build!
The state of RSC: Now and next
We’ve only scratched the surface of using React Server Components, but there’s so much more that can be done to leverage their efficient, performance-improving abilities.
Luckily, the NextJS team thinks so too, so they’ve included it in their latest stable releases and we can look forward to more improvements in the future.
Build the next big thing with NextJS and Miro
If you found this quickstart on using React Server Components and our sample app helpful, let’s keep it going!
Build any app or integration that leverages React + Miro’s REST API, Web SDK, or Live Embed, and share it with us on our developer community Discord server!
Any functioning app that leverages one of these Miro capabilities is eligible to potentially be promoted more broadly in our community, and we’d love to share some exclusive Miro swag with you. 🚀
Check out our other sample apps for some more inspiration. We can’t wait to see what you build!
Did you like seeing how you can leverage the Miro Developer Platform in conjunction with React? For more inspiration or questions, follow along with our Developer Community on YouTube, GitHub, and Discord.
Top comments (1)
This is an excellent article. This is, in my opinion driving directions, one of the best posts ever written. Your work is excellent and inspiring. Thank you very much.