Using client-side HTML templates
One drawback of the previous example is that a completely new HTML document is generated and sent to the browser every time Increment is clicked, even though only one section of the HTML changes.
Client-side HTML templates perform the same task as their server-side counterparts, but the template is parsed by JavaScript code running in the browser. This allows a targeted approach, where selected elements are modified, which can be more responsive than waiting for a new HTML document. This is the basis for single-page applications (SPAs), where a single HTML document is delivered to the client and then modified by JavaScript code.
The main difficulty with client-side templates is that they have to be written entirely in JavaScript, which can make it awkward to express HTML content in a way that is easy to read and maintain.
The most popular client-side frameworks, such as React and Angular, use client-side template formats that are easier...
