我们希望能够推出多项新功能,而不必担心 CMS 的内部运作,也不必担心 CMS 中的某个插件是否会与我们的新代码发生冲突。Netlify 的部署系统会处理所有 DevOps 难题,并自动为我们启动 Edge Functions。
使用 Netlify Edge 函数修复累积布局偏移 (CLS)
我们希望显示一个 cookie 横幅,但我们不希望因此出现累积布局偏移(即,页面首先加载,然后检查 cookie,如果没有找到,则向用户显示一个横幅,将其他页面内容向下推)。
为了解决这个问题,我们使用了Netlify Edge Functions。Edge Functions 允许您在传出的 HTML 到达用户 象牙whatsapp数据 之前非常快速地处理它。在我们的例子中,我们想要读取请求中的 cookie 标头(浏览器会将其与所有请求一起发送到您的域)。如果设置了 cookie,则我们什么也不做,如果未设置 cookie,则我们添加 HTML 以显示 cookie 横幅。这样,当 HTML 到达用户时,横幅已经存在,或者不存在 - 没有 CLS!
使用 Edge Functions 从页面搜索中删除 JS 和 CLS
另一个需要删除 JS 和 CLS 的功能是站点搜索。在 SPA 中,URL?search=my-text会首先加载页面,然后获取结果并将其呈现在页面中。
我们希望防止这种情况发生,因此我们在搜索结果中执行搜索edge-function,并在返回给用户之前替换结果。我们给请求添加了少量延迟,但页面会返回完整呈现的所有内容。
使用 11ty 和 Netlify Deploy Previews 预览内容
使 CMS 无头化的问题之一是 CMS 的内置预览功能不再起作用。使用 11ty render 和 Netlify Functions 来解决这个问题。
与边缘函数不同,常规函数只是在其自身端点上返回数据的常规 JS。为了使页面预览正常工作,我们需要让 11ty 仅渲染一个页面并返回它。
的整个网站上有超过 15,000 张高分辨率图像,并且仍然保持着较高的页面性能分数和近乎完美的核心网络生命力。
情况并非总是如此。直到最近,Maistra's Hospitality 的网站都是在单体 PHP 应用程序上构建和部署的。它加载速度很慢,代码库庞大且难以维护,最重要的是——很难自定义 UI。