Member-only story
The Yin and Yang of Next.js 13 — Understanding Server Components and Server-Side Rendering
Hello friends! It’s been a while since I wrote a blog post. With a new baby at home, I have been super busy!
Today, we’re going to tackle two buzzwords that have been floating around the React ecosystem: Server Components and Server-Side Rendering (SSR). There seems to be a sense of confusion among the newbies in the React community in grasping these two concepts.
Let’s demystify them and see how they differ in this blog post!
Whats new in Next.js 13 ?
Before we get started let’s see what’s new in Next.js 13.
In Next.js 13, there is a new App Router within the directory /app. This contains support for React’s Server Components, and several other new features and opitmizations. All of this is still new and recently the /app folder has been marked stable with version 13.4.
The good news is you can now use the /app folder in production, and tap into some of the new features like Server Components. But since everything is so new, there is still some confusion in the community on how to use Server Components, and the real performance benefits. This is still evolving and in a few months, I am sure there will be much more clarity than what we have today.
Alright, now let’s get started with what we know so far.
Server Components
Server Component is a new concept that has been introduced in React 18, and been adopted by Next.js 13 within the /app folder.
Server Components allow you to render components on the server, and reduce the amount of JavaScript sent to the client.
All components inside the Next.js /app directory are Server Components by default.
