Шаблон HTML, заполненный на стороне сервера -и обновленный клиент -на стороне

У меня есть веб-страница с динамическим контентом. Допустим, это страница продукта. Когда пользователь переходит непосредственно к example.com/product/123, я хочу отобразить свой шаблон продукта на сервере и отправить html в браузер. Однако, когда пользователь позже щелкнет ссылку на /product/555, я хотел бы использовать JavaScript для обновления шаблона на стороне клиента -.

Я хотел бы использовать что-то вроде Knockout.js или Angularjs,но я не понимаю, как я могу предварительно -заполнить эти шаблоны некоторыми начальными данными на сервере и при этом иметь работающий шаблон на клиенте. т. е. если мой шаблон Angular такой:

<ul>
    <li ng-repeat="feature in features">
      {{feature.title}}
      <p>{{feature.description}}</p>
    </li>
</ul>

Когда пользователь переходит непосредственно к URL-адресу, мне нужно что-то, что по-прежнему работает как шаблон Angular, но заполнено html для текущего продукта. Очевидно, это не работает:

<ul>
    <li ng-repeat="feature in features">Hello
      <p>This feature was rendered server-side</p>
    </li>
    <li>Asdf <p>These are stuck here now since angular won't replace them when
       it updates.... </p></li>
</ul>

Кажется, мой единственный вариант - отправить сервер -отображаемый html в браузер вместе с отдельным соответствующим шаблоном...?

В этом случае я бы не хотел писать каждый шаблон дважды. Это означает, что мне нужно либо переключиться на JavaScript для моего серверного языка (, что меня не устраивает ), либо выбрать язык шаблонов, который компилируется как в Java, так и в JavaScript, а затем найти способ взломать его в Play Framework. (это то, что я сейчас использую.)

Есть ли у кого-нибудь совет?