从客户端JavaScript生成的站点生成静态HTML

从客户端JavaScript生成的站点生成静态HTML,javascript,html,static,generator,client-side,Javascript,Html,Static,Generator,Client Side,我只使用index.html和JS脚本生成整个站点 JS基于通过服务器端API接收的JSON数据创建HTML内容。这在客户端非常有效,使站点加载速度和交互速度非常快,但存在一个障碍。。。当爬虫来索引页面时,它将看到一个空白页面 显而易见的解决方案是提供一个包含所有页面静态版本的XML站点地图。问题是。。。当每个页面只在客户端生成,并且所有逻辑和模板都在客户端生成时,如何生成每个页面的静态版本 这不是一个新问题。。。我确信任何一个在客户端动态生成页面的人都遇到了这个问题并解决了这个问题,但我想在深

我只使用index.html和JS脚本生成整个站点

JS基于通过服务器端API接收的JSON数据创建HTML内容。这在客户端非常有效,使站点加载速度和交互速度非常快,但存在一个障碍。。。当爬虫来索引页面时,它将看到一个空白页面

显而易见的解决方案是提供一个包含所有页面静态版本的XML站点地图。问题是。。。当每个页面只在客户端生成,并且所有逻辑和模板都在客户端生成时,如何生成每个页面的静态版本

这不是一个新问题。。。我确信任何一个在客户端动态生成页面的人都遇到了这个问题并解决了这个问题,但我想在深入研究并试图解决这个问题之前,我会询问开发人员社区。

2019更新 科技进步显著。我鼓励任何希望在一个同构代码库中创建SSR(服务器端渲染)客户端web应用程序的人来看看优秀的Next.js

Next.js与Node.js中内置的服务器端路由和渲染系统配合使用,定义了获取服务器和客户端页面数据的标准接口,并提供了一些现成的功能,使其成为SSR和CSR web应用程序的最佳选择之一(IMHO)

哦。。。他们也有很棒的教程

2013年答案 通过使用PhantomJS并在页面和所有JS完成加载/执行后捕获HTML输出,我成功地从客户端输出生成了静态页面。这种方法比我希望的要慢,不太可能很好地扩展,但这是迄今为止我能想到的唯一选择

该网站每天已经收到超过10000个页面浏览量,超过8000个独立访客,因此页面会随着新评论/帖子的创建而定期更新,然后这些更改会添加到一个队列中,该队列在单独的服务器中获取进程,以生成带有Phantom的静态页面

我唯一能想到的另一种方法是创建一个Node.js进程,该进程使用相同的jsRender库,并根据一些数据从模板文件中构建HTML输出,但这将非常耗时,并且不会生成与动态站点创建的完全相同的输出。谷歌可能不赞成我为它提供静态页面,而这些页面并不真正代表“普通”访问者可以看到的动态版本


这似乎是一个无法解决的问题。要么我完全在服务器端生成页面,要么爬虫程序无法索引页面:(

当你说这是工作客户端时,你的意思是页面不在服务器中,当你将相同的页面放在服务器中时,这些页面可以工作?api服务器有另一个域,你托管页面的服务器?@Rolando在网站上显示HTML(除了index.HTML,它只是一个带有脚本标记的主体,用于加载JavaScript应用程序)都是通过JavaScript生成的。如果加载index.html文件时没有任何JavaScript,则该文件将是一个空白页。该网站可以工作?但谷歌ajax爬虫看不到?如果是这样,请看:爬虫将修改每个ajax URL,如www.example.com/ajax.html#!mystate,以临时成为www.example.com/ajax.html?_转义_fragment#=mystate.We将前者称为“漂亮的URL”,将后者称为“丑陋的URL”。您可以使用tampermonkey或greasemonkey通过抓取链接来迭代站点上的所有页面,并在本地下载这些页面。然后,您可以将所有下载内容复制到服务器。或者,您可以使用php/asp catcher为用户脚本设置一种保存到服务器的方法。