What is the best way to organize the storage and delivery of blog content in React and Next.js?

Question

Node.js

I am making a Chinese language learning website. There is a client application on React and Next, and an API application on Express.

The site will consist of lessons. Each lesson will include theory, language games and exercises.
It's not easy with theory either. Each Chinese word should automatically take the transcription from the database and substitute the transcription next to it, i.e. there will be passing formatting of the source text.
I would like to write the content of articles and exercises immediately using the React syntax. It's more comfortable for me. For example, I write Chinese characters into components, and the components themselves format them inside themselves.
The question is how to load, store and retrieve it all?

I thought to store all the content of all articles separately as separate files, the file name is the ID, and store only the ID in the database and indicate this article when loading and then load it when requested.

Or the second option is to store the text in the database, retrieve the text of any article from the database when requested, and then, after loading, asynchronously work with content formatting in the browser after the page is loaded.

The question is open, maybe there is a better option?

Answer 1

Well, you definitely don't need to store files. In the database, store the text and its transcription, in the react only variables in the right places. Load the desired text from the database and paste it in the right place