Back To Home

Name: Ngày 30: SXA (Sitecore Experience Accelerator) là gì?

🟦 Ngày 30: Sitecore SXA (Sitecore Experience Accelerator) là gì?

Sitecore Experience Accelerator (SXA) là một module mạnh mẽ của Sitecore giúp bạn xây dựng website nhanh hơn, theo chuẩn component-based, không cần code lại từ đầu.

SXA cung cấp:

  • Bộ components dựng sẵn (Rendering)

  • Templates dựng sẵn

  • Layout & Grid system

  • Creative Exchange (giao tiếp với team front-end)

  • Multi-site / Multi-tenant cực nhanh

  • Reusable components, themes, data templates

  • Hỗ trợ Headless (Headless SXA)

🟧 1. SXA giải quyết vấn đề gì?

Nếu không dùng SXA:

  • Mỗi site phải tạo template, layout, rendering từ zero.

  • Frontend và backend khó tách biệt.

  • Mất thời gian cho tác vụ lặp lại.

Nếu dùng SXA:

  • Có sẵn 40+ components: Navigation, Promo, Carousel, Breadcrumb, Container, Tabs…

  • Kéo thả để build trang nhanh.

  • Nhiều site dùng chung cấu trúc (tenant → site).

  • Workflow rõ ràng giữa backend / frontend / content editor.

🟩 2. Kiến trúc SXA

SXA hoạt động dựa trên 3 layer:

 
Content → Presentation → Theme

✔ 1. Content layer

  • Các dữ liệu, item, datasource

  • Editor nhập nội dung

✔ 2. Presentation layer

  • Rendering (components)

  • Page design

  • Partial design

  • Placeholder

✔ 3. Theme layer

  • CSS/JS/HTML

  • Frontend development (Creative Exchange)

🟦 3. Tenant & Site trong SXA

SXA hỗ trợ multi-site tốt.

✔ Tenant

  • Một “khối” bao gồm nhiều site

  • Dùng khi project có nhiều brand hoặc country

✔ Site

  • Mỗi dự án website cụ thể

Ví dụ:

 
Tenant: Global Brand ├── VN Site ├── US Site ├── EU Site

🟧 4. Page Design vs Partial Design

✔ Page Design

  • Gần giống Layout trong Sitecore MVC.

  • Là “bộ khung” của 1 trang.

✔ Partial Design

  • Tương tự Partial Layout.

  • Reusable: header, footer, left-sidebar, promo bar,…

🟩 5. Rendering Variants (Siêu mạnh)

Rendering Variants giúp:

  • Thay đổi UI của component mà không cần code.

  • Editor chỉ chọn variant → UI khác nhau.

Ví dụ: component Article:

  • Variant: Card

  • Variant: Text-only

  • Variant: Hero style

Cùng 1 datasource → 3 style UI khác nhau.

🟦 6. Creative Exchange (Front-end workflow)

Cho phép frontend tách khỏi backend.

Quy trình:

  1. Backend cấu hình site → Export theme

  2. Frontend chỉnh sửa HTML/CSS/JS

  3. Import lại vào Sitecore

→ Hoàn toàn không cần truy cập Sitecore.

Ngoài ra còn hỗ trợ:

  • Export static mock site

  • Static HTML → SXA site tự động

🟧 7. Headless SXA

Phiên bản SXA chạy cho headless architecture.

  • Kết hợp với Layout Service / JSS

  • Hỗ trợ React, Vue, Angular

  • Placeholder + variant vẫn hoạt động headless

Dành cho site modern (Next.js, React SSR).

🟩 8. Khi nào nên dùng SXA?

Tình huống Nên dùng?
Build nhiều site nhanh ✔ Rất phù hợp
Editor cần kéo thả ✔ Nên dùng
Bộ UI phức tạp cần tùy biến ✔ Có thể dùng Rendering Variants
Site rất custom cần nhiều code backend ✖ Không nên dùng
Dự án headless + Next.js ✔ Headless SXA

🟦 9. Tóm tắt Ngày 30

  • SXA = tăng tốc xây dựng website bằng component có sẵn.

  • Hỗ trợ multi-site/multi-tenant.

  • Có sẵn hàng chục component UI.

  • Rendering Variants → thay đổi UI không cần code.

  • Creative Exchange → workflow cho frontend.

  • Hỗ trợ cả headless (Headless SXA).

Donald Trump

Để trở thành người chiến thắng, bạn cần biết khi nào là đủ. Đôi khi trong cuộc sống, bạn phải từ bỏ cuộc chiến và chuyển sang mục tiêu mới mang lại hiệu quả hơn

Related Post