What is the most convenient templating practice in Javascript?

Question

JavaScript

The question is about methods of templating - storing layout in client applications. The subject is something - I have a little more than zero experience in single-page applications, and therefore I ask what is the most convenient work scheme in your opinion, so as not to gouge your brain in the future.
Actually what I know:
1. Transfer the layout directly from the server, for example from PHP. In this layout, leave breadcrumbs like .tpl[data-name="tplname"] in the right places and then look for these templates at the right time and copy / paste when changing models. Before output, placeholders are replaced with values ​​from the object and output.
2. Transfer the entire layout wrapped in script tags directly in the code of the client application controller itself. But you need to get used to editing code wrapped in a script. Before output, placeholders are replaced with values ​​from the object and output.
3. When the application starts, an ajax request is made that requests a whole bunch of layout, which is then stored in a variable in the module for the future. There is a problem of splitting the resulting heap into convenient pieces. Before output, placeholders are replaced with values ​​from the object and output.
4. Make a request for a specific div.html directly when the need arises, and store already requested ones in a module variable. Cons - a wild number of requests to the server, even with a hundred clients.
5. Immediately write the layout through the usual string concatenation in Javascript. It is very difficult to accustom a _kakby_stupid_kakby_typesetter_ to this type of layout - with single quotes and plus signs at the beginning of each line.
Maybe there is something smarter, but I don’t know? THX.

Answer 1

6. Write templates in separate files and automatically compile to js functions.

What do you want.