โลกของการพัฒนาเว็บใช้เวลาเกือบหนึ่งทศวรรษในการพยายามโน้มน้าวตัวเองว่าเบราว์เซอร์ควรเป็นผู้รับภาระงานหนัก เราเริ่มต้นจากเอกสารและฟอร์ม จากนั้นก็ค่อยๆ ย้ายทุกการทำงานที่จินตนาการได้ไปไว้ที่ฝั่งไคลเอนต์ ทั้งการกำหนดเส้นทาง (Routing), การจัดการสถานะ (State management), การดึงข้อมูล (Data fetching), ตรรกะการเรนเดอร์ (Rendering logic) หรือแม้แต่การจัดการคิวรีฐานข้อมูลผ่าน GraphQL — ทั้งหมดนี้ถูกย้ายเข้าไปอยู่ใน JavaScript bundles ที่มีขนาดใหญ่ขึ้นเรื่อยๆ ในทุกการปล่อยเวอร์ชัน เฟรมเวิร์กเพิ่มจำนวนขึ้น ไพป์ไลน์การบิลด์ (Build pipelines) มีความซับซ้อนมากขึ้น และสิ่งที่เริ่มต้นจากการทำให้แอปพลิเคชันรู้สึกรวดเร็วลื่นไหล กลับกลายเป็นสถาปัตยกรรมที่หน้าเว็บไม่สามารถเรนเดอร์พิกเซลที่มีความหมายได้แม้แต่พิกเซลเดียว จนกว่าโค้ดขนาดหลายเมกะไบต์จะถูกดาวน์โหลด แปลผล และประมวลผลเสร็จสิ้น

การเปลี่ยนแปลงนั้นช่วยแก้ปัญหาที่เกิดขึ้นจริง หน้าเว็บที่เรนเดอร์จากเซิร์ฟเวอร์ (Server-rendered pages) พร้อมกับการใช้ jQuery เล็กน้อยนั้นยากที่จะมอบการเปลี่ยนผ่านที่ราบรื่นเหมือนแอปพลิเคชันตามที่ผู้ใช้คาดหวัง Single Page Applications (SPA) ช่วยให้เรามีการนำทางที่รวดเร็ว มีสถานะที่คงอยู่ และมีการโต้ตอบที่หลากหลาย แต่ต้นทุนที่ตามมาก็สะสมมากขึ้นเรื่อยๆ ปัจจุบันทีมพัฒนาต้องจัดการกับที่เก็บสถานะฝั่งไคลเอนต์ (Client-side state stores) ที่ซับซ้อน ต้องรับมือกับ JavaScript bundles ขนาดมหึมา ต้องดูแลเลเยอร์การซิงโครไนซ์ข้อมูลที่จุกจิก และต้องดีบั๊กไพป์ไลน์การบิลด์ที่บางครั้งให้ความรู้สึกเหมือนเป็นงานประจำอีกอย่างหนึ่ง เราแลกปัญหาชุดหนึ่งกับปัญหาอีกชุดหนึ่ง และนักพัฒนาจำนวนมากกำลังตั้งคำถามว่า ทุกแอปพลิเคชันจำเป็นต้องจ่ายต้นทุนนี้จริงหรือ

มีการพัฒนาสองอย่างที่ทำให้คำถามนี้ตอบได้ง่ายขึ้น

HTMX และการกลับมาของ Hypermedia

อย่างแรกคือ HTMX หากมองเพียงผิวเผิน มันดูเหมือนไลบรารีขนาดเล็ก แต่ผลกระทบทางสถาปัตยกรรมของมันนั้นยิ่งใหญ่ HTMX ปฏิบัติต่อ HTML ในฐานะรูปแบบดั้งเดิม (Native format) สำหรับตรรกะของแอปพลิเคชัน แทนที่จะมองว่ามันเป็นเพียงเปลือกที่หยุดนิ่ง (Static shell) ที่ต้องรอให้ JavaScript มาเติมเต็ม

