出于 SEO 原因，Django 模板 + Vue 模板用于相同的内容答案

【问题标题】：Django templating + Vue templating for the same content for SEO reasons出于 SEO 原因，Django 模板 + Vue 模板用于相同的内容
【发布时间】：2020-01-24 16:31:15
【问题描述】：

我正在构建一个具有有限 Javascript 交互性的 Django 应用程序，并且正在研究如何将 Vue 模板与 Django 模板结合起来以实现相同的内容。

想象一个无限滚动页面，其中 SEO 非常重要。 Django 非常擅长解决这个问题，因为它按照定义是一个服务器端框架。但是，如果这两种技术都需要渲染相同的内容，您将如何使用 Vue 丰富 Django 渲染的页面？在这种情况下，Django 将为 SEO 爬虫渲染，就在 Vue 接管之前，Vue “水合”这些组件并使它们具有交互性。发生这种情况后，随后使用 AJAX 异步获取的内容也将使用 Vue 进行模板化。

我做了一些研究，但没有找到足够的信息来解决这个问题：

https://vsupalov.com/vue-js-in-django-template/ 这是下面代码示例的某些部分基于的地方
https://medium.com/quick-code/crud-app-using-vue-js-and-django-516edf4e4217 概述了结合 django 和 vue 似乎可以很好地协同工作
https://medium.com/@rodrigosmaniotto/integrating-django-and-vuejs-with-vue-cli-3-and-webpack-loader-145c3b98501a

我不明白这些来源在谈论 SEO，或者更确切地说，如果他们是这样，他们只在内容不是 SEO 繁重的情况下使用 Vue 模板（例如打开一个模式）。

以下是这两种技术以不同方式呈现相同内容的初步构想。由于 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>

我是否以错误的方式思考这个问题，或者你们中的任何人对我有什么指导吗？

非常感谢。

【问题讨论】：

你考虑过服务器端渲染吗？看看 nuxtjs
我有。问题是我对 Django 以及它处理 SSR 的方式非常满意。所以我想也许有一种方法可以将它与 Vue 结合起来，因为 Vue 非常轻量级。编辑：如果可能的话，我想避免将前端变成一个成熟的 SPA。
不使用 webpack 你已经错过了很多，这样你可以完美地解决它，但是像 nuxt 这样的东西应该是最终的选择。
好的，所以如果我理解正确，你的建议是让它在 nuxtjs 中由 JS 呈现在服务器端，然后使用 django 中的 api 动态地将数据提供给这个 nuxtjs 应用程序？另外，你是说“这样你就可以完美地解决它”，但是怎么做呢？

标签： javascript python django vue.js server-side-rendering

【解决方案1】：

这就是我的做法：

views.py

def show_customers(request):
    customers = Customer.objects.all()
    context = {
        'customers': customers,
    }

    return render(request, "app/customers.html", context)

模板：customers.html

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Customer list</title>
        {% if DEBUG %}
            <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        {% else %}
            <script src="https://cdn.jsdelivr.net/npm/vue"></script>
        {% endif %}
    </head>
    <body>
    <div>
        {% for customer in customers|slice:":3" %}
            <p>
                {{ customer.id }} - {{ customer.user.username }}
            </p>
        {% endfor %}

        {% verbatim %}
        <script id="more-customers-template" type="text/template">
            <p>
                {{ customer.id }} - {{ customer.name }}
            </p>
        </script>
        {% endverbatim %}

    </div>
    <div class="issue-more-posts" id="more-customers">
        <customer
                v-for="customer in customers"
                v-bind:customer="customer"
                v-bind:key="customer.id"
        ></customer>
        <button @click="loadMorecustomer">
            SHOW MORE customers
        </button>
    </div>

    <script type="text/javascript">
        Vue.component('customer', {
            props: {
                customer: Object,
                nextPage: String
            },
            template: "#more-customers-template"
        });

        var customerMore = new Vue({
            el: '#more-customers',
            data: {
                customers: []
            },
            methods: {
                loadMorecustomer: function () {
                    this.customers = [{name: 'Some dynamic data', id: 1}]
                }
            }
        });
    </script>

    </body>
    </html>

此代码用于演示目的，您需要将 JS 代码和 Vue 模板代码分开。

编辑：我发现了一篇关于这个的非常好的文章，甚至更干净。 vuejs-and-django

【讨论】：