Server Components Wars: PHP Strikes Back

Hello. Thank you for the warm welcome. And today, we have some fun with a 30-year-old language and React. Because we all love React, right? So I'm Edoardo. I'm a senior dev rel at Storyblok. Storyblok is a headless CMS and it's so beautiful that I don't even have to talk about it.

We will talk about server components. And I want you to focus on this word. Server components run exclusively on the server. You may say, Edo, yeah. We all know about that. We all know that server components run on the server, yeah. I work on open-source SDKs, React SDKs, and next-gen SDKs, and I see the issues, and I see that many of us don't really understand how server components work, React components work.

So I want you to focus on this word and I will take you to a journey through time, and we will start with episode one first. PHP menace. And you remember maybe 30 years ago, this was the web. Some of you were there, some of you were not even born. But this was the web back in the time. And this guy, Rasmus Lerdorf, came up with a clever solution, a scripting language to have dynamic webpages loading data from somewhere, composing pages into something dynamic, right? And PHP was born.

It was called Personal Home Page back then. Now, after three completely rewritten of the core, and now PHP means something completely different and no one knows the meaning of PHP, but now we have PHP that works exactly like that. So we, the client, we make a request to the server. The server knows that the request has to be routed to an index.php or something like that. The index.php must be run by an interpreter. The interpreters have some access to the DBMS API, the POSIX API, some external API. And then the interpreter, the purpose of the script was to generate, is to generate an HTML file. This file then comes back to the server and to the client. This is the whole round trip, right? And the simple PHP component is exactly that. So we start from the top, we connect to a MySQL database, for example. We get some data, and then we have a template, we render data.

So this script executes only once. It never re-renders, and the value sent back to the client remains unchanged. Now, we transition to the PHP empire era. Previously, client requests waited for server processing completion. A shift occurred, moving the rendering process to the client side. Despite this change, some data fetching still required server calls. In 2013, a significant event unfolded as Facebook introduced React, despite their PHP foundation. React and JSX emerged from Facebook's PHP-centric infrastructure, featuring XHP as a PHP subset with XML fragments embedded in PHP code.

Following the PHP legacy, isomorphic JavaScript and server-side rendering became mainstream. The process begins with a server request, transferring data to the backend for shell rendering. The result encompasses HTML and JS, facilitating the client-side contentful paint. The evolution from PHP dominance to React and modern JavaScript patterns signifies a significant shift in web development paradigms, emphasizing server-side rendering and dynamic client-side interactions.

So Facebook met up. Facebook back then created React. And you may think that they love JS very much, right? But if I tell you that actually their whole infrastructure, their whole backend, their whole software was based on PHP and still much of it is. So React and JSX was born after their hard work on PHP. They actually came up with a subset, no, a super set of PHP called XHP, which is this thing where you basically have XML fragments into PHP code. This is XHP. This is also the GitHub repo for this thing. And you may recognize something here. Yes, you are correct. So basically, PHP, okay.

Now, after that, you know that we have something new. We have the isomorphic JavaScript, universal JavaScript, whatever. So the server-side rendering, another pattern. So now we start from a request to the server. The server sends something to the node backend or whatever. We have a shell rendered. So we have some HTML and JS. So we have the first contentful paint in the client. But then we need the data. So we need to request data. So we have another round trip. It's called hydration. So we go back to the server. The server again goes back to the node backend. Node backend fetches some content from a DBMS, POSIX, or a headless CMS as beautiful as Storyblok. And then we have the content render. We send the content back to the server, then the client, and this is the largest contentful paint, right?

So finally, we have PHP strikes back. Why? Because we have many problems with server-side rendering. You know, it requires hydration. We have the bundle, which is massive.

We have complexity. The SEO is difficult. State management is a mess. So React server components.

Finally, I have two minutes to introduce you to React server components, but I will be very quick. So React server components. Basically, you make a request to the server. The server requests something to index.js processed by node. Node requests some content from the backend, DBMS, a wonderful headless CMS, and then renders an HTML. HTML gets sent back to the server, and then back to the client. There can be some client-side rendering on top of that made by probably React.

Now, this is a simple React server component, right? We start from the top. So we get some data from the DB, MySQL, for example. When we fetch some data, when we have a template, we render that trending products, right? And this executes once every request. It never re-renders, and the rendered value is sent back to the client and never changes. Hmm, I remember something similar, right? Yeah, you are correct, and also Leah approves.

So my message for you today is don't believe the hype. So every new trend, everything is just hype. So I want you to study patterns, to focus on patterns, because if you really understand patterns, you can easily move from a framework to a new one, from a pattern to a new one. You get to understand the basics, right? And that's it for you today. Thank you very much. You can find me online and on the boot upstairs. Thank you. Thank you. Thank you. Thank you.