นี่คือสิ่งที่เปลี่ยนไปในทางปฏิบัติ ตามปกติแล้ว เมื่อผู้ใช้คลิกปุ่มเพื่อโหลดความคิดเห็นเพิ่มเติม ฝั่งหน้าบ้าน (Frontend) จะส่งคำขอ fetch, รับข้อมูล JSON payload, นำข้อมูลไปจัดระเบียบใน client-side store, รันผ่านเทมเพลตคอมโพเนนต์, เปรียบเทียบความต่างของ virtual DOM และสุดท้ายก็อัปเดตหน้าเว็บ (Patch the page) แต่ HTMX จะตัดวงจรนั้นออกไป ตัวปุ่มเองจะมีแอตทริบิวต์ที่บอกเบราว์เซอร์ว่าต้องส่งคำขอไปที่ไหนและต้องแทนที่องค์ประกอบใดบนหน้าเว็บ เซิร์ฟเวอร์จะส่งชิ้นส่วน HTML (HTML fragment) กลับมา — ซึ่งก็คือแค่ความคิดเห็นใหม่ที่ห่อหุ้มด้วย div แล้วเบราว์เซอร์ก็จะสลับเอาข้อมูลนั้นมาใส่แทนที่ โดยไม่มี JSON, ไม่มีโครงสร้างสถานะฝั่งหน้าบ้าน (Frontend state tree), ไม่มีอัลกอริทึมการประสานข้อมูล (Reconciliation algorithm) และไม่ต้องใช้ JavaScript แบบ imperative เพื่อรักษา UI ให้ตรงกับเซิร์ฟเวอร์

นี่ไม่ใช่การปฏิเสธการพัฒนาสมัยใหม่ แต่มันคือการปฏิเสธความซับซ้อน (Abstraction) ที่ไม่จำเป็น HTMX พิสูจน์ให้เห็นว่า Hypermedia ซึ่งเป็นรูปแบบสถาปัตยกรรมที่ขับเคลื่อนเว็บยุคแรกเริ่ม ยังคงสามารถรองรับอินเทอร์เฟซที่ซับซ้อนได้เมื่อจับคู่กับความสะดวกในการใช้งาน (Ergonomics) สมัยใหม่ องค์ประกอบใดๆ ก็สามารถส่งคำขอได้ ไม่ใช่แค่ฟอร์มหรือลิงก์ ทุกเหตุการณ์ (Event) สามารถกระตุ้นการอัปเดตได้ และเซิร์ฟเวอร์ยังคงเป็นแหล่งข้อมูลที่ถูกต้องเพียงหนึ่งเดียว (Source of truth) ทั้งในด้านข้อมูลและการนำเสนอ

Declarative Partial Updates ของ Chrome

การเปลี่ยนแปลงที่สองนั้นใหม่กว่าและอยู่ในตัวเบราว์เซอร์เอง Chrome กำลังนำเสนอ Declarative Partial Updates หรือ DPU ฟีเจอร์นี้ช่วยให้เบราว์เซอร์สามารถสตรีม HTML และแทรกมันลงในส่วนที่กำหนดเป้าหมายของหน้าเว็บได้โดยตรงในขณะที่ข้อมูลไบต์กำลังมาถึง

ก่อนที่จะมี DPU หากคุณต้องการสตรีมข้อมูลสดเข้าไปในหน้าเว็บ โดยทั่วไปคุณต้องใช้ WebSockets, Server-Sent Events หรือ long-polling ควบคู่ไปกับการจัดการ DOM ด้วยตนเอง ฝั่งหน้าบ้านต้องจัดการการเชื่อมต่อ, แปลผล payload และตัดสินใจว่าจะฉีด markup เข้าไปที่ไหนและอย่างไร DPU เปลี่ยนสมการนี้โดยทำให้กระบวนการเป็นแบบประกาศ (Declarative) นักพัฒนาเพียงแค่ระบุคอนเทนเนอร์เป้าหมาย แล้วเบราว์เซอร์จะจัดการส่วนที่เหลือเอง ทั้งการรับสตรีม, การแปลผลชิ้นส่วนข้อมูล และการวางมันลงในตำแหน่งที่ถูกต้อง แม้กระทั่งก่อนที่การตอบสนองทั้งหมดจะสิ้นสุดลงก็ตาม

