Servers: Cool Once Again

The recent holiday season brought a wave of jokes suggesting JavaScript's move to the server-side. This trend seems fueled by two key developments:

• Basecamp's Hotwire: This framework, marketed as "HTML over the wire," emphasizes server-side HTML generation, reserving client-side JavaScript for essential tasks.
• React's Zero-Bundle-Size Server Components: This represents React's initial foray into server-side rendering, aiming to optimize performance.

While the marketing is impressive, these approaches build upon established concepts. Hotwire's Turbo, an evolution of Turbolinks, cleverly intercepts internal link clicks. Instead of full page refreshes, it fetches content, inserts it, and updates the URL using History.pushState(), creating a Single Page App (SPA) experience without the SPA complexity. This is particularly appealing for Rails developers using ERB templates.

However, the efficiency of this "HTML over the wire" approach is debatable. The prevailing wisdom has favored minimizing network traffic by sending JSON, requiring client-side templating. This introduces the overhead of loading a client-side library and processing data into the DOM. While "HTML over the wire" avoids these costs, it potentially increases network payload size, assuming HTML is larger than JSON – a questionable assumption. Ultimately, efficiency depends on payload size and processing requirements.

React's new server components challenge the typical client-side focus. Initial previews demonstrate faster rendering, especially with nested components fetching their own data. The network response isn't DOM-ready HTML but a proprietary format (described as "JSON with holes"), representing a React component. This is crucial because the client-side bundle doesn't include the component, allowing efficient state management. This differs significantly from current SSR approaches like Next.js, paving the way for future improvements.

In essence, servers excel at specific tasks. The current trend suggests a shift towards reducing client-side workload, addressing the ever-increasing size of client-side assets. This renewed focus on server-side processing, combined with edge computing, promises significant performance gains.

1. The proprietary format, while relevant for debugging network requests, is primarily for internal React communication and not a public API.
2. Minimal state is passed to the server; the server itself is stateless, primarily handling routing information.

The above is the detailed content of Servers: Cool Once Again. For more information, please follow other related articles on the PHP Chinese website!