在 Marionette 应用程序中使用推送状态进行 SEO答案

【问题标题】：Using Push State in a Marionette Application for SEO在 Marionette 应用程序中使用推送状态进行 SEO
【发布时间】：2013-12-12 01:33:41
【问题描述】：

我做了功课并阅读了这个关于 pushstate 的迷你系列：

http://lostechies.com/derickbailey/2011/09/26/seo-and-accessibility-with-html5-pushstate-part-2-progressive-enhancement-with-backbone-js/

据了解，实现推送状态的难点在于确保我的服务器端将为相应的 url 提供实际页面。

我觉得这将是一项艰巨的任务，以前我只是发送一个简单的玉页，那么简单：

 body

    header

    section
        div#main

    footer.site-footer
        div.footer-icons.footer-element
        div.footer-element
          span.footer-link Contact Us
          span.footer-link Terms of Service

script(src='/javascripts/lib/require.js', data-main='/javascripts/application.js')

我使用 Marionette Layouts 和 Composite Views 进行所有渲染，老实说，这有点复杂。

所以据我了解，我需要在服务器端使用翡翠复制所有复杂的嵌套/渲染，以使 pushState 正常工作？

我在客户端使用了下划线模板，有什么简单的方法可以在服务器端重用它们？

【问题讨论】：

标签： javascript node.js backbone.js marionette

【解决方案1】：

我取决于你想做什么......

要“仅”使用 pushState，唯一的要求是您的服务器为您的应用程序可以访问的每个 URL 返回一个有效页面。但是，服务器返回的内容确实不必须与客户端呈现的内容相匹配。换句话说，您可以在服务器端使用“catch all”路由，该路由始终返回您上面的页面，然后让 Backbone/Marionette 触发其路由来处理渲染和显示。

也就是说，如果您想使用 pushState 进行 SEO，您可能希望服务器在第一次调用时发送静态 HTML，然后启动 Marionette 应用程序以增强交互性。在这种情况下，它要复杂得多，您可能希望尝试使用选项来触发正确的行为（例如，在增强现有 HTML 时使用 attachView，在初始情况之后正常显示视图）。

【讨论】：

是的，我想使用 pushState 的唯一原因是 SEO，但我对我要做的额外工作感到害怕。我正在考虑一种混合方法（我的一些页面是服务器端渲染的，而其中一些是客户端渲染的）方法被认为是不好的做法。但即使使用混合方法，我的客户端代码也会变得混乱，因为我有多个入口点。那么这是否意味着我需要为每个入口点创建多个 Marriontte 对象实例？
我不认为混合方法会被认为是一种不好的做法。而且我认为您不应该需要多个对象。您只需要能够根据收到的选项正确启动您的应用程序（即处于正确状态）。然后，根据入口点调整给应用程序的选项。

【解决方案2】：

推送状态可以正常工作，而无需您的服务器以建议的方式实际为您的应用程序提供服务。

推送状态只是hashbang url 的替代，现代浏览器支持它。查看the history docs here，您会看到没有提及让您的网站在您的应用程序的 url 处静态地为您的应用程序提供服务（但请记住它是可选的）。

您引用的文章是说，为了获得良好的 SEO，您应该这样做。那是因为您无法保证搜索引擎何时抓取您的网站，它会执行您的 javascript，并选择您的路线等。因此，静态服务网站只是为搜索引擎提供一种无需执行任何 javascript 即可获取您的内容的方法。

就像您说的那样，通过这样做，您实际上是在并行构建两个站点，它确实使您需要做的工作量翻了一番。如果您正在构建一个充满静态内容的相对简单的网站，这可能没问题，但如果您正在创建一个复杂的应用程序，那么在大多数情况下它可能太多了。

虽然我要补充一点，如果你正在构建一个应用程序，那么 SEO 并不重要，所以它是一个零点。

【讨论】：