Ưu và nhược điểm khi chuyển cửa hàng Ecommerce sang kiến trúc Headless

Hãy tìm kiếm “Headless” và bạn sẽ thấy hàng nghìn bài viết bàn về cách tiếp cận mới này. Phần lớn tác giả đánh giá cao sự tự do mà nó mang lại cho việc phát triển front-end, trong khi nhiều người ủng hộ lại yêu thích giao diện người dùng (UI) xuất sắc. Dù vậy, các doanh nghiệp Ecommerce mới là những đơn vị đang đặc biệt quan tâm đến việc triển khai Headless cho cửa hàng trực tuyến của mình.

Trước đây, tôi đã thảo luận về Progressive Web Apps, một phần của cách tiếp cận này. Các tập đoàn Ecommerce lớn như Amazon, Flipkart và Nike cũng áp dụng khái niệm tương tự với mục tiêu duy nhất là mang đến trải nghiệm khách hàng cao cấp.

Bài viết này có phải là một lời ca ngợi Headless website development nữa không? Ở một mức độ nào đó, đúng vậy. Nhưng tôi muốn tập trung thảo luận về lợi ích của giải pháp này đối với các doanh nghiệp Ecommerce và cách chúng tôi, với tư cách là một agency phát triển website bên thứ ba, đã hỗ trợ triển khai Headless cho một số nền tảng Ecommerce phổ biến nhất.

Ecommerce Headless là gì?

Kiến thức cơ bản: Mỗi website Ecommerce đều gồm hai phần chức năng — front-end và back-end.

Front-end của website đóng vai trò là kênh trung gian giữa người dùng và cổng Ecommerce, còn back-end quản lý thông tin sản phẩm cũng như toàn bộ hoạt động của cổng. Qua nhiều năm, các cổng Ecommerce phổ biến vẫn theo cách tiếp cận truyền thống, trong đó front-end và back-end của website được quản lý từ cùng một bảng điều khiển, nghĩa là chúng dùng chung một nền tảng.

Headless xuất hiện với một chiến lược hoàn toàn mới. Nếu chưa từng nghe đến Headless, về cơ bản, đây là cách tách front-end và back-end của website. Khi ít can thiệp lẫn nhau hơn, mỗi phần hoạt động độc lập và phát huy thế mạnh riêng — bạn có chuyên gia UI phụ trách giao diện của cổng, cùng chuyên gia back-end củng cố nền tảng:

Vì sao chúng khác biệt đến vậy?

Kiến trúc cơ bản của các cổng Ecommerce

Không đi sâu vào những chi tiết nhỏ của kiến trúc Ecommerce, dưới đây là các cấu trúc cổng được phác thảo khái quát để minh họa cách website Ecommerce vận hành cơ bản và tương tác ở từng giai đoạn.

Kiến trúc Full Stack

Kiến trúc Full Stack là cách tiếp cận truyền thống hơn, được các webmaster phụ trách mobile sử dụng từ khi phát triển ứng dụng mobile bắt đầu trở thành xu hướng. Nhà phát triển tạo ra một hệ sinh thái hoàn chỉnh với nền tảng thương mại làm trung tâm, kết hợp cùng một storefront tích hợp. Cổng thông tin Rendering từng nền tảng riêng biệt, chẳng hạn như mobile và web. Các thành phần bàn giao hoạt động độc lập hơn và được thiết kế riêng cho nền tảng phục vụ.

Với nền tảng thương mại làm trung tâm, cổng thương mại ưu tiên các chức năng backend như quản lý nội dung, hoàn tất đơn hàng và dữ liệu sản phẩm.

Kiến trúc ecommerce Full-stack

Ecommerce Headless

So với kiến trúc full-stack, cấu trúc ecommerce Headless tách biệt rõ ràng front end của cửa hàng trực tuyến với các chức năng còn lại của website. Bạn có thể hình dung kiến trúc này gồm các phần riêng biệt thay vì một hệ thống tập trung thống nhất. Các thành phần bàn giao được quản lý bằng API, giúp Rendering một giao diện người dùng front-end chung có thể tự điều chỉnh linh hoạt trên mọi nền tảng.

