A tale of webpage speed, or throwing away React
Most people here are criticizing the author for doing some dumb things. I concur, but still think they have a good point.<p>First, keep in mind that the author&#x27;s use case is a content-heavy app with sprinkles of interactivity. This is <i>very</i> important because it sets the &quot;webpage speed&quot; goalpost to a concrete place: they want good lighthouse&#x2F;first load times and good SEO.<p>I&#x27;ve fallen into the same pit before. I&#x27;ve used Create React App with a custom server-renderer, Gatsby and Next in different projects. None of the solutions is truly satisfactory for the author&#x27;s use case for a single very strong reason: React&#x27;s hydration process is both blocking and slow. I hope that sooner rather than later React is able to offer a good solution for incremental hydration, but it seems quite far for now.<p>Once you realize this, the only way to keep using React is to step out of the mainstream and play with multiple render roots, parts of the page that never get hydrated and so on. It is <i>possible</i> to do things here, but it is definitely a rocky path.<p>Of course, there are many wrong things the author explains that you can avoid, but I&#x27;ll throw a bone to them here too. Most &quot;wrong things to do&quot; they explain are both wrong and understandable. And they openly accept it.<p>For instnace, one wrong thing to do that I&#x27;ve had to fight against a lot is JS-based device-specific rendering. It is so much easier to implement a &quot;mobile ? &lt;MobileScreen &#x2F;&gt; : &lt;DesktopScreen &#x2F;&gt;&quot; than to make a single screen that adapts properly using CSS that it&#x27;s not even funny. Unfortunately, it also breaks SSR, leads to janky page-loads and poor performance.<p>I fully agree that as of today and for content-heavy sites React pushes you towards a pit of despair instead of a pit of success. You <i>can</i> make it work, but ... is it worth it?