Javascript 部分更新，同时支持搜索引擎优化

使用NodeJs，我试图做一些与Meteor非常相似的事情：我只想发送页面中实际更改的部分。我的困境是，我知道如何创建这样一个框架来响应链接点击并发送部分更新，但这样一个框架不适合直接浏览到索引以外的页面（这是搜索引擎和没有javascript的人使用站点所必需的）

我还可以想出如何制作一个框架来支持整个页面的重新加载，手柄和一个简单的节点服务器实例就可以解决这个问题。然而，我不知道如何创建一种方法，允许我编写一个方法来告诉框架页面的部分更新，并让框架知道还需要加载什么

我能想到的一种方法是每次创建索引页面（对于整个页面加载）并对其应用部分更新，但如果子页面与非常拥挤的索引有很大不同，那么这可能会很快变得昂贵

示例方法如下所示：

function images(id) {
    if (id == null) {
        // load all images from database
        template.images = db.result();
        template.content = template.loadblock('gallery');
    }
    else {
        // retrieve single image
        template.content = template.loadblock('single_image');
        template.image = db.result();
    }
}

在partisl updste上，为domain.com/images调用此方法会很好地工作，因为很清楚发生了什么变化。 对于整个页面加载，此函数将丢失诸如页眉、页脚、导航等内容

在回答中，我会寻找一个这样做的例子，或者一些可以为我指明正确方向的提示。我为我在ipad上写这篇文章时出现的任何打字错误感到抱歉。如果您对我的问题有任何疑问，请提问，我会根据需要更新

更新： 下面的代码可能是解决方案的一个可能示例。这是为了给出一个想法，它可能不会真正运行

// As a convention, don't pass around raw values if they aren't static but pass around functions such as
data.images = function () {
    // run db query
    // return an object with the images
}
// This constraint might be limited to the index() method

var routes = {
// This now allows us to do things like this:
index: function() { 
    var data;
    // Initialise everything needed for the index
    data.title = 'Index';
    data.nav = { Index: '/', Images: '/images' };
    data.content = 'Hello World';
},

categories: function() {
    var data;
    data.content = render('gallery', function () { /* load and return images as object */ }); // Not sure about this dynamic subtemplating but oh well
}

// This now allows us to do the following:
function request(page, type) {
    if (type == 'update') {
        if (routes[page] != undefined && typeof routes[page] == 'function') {
            respond(routes[page]());
        }
    }
    else {
        if (routes[page] != undefined && typeof routes[page] == 'function') {
            var data = mergeArrays(routes['index'](), routes[page]());
            // index.html which is just a Handlebars template
            respond(data);
        }
    }
}

---

以下是我经常使用的模式（在Express应用程序中）：

用法示例：

app.get('/images', function(req, res, next) {
  getImages(function(err, images) {
    if(err) return next(err);

    respond(req, res, 'images', images);
  });
});

app.get('/images/:id', function(req, res, next) {
  getImage(req.params.id, function(err, image) {
    if(err) return next(err);

    respond(req, res, 'image', image);
  });
});

image.jade：

img(src=uri, alt=title)

images.jade：

#gallery
  for image in images
    include image

---

请求JSON的客户机可以得到它，否则只有当它是非XHR请求时，他们才能得到完整的页面。XHR请求只获取所请求资源的HTML代码段。这适用于非常简单的应用程序，其中资源主要对应于页面。

但是这意味着我需要为每个可能的页面提供一个资源/模板文件，对吗？据我所知，对于完整页面和部分更新，我仍然需要一个单独的方法？正如我所写的，这适用于非常简单的应用程序，其中页面通常对应于资源。我添加了一个使用示例来说明这一点，并添加了一个资源列表，其中列表模板仅包含资源模板。+1对于这一点，尽管我的问题更多地存在于此，但是页面的其余部分呢。我的意思是，你会有一个图库和一个嵌入在页眉、页脚等中的单个图像。对于json请求，这不需要更新，但是对于整个页面请求，这些元素仍然需要呈现。上面的代码并不能满足这个要求，是吗？它不能，我怀疑你是否能得到一个完全涵盖你的问题的答案。这是一种模式，如果你愿意的话，它会推动你前进。对于Meteor所做的事情，我会为更新（websockets/服务器发送的事件）、客户端渲染以及类似主干、淘汰或类似的内容添加一个后台通道。我明白了：）客户端渲染意味着您的搜索引擎有问题；）感谢迄今为止的帮助：）

#gallery
  for image in images
    include image