Vì những lý do hiển nhiên, front end giờ đây ưu tiên các chức năng như thanh toán và cá nhân hóa, trong khi nền tảng thương mại quản lý những tác vụ như quản lý nội dung, hoàn tất đơn hàng và quản lý sản phẩm.

Nghe có vẻ quá kỹ thuật? Có thể tóm gọn bằng một ý duy nhất: ecommerce Headless linh hoạt hơn nhiều so với các phương pháp truyền thống trong việc Rendering một trải nghiệm omnichannel.

Nhu cầu về Headless tăng đột biến

Gần đây, Retail Dive và BigCommerce đã công bố những số liệu đáng kinh ngạc trong một khảo sát có sự tham gia của các lãnh đạo toàn cầu và giám đốc marketing, tập trung vào những khó khăn của họ trong việc thu hút người tiêu dùng trên nền tảng số. Theo báo cáo, 86% lãnh đạo doanh nghiệp cho biết Customer Acquisition Cost (CAC) của họ đang tăng. Khi paid media ngày càng đắt đỏ và cạnh tranh hơn, báo cáo gợi ý rằng lựa chọn phù hợp hơn là xây dựng chiến lược hiệu quả hơn để thu hút organic traffic.

Người dùng tiếp nhận nội dung từ gần như mọi nơi. Ngoài việc hiện diện trực tuyến và nâng cao trải nghiệm mua sắm, doanh nghiệp cần giúp người tiêu dùng dễ dàng mua hàng trên mọi thiết bị. Nhận định này được củng cố bởi một khảo sát của Mediapost— theo đó, người Mỹ sẽ kết nối với 13 thiết bị mạng trên mỗi người. Không cần phải nói, danh sách này bao gồm đủ loại thiết bị với nhiều kích thước màn hình khác nhau, như laptop, máy tính bảng, điện thoại di động, công cụ nhận dạng giọng nói, đồng hồ thông minh, kiosk, máy tính bảng trên ô tô và mọi thiết bị có thể truy cập dịch vụ web.

Các tình huống thực tế tại phòng nghiên cứu của chúng tôi: Cách chúng tôi phát triển kiến trúc Headless cho khách hàng

Là một agency cung cấp các giải pháp ecommerce tùy chỉnh, khách hàng thường yêu cầu chúng tôi xây dựng portal có tốc độ tải cực nhanh và giao diện trực quan, dễ sử dụng. Vì vậy, chúng tôi thường đề xuất cách tiếp cận headless. Điều này đòi hỏi chúng tôi phải nỗ lực hơn, nhưng mang lại kết quả tốt cho khách hàng.

Triển khai Magento Headless

Backend: Nền tảng Magento commerce

Frontend: Angular JS

Vấn đề được giải quyết:

Vấn đề tải trang — website ban đầu mất tới 7 giây mới hiển thị. Điều đó đồng nghĩa với việc màn hình trống trong hơn 7 giây. Theo mặc định, Magento cung cấp frontend được xây dựng trên CMS dựa trên KnockoutJS. Cửa hàng trực tuyến được tích hợp chặt chẽ này hạn chế website ở nhiều khía cạnh. Số lượng người dùng ngày càng tăng đã bắt đầu ảnh hưởng đến hiệu suất cửa hàng.

Giải pháp của chúng tôi:

Với template headless được thiết kế bằng Angular JS, chúng tôi tách backend để backend không ảnh hưởng đến storefront. Cách tiếp cận lazyload truyền thống giúp giảm gần một nửa thời gian tải trang.

Kết quả:

Thời gian tải trang giảm đáng kể, từ 7 giây xuống còn 2,8 giây.

Một nghiên cứu tình huống khác về Magento Headless

Backend: Nền tảng Magento Commerce

Frontend: VueJS

Vấn đề được giải quyết:

Điều hướng trang — Magento tập trung chuyên môn vào hiệu suất backend. Frontend của nền tảng này khá cứng nhắc, và mỗi khi thực hiện thao tác trên storefront, bạn thường phải truy cập backend. Bạn nhấp vào trang mới, cửa hàng gửi yêu cầu đến backend Magento, xử lý dữ liệu rồi mới cho phép tải trang mới. Điều hướng trang là một trong những yếu tố bị ảnh hưởng trong quá trình này.

