React Server Components with Next.js

Next.js 13 introduced React Server Components (RSC) which bring a powerful new capability to web development. They allow you to render React components on the server (Point to note RSC is not the same as Server Side Rendering despite carrying out renders on the server). This means that you can now render your entire user interface on the server, including dynamic content, without having to rely on JavaScript on the client. Let's dive into how to implement and leverage these components for a smoother, more SEO-friendly web experience.

Implementation Example:

const getCompanies = async () => {
  const res = await fetch('https://fakerapi.it/api/v1/companies?_quantity=5')
  const companies = await res.json()
  return companies.data
}

export default async function Home() {
  const companies = await getCompanies()

  return (
    <ul>
      {companies.map((company) => {
        return <li key={company.name}>{company.name}</li>
      })}
    </ul>
  )
}

 

A few takeaways from the code block:

Asynchronous Code in React Component:
We are using asynchronous operations, directly within the component.

Reduced size of the JavaScript bundle:
As mentioned, this code block is focused on server-side rendering. In this instance the the JavaScript code is not executed on the client, but rather on the server side.

Data Fetching on the Server:
The getCompanies function is designed to fetch data from an external API. This is done on the server, meaning the fetch request is initiated and processed before the component is rendered.

 

When to use RSC?

To Improve the Performance of your Application:
RSC significantly enhance performance by minimising the JavaScript execution required on the client-side.

To Enhance your SEO:
It contributes to better SEO by ensuring that search engines can access and index dynamic content, resulting in higher visibility in search results.

To Improve Data Fetching:
RSC excel at server-side data fetching. By retrieving and rendering data on the server, they reduce the volume of data transferred to the client, thus boosting overall performance.

Some examples of when you might want to use RSCs:

• To render a personalised homepage for each user.
• To render a product page that displays the latest product reviews.
• To render a blog page that displays the latest blog posts.

 

When not to use server side components?

When you need to render highly interactive content:
Server components are not ideal for rendering highly interactive content, such as real-time chat applications or games. This is because server components are rendered on the server, and any interactivity needs to be implemented using client-side code.

Some examples of when you might not want to use RSCs:

• To render a real-time chat application.
• To render a game.

 

Conclusion:

Next.js RSC represent a significant leap forward in crafting performant, SEO-friendly web applications. By strategically employing them, you can streamline your codebase, enhance user experiences, and optimise your site's visibility in search engine results. As you integrate these components into your projects, you'll unlock new levels of efficiency and user satisfaction. Embrace the power of RSC and elevate your Next.js applications to new heights.