Thiết kế Database để lưu dữ liệu từ EditText (FE) xuống DB(BE)

Em chào các anh chị, Em đang làm một dự án với yêu cầu lưu dữ liệu từ trình soạn thảo văn bản (EditText) trên Frontend (ReactJS) xuống Database (MySQL) và sau đó gọi API để hiển thị lại nội dung đó lên trang. Hiện tại em gặp một số vấn đề về thiết kế database và cách xử lý dữ liệu, mong được các anh chị tư vấn giúp.

Yêu cầu chức năng: Người dùng nhập nội dung vào trình soạn thảo (EditText) trên Frontend (ReactJS). Nội dung có thể bao gồm:

• Văn bản (text) với các style như in đậm, in nghiêng, gạch chân, màu sắc, v.v.
• Image: user upload ảnh và hệ thống lưu ảnh vào cloudinary.
• Video: url user cung cấp. Dữ liệu được lưu xuống Database (MySQL) thông qua Backend (Spring Boot). Khi người dùng truy cập lại trang, FE gọi API để lấy dữ liệu từ DB và hiển thị lại đúng nội dung với các style và thứ tự ban đầu.

Hiện tại em đang làm như sau: Database design: Bảng ProjectStory: Lưu thông tin chung về story. Bảng StoryBlock: Lưu từng block nội dung (text, image, video) với các trường:

• id: Khóa chính.
• type: Loại block (TEXT, IMAGE, VIDEO).
• content: Nội dung của block (văn bản HTML hoặc URL hình ảnh/video).
• order: Thứ tự của block.
• metadata: Lưu các thông tin bổ sung (ví dụ: public_id của file trên Cloudinary).

Xử lý dữ liệu: Với block TEXT: Lưu toàn bộ HTML vào trường content. Với block IMAGE/VIDEO: Upload file lên Cloudinary và lưu URL vào trường content.

Vấn đề em gặp phải: Dung lượng database lớn: Khi lưu toàn bộ HTML vào trường content, dung lượng database tăng nhanh, đặc biệt khi có nhiều block TEXT với nội dung dài.

Hiệu suất truy vấn: Khi có nhiều block (20-60 block), việc truy vấn và xử lý dữ liệu trở nên chậm.

Câu hỏi của em là anh/chị thiết kế DB cho chức năng này như thế nào và làm sao đảm bảo thứ tự cũng như thiết kế từ EditText được giữ nguyên khi get ra ạ?