虽然#2对于作为开发人员的您来说可能“更容易”，但它只提供搜索引擎抓取。是的，如果谷歌发现你提供的内容不同，你可能会受到惩罚（我不是这方面的专家，但我听说过这种情况发生）。
SEO和可访问性（不仅适用于残疾人，而且通过移动设备，触摸屏设备和其他非标准计算/互联网支持的平台的可访问性）都具有类似的基本理念：语义丰富的标记是“可访问的”（即可以访问，查看，阅读，处理或以其他方式使用）到所有这些不同的浏览器。屏幕阅读器，搜索引擎爬虫或启用了JavaScript的用户都应该能够毫无问题地使用/索引/理解您网站的核心功能。
pushState根据我的经验，这不会增加这个负担。它只会把过去的想法和“如果我们有时间”带到Web开发的最前沿。
您在选项#1中描述的内容通常是最好的方法 - 但是，与其他可访问性和SEO问题一样，在JavaScript繁重的应用程序中执行此操作需要预先规划，否则它将成为一个重大负担。它应该从一开始就融入页面和应用程序架构中 - 改造是痛苦的，并且会导致不必要的重复。pushState
我最近一直在与几个不同的应用程序合作和SEO，我发现了我认为是一个好方法。它基本上遵循您的项目#1，但不会复制html /模板。pushState
大部分信息可以在以下两篇博客文章中找到：
http://lostechies.com/derickbailey/2011/09/06/test-driving-backbone-views-with-jquery-templates-the-jasmine-gem-and-jasmine-jquery/
和
http://lostechies.com/derickbailey/2011/06/22/rendering-a-rails-partial-as-a-jquery-template/
它的要点是，我使用ERB或HAML模板（运行Ruby on Rails，Sinatra等）进行服务器端渲染，并创建Backbone可以使用的客户端模板，以及我的Jasmine JavaScript规范。这消除了服务器端和客户端之间的标记重复。
从那里，您需要采取一些额外的步骤来使您的JavaScript与服务器呈现的HTML一起使用 - 真正的渐进式增强;采用交付的语义标记，并使用 JavaScript 对其进行增强。
例如，我正在使用.如果您从服务器请求，它将在服务器上呈现整个图像库，并将所有HTML，CSS和JavaScript发送到您的浏览器。如果您禁用了JavaScript，它将完美地工作。您执行的每个操作都将从服务器请求不同的URL，并且服务器将为您的浏览器呈现所有标记。但是，如果您启用了JavaScript，JavaScript将拾取已经呈现的HTML以及服务器生成的一些变量并从那里接管。pushState/images/1
下面是一个示例：
<form id="foo">
Name: <input id="name"><button id="say">Say My Name!</button>
</form>
在服务器呈现此内容后，JavaScript 将拾取它（在本例中使用 Backbone.js视图）
FooView = Backbone.View.extend({
events: {
"change #name": "setName",
"click #say": "sayName"
},
setName: function(e){
var name = $(e.currentTarget).val();
this.model.set({name: name});
},
sayName: function(e){
e.preventDefault();
var name = this.model.get("name");
alert("Hello " + name);
},
render: function(){
// do some rendering here, for when this is just running JavaScript
}
});
$(function(){
var model = new MyModel();
var view = new FooView({
model: model,
el: $("#foo")
});
});
这是一个非常简单的例子，但我认为它明白了这一点。
当我在页面加载后即时视图时，我将向视图实例提供由服务器呈现的表单的现有内容，作为视图的实例。我没有在加载第一个视图时调用渲染或让视图为我生成一个。我有一个渲染方法，可用于视图启动并运行并且页面全部为JavaScript之后。这样，如果需要，我以后可以重新渲染视图。elel
在启用 JavaScript 的情况下单击“说出我的名字”按钮将导致一个警告框。如果没有JavaScript，它将回发到服务器，服务器可以将名称呈现给某个地方的html元素。
编辑
考虑一个更复杂的示例，其中有一个需要附加的列表（来自下面的注释）
假设您在某个标记中有一个用户列表。当浏览器发出请求时，服务器呈现此列表，结果如下所示：<ul>
<ul id="user-list">
<li data-id="1">Bob
<li data-id="2">Mary
<li data-id="3">Frank
<li data-id="4">Jane
</ul>
现在，您需要遍历此列表，并将主干视图和模型附加到每个项目。通过使用该属性，您可以轻松找到每个标签来自的模型。然后，您将需要一个足够智能的集合视图和项目视图，以将自己附加到此 html。<li>data-id
UserListView = Backbone.View.extend({
attach: function(){
this.el = $("#user-list");
this.$("li").each(function(index){
var userEl = $(this);
var id = userEl.attr("data-id");
var user = this.collection.get(id);
new UserView({
model: user,
el: userEl
});
});
}
});
UserView = Backbone.View.extend({
initialize: function(){
this.model.bind("change:name", this.updateName, this);
},
updateName: function(model, val){
this.el.text(val);
}
});
var userData = {...};
var userList = new UserCollection(userData);
var userListView = new UserListView({collection: userList});
userListView.attach();
在此示例中，将遍历所有标记，并附加一个视图对象，每个对象都有正确的模型。它为模型的名称更改事件设置事件处理程序，并在发生更改时更新元素的显示文本。UserListView<li>
这种过程，采用服务器呈现的html并让我的JavaScript接管并运行它，是让SEO，可访问性和支持滚动的好方法。pushState
希望有所帮助。
