我只使用带有 JS 脚本的 index.html 生成整个网站。
JS 根据通过服务器端 API 接收到的 JSON 数据创建 HTML 内容。这在客户端工作得很好，使网站加载速度和交互非常快，但有一个障碍......当爬虫来索引页面时，它会看到一个空白页面。
显而易见的解决方案是提供一个包含所有页面静态版本的 XML 站点地图。问题是...当每个页面仅在客户端生成并且所有逻辑和模板都在客户端时，如何生成每个页面的静态版本？
这不是一个新问题......我敢肯定任何在客户端动态生成页面的人都遇到过这个问题并解决了它，但我想在深入研究并尝试解决这个问题之前我会问问开发社区。
最佳答案
2019更新
技术已取得显着进步。我鼓励任何希望在一个同构代码库中创建 SSR(服务器端呈现)和客户端 Web 应用程序的人看看出色的 Next.js。
Next.js 将 React 与一个在 Node.js 中构建的服务器端路由和渲染系统包装在一起，定义了一个标准接口(interface)来获取服务器和客户端页面的数据，并带有一些开箱即用的功能，使其成为一体SSR 和 CSR Web 应用程序的最佳选择(恕我直言)。
哦...他们也有很棒的教程!
2013 年答案
我已经设法通过使用 PhantomJS 从客户端输出生成静态页面，并在页面和所有 JS 完成加载/执行后捕获 HTML 输出。这种方法比我想要的要慢，而且不太可能很好地扩展，但这是目前我能想到的唯一选择。
该网站已经每天收到超过 10,000 次页面浏览，有超过 8,000 名独立访问者，因此页面会随着新评论/帖子的创建而定期更新，然后将这些更改添加到队列中，该队列在单独的服务器中进行处理以生成静态页面与幻影。
我能想到的唯一其他方法是创建一个 Node.js 进程，该进程使用相同的 jsRender 库并根据一些数据从模板文件构建 HTML 输出，但这会耗费时间来设置和不会生成与动态站点创建的完全相同的输出。 Google 可能不赞成我为它提供静态页面，这些页面并不真正代表“普通”访问者可以看到的动态版本。
这似乎是一个无法解决的问题。要么我完全在服务器端生成页面，要么爬虫无法为页面编制索引。 :(
关于javascript - 从客户端 JavaScript 生成的站点生成静态 HTML，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/16470447/