javascript - 禁用 Javascript 的 Gatsby 静态站点

标签 javascript reactjs gatsby progressive-enhancement graceful-degradation

是否可以使用 Gatsby 生成可以在浏览器中禁用 Javascript 的情况下查看的静态站点?

我听说可以通过这种方式访问​​ Gatsby 站点,但我尝试了各种 Gatsby 启动器,包括 gatsby-starter-defaultgatsby-advanced-starter并且它们都只会在禁用 Javascript 时显示索引页面。链接点击返回白屏。

我只是在这里寻找一些优雅的降级——我只需要渲染基本的页面和图像,仅此而已。

最佳答案

Gatsby 正在生成应用程序的关键部分,这些部分会在页面加载时显示,然后使用 React “水合”页面,这意味着它首先显示关键的 HTML 和 CSS,然后才加载网站的动态部分。因此,如果您使用一些无法预渲染的额外 react 组件,它们将无法工作,但整个站点应该可以工作。

如果您使用服务 worker 并从 devtools 禁用 JS,则可能是缓存问题。尝试从浏览器首选项中禁用 javascript,并在不打开 devtools 的情况下从隐身窗口运行网站。基于 GatsbyJS 的网站应该可以工作。

但是,启用 PWA 和服务 worker 后,您的网站会更快,使用更少的数据,这确实需要 javascript。

关于javascript - 禁用 Javascript 的 Gatsby 静态站点,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53080316/

相关文章:

javascript - 如何使用 Angular.js 从表中获取选定值

javascript - 无法使用服务器端渲染访问 DOM - react 0.14.1、react-dom 0.14.1 和 react-router 1.0.0-rc3

javascript - 如何创建 Konva-React 上下文菜单

javascript - 以编程方式呈现的 Redux 字段的动态验证

redux - 如何将 Gatsby 混合站点连接到 Apollo/Graphcool(或 Redux)?

javascript - 仅在生产环境中使用 Gatsby 和 Material UI 时,首次访问页面时 HTML 消失

reactjs - 如何使用 gatsby 将值传递给 GraphQL 查询并使用react?

javascript - onclick 占位符图像播放可见的嵌入式视频

javascript - 如何通过字符差异作为分隔符来拆分字符串?

javascript - 我如何使用angularjs从异步调用中定义全局变量?