Migrating HotPads to an Isomorphic Stack with React

Zillow · 2016 · 2. Tăng trưởng · Độ khó: Trung bình — bài gốc

Bối cảnh

HotPads (thương hiệu thuê nhà của Zillow Group): sau 10 năm, front-end là JSP + jQuery + RequireJS + CSS toàn cục, dính chặt vào back-end monolith. Dev front-end mới phải học cả codebase lớn; mỗi nội dung động qua AJAX cần hai đường code front và back.

12/2014 quyết định viết lại toàn bộ sang React + flux, kiến trúc isomorphic: một codebase JS chạy cả trên server Node.js lẫn client; cả hai gọi API back-end chung như một app mobile.
Chọn vì cần cả hai: SSR cho lần tải đầu và SEO (bot lúc đó chưa chắc chạy JS), CSR cho chuyển trang mượt.
Mỗi route component khai báo hàm lấy dữ liệu trả promise; server chạy song song mọi promise của route rồi mới render, nên thời gian chờ bằng API chậm nhất.
Stream phần <head> HTML trước để trình duyệt tải JS/CSS trong khi server còn lấy dữ liệu và render.
Webpack build hai bundle (client và server-entry) vì CSS được import trong component.
Tối ưu re-render bằng so sánh nông trong shouldComponentUpdate: không có thì sự kiện chậm hẳn trên điện thoại và máy Windows cũ.
Kết quả theo HotPads: start render nhanh hơn 8,3% (dù thêm HTTPS), tải trang nhanh hơn 18%, page view mỗi session +50%, traffic SEO tăng; JS gửi xuống ít hơn site cũ. Front-end chạy local, gọi API trên môi trường test chung.

Mục tiêu chính là tách front-end khỏi monolith thành domain nhỏ mà cả team hiểu hết (Monolith và microservices — đi và quay lại); isomorphic là cách giữ SEO mà vẫn có trải nghiệm SPA (Kiến trúc frontend).

Front-end tiêu thụ API giống app mobile giúp web và native cùng một hợp đồng dữ liệu.
SSR có lấy dữ liệu: chạy song song, và stream phần đầu trang sớm.
Viết lại toàn bộ vẫn có thể ra từng phần: trang đầu sau 3 tháng.