How should I store HTML Content to DB using react-quill

Question

I'm working on a blog project with React.js & Node.js (express & mongoose) & react-quill library for editing my contents.

Right now I'm saving the contents from react-quill as string HTML to my react state.

...

const [content, setContent] = useState<string>('');

const onChange = (content: any, delta: any, source: any, editor: any) => {
  setContent(editor.getHTML());
};

<ReactQuill
  theme="snow"
  value={content}
  onChange={onChange}
  modules={modules}
/>

...

After storing the HTML to my state as string, I send POST request to my express application for storing this string in my MongoDB database.

The problem is that when I'm trying to fetch this HTML in my react app again (Inside one of the blog posts page) the contents are very large (Right now with 3 posts is 1MB).

Image of response size:

Image of response stracture:

My question is how can I keep the data at a lighter weight ?

Thank you.

EDIT : I didn't mentioned that I'm uploading images too using react-quill toolbar (Maybe thats the problem)

Answer 1

I don't see anything wrong with what you are doing, and I agree with you that the size might be related to storing images on your database.

I have two ideas on how you might reduce the size of each record, but please read the final section on this answer before trying any of them.

1. Try to compress the text before storing it to MongoDB. You can use something like lz-string, for example, if you want to do everything in JavaScript.
2. Store every static asset (images, stylesheets, scripts, videos, etc.) on an object storage service, and save a reference to it. For example, on the image you provided, you are keeping an image encoded in base64. You could take that image, store it in something like S3, and then substitute a reference to it on the content value.

Even though this might improve the size of the database, you should first ask yourself if it's something you need. It would be best if you first tried to figure out how your data will scale with time and how that might affect the response times on your queries over it. The answer will be different if you query for multiple items each time or only a single item.