Back To Home

Name: Ngày 29: Sitecore Headless & JSS Overview

🟦 Ngày 29: Sitecore Headless & JSS Overview

Sitecore từ phiên bản 9 trở đi hỗ trợ rất mạnh cho Headless CMS, nơi backend và frontend tách rời hoàn toàn. Người dùng có thể dùng React, Vue, Next.js, Angular, hoặc bất kỳ framework nào để xây dựng giao diện, còn Sitecore chỉ đóng vai trò cung cấp nội dung qua API.

🧩 1. Headless là gì?

✔ Frontend và Backend độc lập

  • Backend (Sitecore) chỉ quản lý nội dung, cấu trúc, personalization, workflow.

  • Frontend (React/Vue/Next.js) render giao diện + logic UI.

✔ Giao tiếp qua API:

  • GraphQL API

  • Layout Service API

  • Item Service API

🟦 2. Sitecore JSS là gì?

JSS (JavaScript Services) là bộ công cụ cho phép xây dựng website headless bằng framework JavaScript và vẫn sử dụng được tính năng mạnh mẽ của Sitecore:

Cung cấp các thành phần:

  • CLI để tạo project React/Vue/Angular

  • Rendering host

  • Layout Service

  • Sitecore-first hoặc Code-first development

  • Route & Component mapping

  • Integrated Editing (Experience Editor)

🟧 3. Các mode phát triển:

✔ Connected Mode

  • Frontend app chạy và gọi API trực tiếp từ Sitecore.

  • Dùng khi cần test personalization, trải nghiệm Experience Editor.

✔ Disconnected Mode

  • Frontend chạy độc lập, dùng JSON mock.

  • Dùng lúc dev để không phụ thuộc vào môi trường Sitecore.

🟦 4. Sitecore Layout Service

Là API trả về JSON của trang, bao gồm:

  • Danh sách renderings

  • Placeholder

  • Datasource

  • Field values

Ví dụ JSON Layout Service:

 
{ "sitecore": { "route": { "name": "home", "fields": { "title": "Welcome!" }, "placeholders": { "main": [ { "componentName": "HeroBanner", "fields": { "heading": "Hello from JSS" } } ] } } } }

Frontend từ JSON này sẽ render ra UI tương ứng.

🟩 5. Data Source trong Headless

Mỗi component có:

  • name (tên component)

  • fields (dữ liệu)

  • datasource item (lấy từ Sitecore)

Frontend map component:

 
export default function HeroBanner(props) { return <h1>{props.fields.heading.value}</h1>; }

🟦 6. JSS Rendering Host

Frontend app được deploy (VD: Next.js) và Sitecore chỉ gửi JSON Layout → rendering host render HTML.

JSS hỗ trợ:

  • React + Next.js (phổ biến nhất)

  • Angular

  • Vue

Khi chạy Experience Editor, Sitecore host sẽ wrap HTML từ rendering host → edit inline.

🟧 7. Personalization trong Headless

Personalization vẫn sử dụng rules trên backend Sitecore.

Cách hoạt động:

  1. Sitecore quyết định variant nào được chọn.

  2. Layout Service trả đúng JSON cho user.

  3. Frontend chỉ render JSON đó → không cần biết logic personalization.

🟦 8. GraphQL và Headless SXA

Ngoài JSS, Sitecore còn có:

✔ GraphQL Content Delivery

  • Truy vấn dữ liệu item rất nhanh.

  • Hữu ích cho mobile apps, SPAs.

Ví dụ query GraphQL:

 
{ item(path: "/sitecore/content/home") { title: field(name: "Title") { value } } }

✔ Headless SXA

  • Xây dựng site nhanh hơn bằng SXA nhưng headless.

  • Có sẵn components + layout headless.

🟩 9. Khi nào nên dùng Sitecore Headless?

Tình huống Có nên dùng headless?
Site phức tạp, UI tương tác nhiều ✔ Nên
Team frontend mạnh (React/Next.js) ✔ Nên
SEO yêu cầu cao (SSR) ✔ Nên dùng Next.js
Web nhỏ ít thay đổi ✖ Không cần headless

🟦 10. Tóm Tắt Ngày 29

  • Sitecore headless tách frontend & backend.

  • JSS giúp build bằng React, Vue, Angular.

  • Cung cấp Layout Service để trả JSON.

  • Frontend render dựa vào JSON.

  • Hỗ trợ personalization, Experience Editor.

  • Có Connected / Disconnected mode.

  • GraphQL cho phép query dữ liệu linh hoạt.

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