Я нахожусь в процессе создания приложения Django с ограниченной интерактивностью Javascript и смотрю, как включить шаблоны Vue вместе с шаблонами Django для того же контента.
Представьте себе бесконечную страницу прокрутки, гдеSEO очень важно.Django отлично подходит для решения этой проблемы, поскольку по определению является серверной структурой.Однако как бы вы обогатили страницу, отображаемую Django, с помощью Vue, при условии, что обе эти технологии должны воспроизводить один и тот же контент?В этом случае Django рендерится для поисковых роботов SEO, перед тем как Vue вступит во владение, Vue «увлажнит» эти компоненты и сделает их интерактивными.После этого последующее содержимое, которое выбирается асинхронно с помощью AJAX, также будет шаблонизировано с помощью Vue.
Я провел некоторое исследование, не найдя достаточной информации о том, как решить эту проблему:
Я не понимаючто эти источники говорят о SEO, или, вернее, если они есть, они используют шаблоны Vue только там, где контент не является SEO тяжелым (как открытие модального).
Ниже приведена первоначальная идея этих двух технологий рендеринга.один и тот же контент по-разному.Так как у Vue есть опция delimiter, я чувствовал, что, возможно, есть способ объединить их (чтобы избежать столкновения синтаксиса шаблонов).
{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Django and Vue test</title>
</head>
<body>
{% if names %}
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type="text/javascript">
var names = {{ names_json|safe }};
</script>
<div id="app">
<!-- This list is for SEO purposes, let's say 'above the fold' content contained in a responsive grid before an infinite scroll is triggered -->
<h2>Django list</h2>
<ul>
{% for name in names %}
<li>
<div>
<img src="avatar.jpg">
<div>
<div>{{ name }}@test.se</div>
</div>
</div>
</li>
{% endfor %}
</ul>
<!-- This list is supposed to somehow 'hydrate' the django template content, in order to enrich the template with interactive VueJS. When the client Vue instance is instantiated/mounted, the idea is that only these elements populate the page, and not the SSR ones -->
<h2>Vue list</h2>
<ul>
<li v-for="name in names">
<div v-on:click="greet(name)">
<img src="avatar.jpg">
<div>
<div>[[ name ]]@test.se</div>
</div>
</div>
</li>
</ul>
</div>
<script>
var app = new Vue({
delimiters: ['[[', ']]'],
el: '#app',
data: {
names: names,
},
methods: {
greet: function (name) {
console.log('Vue says hello from ' + name + '!')
}
}
});
</script>
{% endif %}
</body>
</html>
Не думаю ли я об этом неправильно,или у кого-нибудь из вас есть рекомендации для меня?
Спасибо большое.