基于Deno的新交互框架：Fresh如何改善用户体验
随着 Fresh 1.0 的发布，这款基于 Deno 的框架在将近一年后终于有了第一个稳定的版本。那么，高效且对客户端浏览器友好、非必要不允许渲染动态内容的 Fresh 是如何做到这些的呢？
让我们拭目以待吧！
或许我们应该先解决这个问题？SSR（服务端渲染）、渐进式 SSR 之类都在试图优化渲染过程，在服务端完成大部分工作，在客户端通过水合重新创建不同组件。这些可没有听起来那么简单，我们可是在重新连接事件和处理程序，从虚拟 DOM 中重新创建 DOM。这其中的主要问题在于，需要传输到客户端的 JavaScript 可不在少数，而到了关键时刻，必须送到客户端的，最昂贵的数据类型就是 JavaScript。
同样的字节量下，无论你传输到设备中的是图片、CSS、HTML 还是 JavaScript，其中要花大功夫处理还是 JavaScript。我们要做的不只是传输数据，更要对这些数据处理和解释。或许对于 M1 MacBook pro 来说这些没什么差别，但如果你的移动设备是个老古董，而且网还特别慢，那影响可就大了。
那我们现在要做什么呢？当然是想法子搞到鱼和熊掌。或者说，我们既要给所有人提供动态或交互式内容，还要想办法把传输的 JavaScript 量降到最小，让所有人都能真正享用我们的网站或应用程序。
岛（Islands），或者说互动岛，都是指互动组件。就是这样，就是这么简单，是不是很失望？我们在服务器上渲染所有的静态内容后，将其传送到客户端中动态组件的占位符（也就是岛）里。随后在客户端中，异步水合（Hydrate）每一个岛。是的，每一个岛都可以自行进行水合，都是独立于彼此的，这也就是为什么会叫“岛”吧？我猜的。
而在 Fresh 里，岛是我们构建在一个叫“islands”的特殊文件夹中的组件，框架会将其识别为特殊组件以区别对待。没了。岛的美妙之处在于，我们可以不清楚其背后构造直接拿来用。我们只需要问自己一个问题，“这个组件需要是交互式的吗？”
如果答案是“否”，那么继续按照原来的组件创建方法不用动。
如果答案是“是”，那么也还是继续原来的方法，记得把文件都放在那个叫“islands”的文件夹里即可。
就是这么的简单。
而交互式组件也可以直接通过静态组件调用，所以这也不是什么大问题。具体改善最终用户体验的魔法都是在框架内部施展的。
对开发者而言，我们确实不需要关心，我们甚至可以不知道它的存在。但既然聪明人在思考向浏览器传送代码和内容的全新方式，那一定是有理由的，并且一定是个好理由。
或者说，应该是好几条理由：
性能。还记得前面提到的，通过 SSR 将大量 JavaScript 传送到客户端侧，重新创建虚拟 DOM 等等一系列无聊任务吗？岛让我们可以只需要重新创建一个组件，而且还是异步的，其余每个组件都能照顾好自己。因此，所需的 JavaScript 的数量大大减少，运行起来也要简单很多。
SEO。这点虽然并不是 Fresh 框架特有的，但也算是个好处。SEO 尤为偏爱将所有静态内容都在服务器端渲染的网站。
重要的东西先渲染。这点很好实现的，用户感兴趣的东西十之八九是静态内容，这些东西无论什么情况都会优先渲染。至于你在周围塞的交互式按钮、链接、小工具要等上几微秒才会出现，谁又在乎呢？你的用户会高兴地看到自己想要的东西，不会因为一个缓慢加载的 JavaScript 而耽误世间。
所以说，岛非常棒，我们可以用岛建任何东西。
虽然这么说，但你可能并不想这么干。我最近为了我的博客节目 20MinJS 采访了 Fresh 的创始人 Luca Casonato，据他所说，在考虑岛之前你应该先算一算自己的动态静态内容占比。如果你大部分内容都是静态的，那么像是 Fresh 之类的就很适合你，你会享受到这个框架所带来的全部好处。
然而，如果你大部分内容都是动态的，比如社交媒体网站，或者是 Figma 之类的应用程序，基本就是浏览器中的一个桌面应用程序，那么构建岛就没什么意义了。你不仅享受不到静态内容渲染的好处，还得在岛里构建所有东西。这种场景下，其他类型的框架和架构可能更合适。
虽然我是因为 Fresh 才了解到岛的，但其实 Fresh 并不是第一个将其付诸实践的。顺带一提，Fresh 是以 Preact 为基础，但降低了在客户端中运行所需的 JavaScript 数量。也就是说，如果你对 Fresh 一无所知并且非常担心看不懂文档，那么放宽心，只要你懂 React 就没问题。
除了 Fresh 之外，另一个用岛的流行框架 Astro 不仅提供了部分水合，还有在服务器端静态 HTML 的同时懒加载动态组件的功能。还有 MarkoJS 框架，虽然他们的主页上没有明确地提到岛，只写了他们是如何传送互动组件需要的代码，其余部分全是用 SSR，但这就其实岛的定义。
虽然如你所见，岛的概念以及围绕它的整个架构还没有被广泛使用，但这只是一个开始，考虑到岛所能带来的性能改善，相信很快所有静态优先类型的框架都会开始实施它。
交互性架构的岛这个名字很顺耳。虽然岛的概念很简单，但它在性能和渲染时间方面所带来的好处是非常多的。岛应该是每一个静态优先类型的网站生成器都努力实现的模式。
你尝试过 Fresh 吗？对它有什么想法吗？
原文链接：https://blog.bitsrc.io/islands-of-interactivity-what-are-they-and-why-is-fresh-using-them-1806fc67a07
声明：本文为InfoQ翻译，未经许可禁止转载。
活动推荐