Giải pháp của chúng tôi:

Chúng tôi đã thiết lập được Single Page Application trên Magento bằng VueJS. Giờ đây, người dùng có thể điều hướng giữa các trang ngay trong template Vue. Một phần lớn truy vấn đã được xử lý ngay trên template Vue, giúp backend Magento tránh bị quá tải.

Kết quả:

Thời gian điều hướng trang giảm nhiều lần.

Triển khai Headless trên cửa hàng Shopify

Backend: Nền tảng Shopify Commerce

Frontend: Gatsby JS

Các phiên thanh toán kéo dài — Các phiên thanh toán trên mọi nền tảng ecommerce, bao gồm cả Shopify, thường kéo dài. Người dùng phải điền thông tin trên 4 trang dài trước khi thanh toán. Nguyên nhân là sau mỗi trang, cửa hàng tải lại trang tiếp theo từ backend Shopify, rồi phải chờ cổng thanh toán bên thứ ba xử lý. Thêm vào đó, mỗi bước đều có thời gian chờ, khiến khâu thanh toán mất nhiều thời gian và gây khó chịu.

Hơn nữa, Shopify hạn chế khả năng tùy chỉnh trang thanh toán, khiến admin không thể kiểm soát nội dung trên trang.

Giải pháp của chúng tôi:

Với Gatsby JS, chúng tôi đã tạo được một khu vực thanh toán ảo trên một trang duy nhất. Chúng tôi đã giới hạn các trường và sắp xếp mọi thông tin chi tiết trên một trang duy nhất.

Kết quả:

Thời gian phiên thanh toán giảm đáng kể.

Headless không hoàn hảo như bạn nghĩ

Dù chúng tôi cho rằng headless là một giải pháp để xử lý hầu hết vấn đề trong cửa hàng ecommerce, điều đó không có nghĩa là giải pháp này không có nhược điểm. Dưới đây là một số lý do bạn không nên chọn Headless Commerce:

Chi phí tăng cao:

Ưu điểm lớn nhất của Headless commerce là webstore không có frontend được định sẵn. Các developer xây dựng frontend từ đầu để cung cấp nội dung phù hợp với từng thiết bị. Tuy nhiên, quá trình này tốn thời gian và chi phí có thể rất cao.

Ngoài ra, bạn cần chi thêm vì đội ngũ marketing không thể tự mình tiếp cận khách hàng một cách hiệu quả. Chủ doanh nghiệp phụ thuộc nhiều vào đội ngũ IT để ra mắt landing page trên nhiều thiết bị.

Không thân thiện với marketing

Hệ thống Headless commerce không có lớp trình bày frontend. Điều này có nghĩa là:

• 
  Khó xem trước nội dung trên thiết bị của người dùng cuối.
• 
  Các marketer không thể tạo nội dung trong môi trường WYSIWYG quen thuộc.
• 
  Việc lên ý tưởng, tạo và xuất bản nội dung trở nên chậm hơn nhiều do phải phụ thuộc nhiều hơn vào một bộ phận khác.

Điều đó có nghĩa là Headless commerce sẽ khiến các marketer chịu thêm áp lực, phải làm nhiều hơn trong khi phụ thuộc nhiều hơn vào bộ phận IT để tạo và phân phối nội dung.

Hạn chế chỉnh sửa storefront

Hệ thống Headless commerce không có môi trường WYSIWYG và được xây dựng hoàn toàn bằng các framework dựa trên JS. Giải pháp này tạo điều kiện để bạn mở rộng website, nhưng cũng hạn chế khả năng thiết kế lại frontend nếu không phụ thuộc nhiều vào các developer JS.

Tóm lại

Các doanh nghiệp ecommerce hàng đầu đã áp dụng kiến trúc headless và đạt được nhiều lợi ích. Headless có cả ưu điểm lẫn nhược điểm. Bạn có thể cần nỗ lực nhiều hơn, nhưng kết quả đạt được sẽ bền vững.

Các kiến trúc truyền thống vẫn đủ thân thiện với quản trị viên để bạn tiếp tục sử dụng, nhưng suy cho cùng, thay đổi là điều duy nhất không đổi.