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

问题描述 投票:3回答:1

我只使用带有JS脚本的index.html生成整个站点。

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

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

这不是一个新问题......我敢肯定任何人在客户端动态生成页面都遇到了这个问题并解决了它,但我想在开始尝试解决这个问题之前我会问开发社区。

javascript html static generator client-side
1个回答
1
投票

2019 Update

Tech已经取得了重大进展。我鼓励任何想要在一个同构代码库中创建SSR(服务器端呈现)和客户端Web应用程序的人来看看优秀的Next.js.

Next.js使用Node.js内置的服务器端路由和渲染系统包装React,定义了一个标准接口,用于获取服务器和客户端上的页面数据,并附带一些开箱即用的功能,使其成为最好的之一SSR和CSR Web应用程序的选择(IMHO)。

哦......他们也有很棒的教程!

2013 Answer

我已经设法通过使用PhantomJS从客户端输出生成静态页面,并在页面和所有JS完成加载/执行后捕获HTML输出。这种方法比我想要的慢,并且不太可能很好地扩展,但它是我能想到的唯一选择。

该网站每天收到超过10,000个页面浏览量,超过8,000个唯一身份访问者,因此在创建新评论/帖子时会定期更新页面,然后将这些更改添加到队列中,该队列在单独的服务器中进行处理以使用Phantom生成静态页面。

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

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

© www.soinside.com 2019 - 2024. All rights reserved.