Updating My Blog with Server Components

As a blogger, I take pride in my website and want to ensure that it's always up-to-date and optimized for performance. However, life can get busy, and before I knew it, my blog had become long-neglected.

But I'm happy to say that I finally decided to take action and give my blog the revamp it deserves. And to do that, I turned to Next.js 13 and its powerful new feature: React Server Components.

In this post, I'll share my experience with Next.js 13's React Server Components and how it helped me update my blog for better performance and a more streamlined development process. I'll also discuss the benefits of using Next.js 13 for your blog and how you can get started with the platform.

So if you're a blogger looking to improve your website's performance and streamline your development process, keep reading to learn more about my journey with Next.js 13's React Server Components.

Introducing React Server Components

One of the main reasons I updated my blog using Next.js 13 is because of its support for React Server Components. These components run only on the server, reducing bundle size and improving startup time. They can access server-side data sources and seamlessly integrate with client components.

You can even interleave Server and Client Components in a component tree by importing a Client Component into a Server component or passing a Server Component as a child or a prop to a Client Component. Behind the scenes, React will merge the work of both environments.

Component Tree

React Server Components can dynamically choose which client components to render, resulting in faster page load times. They even preserve the client state when reloaded and are rendered progressively, allowing for intentional loading states.

Overall, React Server Components offer a powerful new way to build server-rendered React applications. With Next.js 13, it's now easier than ever to take advantage of this technology and give your blog a boost.

Using Server Components in My Blog

Now that we've covered what React Server Components are, let's take a look at how I'm using them in my blog.

Before updating to Next.js 13, my blog was built using MDX. Most of the blog content was pre-rendered during the build process and served as static HTML pages. However, any dynamic content, such as the number of Github stars, or comments, was loaded client-side and rendered using React. While this approach worked, it had its limitations in terms of performance, particularly for users with slower internet connections. Additionally, since the dynamic content was re-rendered with client-side JavaScript, it can make it harder for search engines to crawl and index the page, which could result in the slower discovery of updates or changes to the content.

But with Next.js 13's support for React Server Components, I was able to move the rendering process to the edge server. Now, when a user visits my blog, the server sends a request to the edge server, which fetches the newest data and renders the MDX file into an HTML page. This process not only improves performance but also ensures that my content is more accessible and search engine-friendly. Additionally, since the edge server handles the rendering, the client side doesn't need to fetch or render anything, further improving the overall performance of the site.

So how does this work in practice? Well, I still write my blog posts using MDX. But now, when I run the build command, Next.js compiles the MDX files into a bundle of React components, including Server Components. These components are then uploaded to the edge server, where they're rendered into static HTML pages using the server's resources. This means that when a user visits my blog, they're actually seeing a real-time pre-rendered HTML page, rather than waiting for JavaScript to render the page on the client side.

For example, on my blog, I use a component called GithubRepo to display information about a GitHub repository. In the past, this component would fetch data from the GitHub API on the client side (a.k.a. your browser), slowing down the initial page load and potentially causing issues with API rate limits. But with Next.js 13's support for React Server Components, the component can now be rendered on the edge server with real-time information about the number of stars, forks, and active issues for a given repository. Additionally, the component also displays language percentage information using a color bar, which is painted in the edge server as well. This not only improves the performance of my blog but also ensures that my readers always see the most up-to-date information without putting unnecessary load on the client's browser.

Improved Performance

One of the biggest benefits of using React Server Components is the significant improvement in website performance. After migrating my blog to Next.js 13, I noticed that the initial JavaScript load size decreased by about 32%, resulting in faster load times and a smoother user experience. This improvement is because Server Components have zero impact on bundle size, as their code is never downloaded to clients. By moving the rendering process to the edge server, I was also able to reduce the time it takes to generate a page, which further improves performance.

All in all, using React Server Components has been a game-changer for my blog. The improved performance and accessibility have made it easier for readers to enjoy my content. With Next.js 13, I was not only able to improve the performance, but also utilize other features such as the new Layouts RFC, which makes it easy to create consistent layouts across pages, and automatic self-hosted fonts, which streamlines the process of using custom fonts on my website. These tools, combined with the power of React Server Components, have allowed me to significantly enhance the user experience of my blog. I'm excited to see what new features and possibilities will emerge in the future.