SSI giải cứu Custom Elements trong môi trường SSR

Trong phần 1 mình có nhắc tới dùng Custom Elements trong Micro Frontends. Trong thời điểm load SSR web, JS không tồn tại, chỉ có HTML, thay vì dùng JS để tạo ra Custom Elements, ta sẽ dùng SSI:

#include comment sẽ được thay thế bằng response từ endpoint: /blue-buy?sku=t_porsche.

Ngoài SSI ra thì ta cũng có các giải pháp thay thế

• Edge_Side_Includes (ESI) có cú pháp:

ESI kết hợp với nodesi, biến phần dynamic của web hoạt động dựa trên cơ chế Promise.

• Compoxure - Proxy middleware dựa trên công nghệ htmlparser2 dành cho phần viết bằng ESI hoặc SSI.

• tailor - pre-rendered markup on the backend có số star là 1.6k nhiều nhất trong số các tools ở trên. tailor lấy các phần động đồng thời song song với nhau.

Kiến trúc trong tailor tổng quan:

Ảnh lấy từ mosaic9.org:

Tailor sử dụng parse5 để dịch template, thay thế fragmentTag thành các luồng bất đồng bộ:

Đây là ví dụ của 1 project dùng Tailor + Vue + lerna - không hỗ trợ SSR:

• momos và momos#why-you-dont-use-nginx - Được viết bằng Go.

TechLead nên cân nhắc thật kỹ các giải pháp thay thế được SSI, để phù hợp nhất với dự án của mình.

Cụ thể thực hiện SSI bằng nginx

Ta để ý khi ssi: on;, các team c, mỗi ông sẽ code dự án của riêng mình tại 3 cổng khác nhau chạy trên con web server này lần lượt là: 3001, 3002, 3003.

Đây là source-code đầy đủ về cách kết hợp giữa nginx + docker-compose + 3 project tách biệt nhau hoàn toàn của team Red, Green, Blue.

Ảnh chụp web khi thay đổi thành phần dựa trên params: `t_fend hoặc t_eicher:


3 nút tương ứng với 3 cái xe Red, Green, Blue mỗi lần bị click sẽ reload lại cả page! Đây không còn là SPA - Single Page Application thân thương nữa rồi!

3 nút đó sẽ route cả page tới từng phần của 1 trong 3 team đã làm.

1 khi JavaScript khả dụng là sau khi SSR web đã load xong phần JS thì phần việc route page tới đâu sẽ là việc của client-side (phần việc của JS). Từ đây, khi bấm vào 1 trong 3 nút trên sẽ không còn reload lại cả trang nữa mà thay vào đó sẽ hoạt động dựa trên Custom Elements + JS. Lý thuyết là vậy, nhưng thực thi như thế nào thì để bài viết khác nhé.

Phần tiếp theo là Data Fetching & Loading States dành cho Custom Elements + SSI/ESI.

Tham khảo

• Apache - How to SSI
• Server Side Includes, the hottest of the web in 1995
• Micro Frontends
• Bonus: cách thực hiện Micro Frontends với Angular - 100 days of Angular

Đây là bài viết trên blog cá nhân của tôi.