ลองนึกถึงแดชบอร์ดสำหรับตรวจสอบ (Monitoring dashboard) ที่แสดงล็อกของเซิร์ฟเวอร์ หรือคิวสนับสนุน (Support queue) ที่อัปเดตแบบเรียลไทม์ ด้วย DPU แบ็กเอนด์จะส่งชิ้นส่วน HTML เปล่าๆ ออกมาในขณะที่มันถูกสร้างขึ้น เบราว์เซอร์จะสตรีมพวกมันเข้าไปในส่วนเนื้อหาตาราง (Table body) หรือคอนเทนเนอร์ฟีด (Feed container) โดยไม่ต้องเขียนตรรกะการสตรีมฝั่งไคลเอนต์แม้แต่บรรทัดเดียว การประกอบข้อมูลเกิดขึ้นในระดับ Native

โมเดลแบบ Server-First

เมื่อนำ HTMX และ DPU มารวมกัน คุณจะได้สถาปัตยกรรมที่สอดประสานกัน โดยที่เซิร์ฟเวอร์เป็นเจ้าของสถานะและสร้าง UI ในขณะที่เบราว์เซอร์จัดการเรื่องการแสดงผลและการรับข้อมูลจากผู้ใช้ เฟรมเวิร์กฝั่งแบ็กเอนด์อย่าง Rails, Laravel, Django, Go templates หรือ ASP.NET จะกลับมาเป็นเลเยอร์อินเทอร์เฟซหลักอีกครั้ง ฝั่งหน้าบ้านไม่ใช่แอปพลิเคชันแยกต่างหากที่คอยเรียกใช้ API แต่เป็นอินเทอร์เฟซแบบ Hypermedia ที่เซิร์ฟเวอร์สร้างขึ้นมา

This model fits a surprisingly wide slice of software. Consider the typical SaaS application. It is dashboards with sortable tables. It is admin panels with forms and filters. It is internal tools that move records from one state to another. It is CRUD workflows that show a list, expose a detail view, and let the user edit fields. It is even AI interfaces where a language model streams tokens back to the user, and each token or paragraph can be wrapped in HTML and appended to the conversation thread. For all of these, a thick JavaScript client is often overkill.

The benefits are immediate and practical. Initial page loads are faster because the first meaningful paint arrives as HTML, not after a hydration cycle completes. JavaScript payloads shrink because there is no virtual DOM, no client-side router, and no state management library to ship. Search engines see complete content without executing bundles, so SEO works by default. Complexity drops because one codebase handles routing, business logic, and rendering. Debugging gets easier. When something looks wrong, you inspect the Network tab and see exactly what HTML the server sent. There is no opaque client-side state object to reverse-engineer.

What About React and Heavy Clients?

None of this means React is dead, or that SPAs are a mistake. Complex, editor-grade applications still need a thick client. Figma runs a C++ engine compiled to WebAssembly inside the browser because server round-trips would make drawing impossible. Canva manipulates the canvas at sixty frames per second with client-side geometry. Google Docs uses operational transforms to resolve editing conflicts in milliseconds. These tools are essentially desktop applications delivered through a browser tab. They are not going back to server-rendered forms.

But most software is not Figma. Most software is not a real-time graphics editor. Most software is a reporting screen, a configuration panel, a booking flow, or a content management form. For that long tail of applications, shipping hundreds of kilobytes of JavaScript framework just to toggle a modal or fetch a list of records never made much sense. The economics of the stack are shifting. We are rediscovering that the server can be close to the user thanks to the edge, and that the browser itself has grown capable enough to update fragments without a framework intermediating every byte.

The Pendulum Finds a Balance

The arc of web architecture is swinging back toward simplicity, but it is not a naive return to the nineties. The browser is becoming smarter. Features like DPU do not replace developer ingenuity; they absorb the patterns we used to implement by hand — streaming, partial updates, targeted DOM insertion — into the platform itself. HTMX gives us the vocabulary to express those behaviors without reconstructing a miniature operating system in the frontend.

You no longer have to choose between a simple architecture and a responsive user experience. You can have both. The server can drive the interface, the browser can assemble it, and the JavaScript you write can focus on genuine interactivity rather than plumbing.

For the next generation of dashboards, admin tools, and AI-powered interfaces, the smartest client might be the one that does less.