混合渲染可用于渲染特定页面，以此来获得更高的渲染性能。...提高热度页面的渲染性能； 2. 提高大型站点的构建性能； 3. 向已有的静态站点中加入 API。...有了混合渲染，开发人员可以在构建时预渲染特定的页面或服务器端点，无需放弃已部署的服务器。 大型网站通常有适合使用预渲染技术生成内容的部分，也有需要在请求时生成内容的部分。...对于使用 Jamstack 的大型站点，比较有价值的是增量静态生成，这是由应用程序框架 Next.js 推广的一种渲染方式。...Astro 新版本还提供了重新设计的错误叠加，改进了对开发阶段模块热加载的支持，并使用了新发布的 Vite 4.0 来构建内容。
## 增量静态再生（ISR）增量静态再生（ISR）是Next.js对缓存模式称为“过时但可重用”（SWR）的专有实现。这允许重新生成已修改的单个静态呈现页面，而不是从头开始重新构建整个站点。...使用SWR，您可以发布对特定页面的更改，例如通过CMS的webhook触发，而无需触发完整的站点重建，从而实现更快的站点更新。SWR允许非常快速地更新静态内容，同时保留SSG的优点。...当您使用SWR呈现特定页面时，该页面的一个版本将在初始构建期间进行静态生成和缓存。当该页面被更新时，不会立即触发该页面的重建，而是在下一次有人请求该页面时进行。...您可以选择仅静态预生成最受欢迎和/或关键的页面，并使用 DPR 增强您的渲染策略，而不是预先构建整个站点。DPR 允许您在第一次请求时按需静态生成和缓存页面。...ESR 可以为整个站点、单个页面甚至仅页面的某些部分实现。
给定相同的 Vue 单文件组件，Vapor 模式将生成比现有 Vue 标准编译策略更高效的 JavaScript 代码。你无需为整个应用使用 Vapor 模式，可以选择在特定组件上逐个应用。...作为 Svelte 的应用框架，SvelteKit 提供了诸如路由、服务器端渲染和静态网站生成以及部署工具等功能。...SPA 模式：Remix 引入了 SPA 模式，允许构建纯静态站点，无需在生产中使用 JavaScript 服务器。...Astro Astro，一款现代静态站点构建工具，以其创新的 Web 开发方式引起了社区不小的轰动。...混合渲染：Astro 现在支持混合渲染，结合静态站点生成和服务器端渲染的优势，提高了灵活性。 图片和图片组件：新的图片和图片组件，简化了图像处理并提供自动优化。
Astro可构建加载速度更快的网站，这些网站的JavaScript数据更少。 这一概念与静态站点生成 (SSG) 非常相似，但主要区别在于Astro支持在页面中使用动态交互内容。...而Svelt的作者Rich Harris于去年加入Next.js后的Vercel团队。 与Next.js类似的是，Svelte拥有自己的元框架，即SvelteKit，可构建高性能应用程序。...03 Node.js框架 一般来说，各大UI框架都拥有自己的“元框架”来构建可扩展的应用程序，并提供诸如路由、服务器端渲染（SSR）、生成静态页面、优化构建等功能。...而Next.js则非常看好swc的发展，作为一个可扩展的Rust编译器，swc可将Babel插件移植到Rust上。 Rust是最受欢迎的的非JS语言，但它并不是唯一的语言。...07 JavaScript中的CSS 08 测试框架 09 移动开发 10 桌面开发 11 静态站点 12 状态管理 13 GraphQL 14 结论 为构建更好的网站和应用程序，元框架时代已悄然来临
我是因为两年前看了这个视频而爱上 svelte 的。最近，Rich 新推出了 SvelteKit，是 svelte 下的开发框架（可以认为是 sapper 的下一代）。...多讲两句 SvelteKit。SvelteKit 引入了 snowpack 做构建，效率非常高，开发体验很好。...至于更加复杂的静态站点，我会用 next.js。...svelte + tailwind 缺一套成熟的 UI 库；next.js 主业是静态网站生成。...比如要设定整个 app 的 layout，可以用 layout builder 所见即所得生成，然后拷贝代码即可： ?
基于 Vite 的极速构建工具链 带来的开发体验更丝滑的组合式 API 语法 Volar 提供的单文件组件 TypeScript IDE 支持 vue-tsc 提供的针对单文件组件的命令行类型检查和生成...、方法：只允许类内部访问； 类的静态公共字段：使用 static 关键字声明静态类字段。...有点类似 @media 查询，区别是它们根据的是容器的大小而不是视口的大小进行判断的。...[10-25] Chrome 107：支持识别渲染阻塞资源 对页面性能的可靠洞察对于我们构建好的用户体验是至关重要的，在以前，我们通常会依靠一些复杂的启发式方法来确定资源是否阻塞页面的渲染。...经过两年的开发，SvelteKit 1.0 已正式发布，现在可用于生产环境，它提供了服务端渲染、路由管理、针对 JS 和 CSS 的代码分割，以及针对不同 Serverless 平台生成不同代码的适配器等功能
Astro 可构建加载速度更快的网站，这些网站的 JavaScript 数据更少。 这一概念与静态站点生成 (SSG) 非常相似，但主要区别在于 Astro 支持在页面中使用动态交互内容。...与 Next.js 类似的是，Svelte 拥有自己的元框架，即 SvelteKit，可构建高性能应用程序。 排名第五的是 Solid，是 React 的替代工具之一。...Node.js 框架 一般来说，各大 UI 框架都拥有自己的“元框架”来构建可扩展的应用程序，并提供诸如路由、服务器端渲染（SSR）、生成静态页面、优化构建等功能。...而 Next.js 则非常看好 swc 的发展，作为一个可扩展的 Rust 编译器，swc 可将 Babel 插件移植到 Rust 上。 Rust 是最受欢迎的的非 JS 语言，但它并不是唯一的语言。...JavaScript 中的 CSS 测试框架 移动开发 桌面开发 静态站点 状态管理 GraphQL 结论 为构建更好的网站和应用程序，元框架时代已悄然来临。
Vercel 和 SolidStart（基于 Solid.js 构建）提供支持，较 React.js 拥有更好的开发者体验。...几年以来，Next.js 一直是这股变化背后的核心驱力，而 SvelteKit 等其他元框架也正在加入战团、共同促成这一历史性转变。...尽管两种模式的基本用途并不相同，但凭借长久以来与静态站点生成（SSG）的竞争，SSR 如今已经拥有近乎完美的性能表现（参考 Next.js 和 Gatsby.js）。...虽然 SSR 和 SSG 在前几年迎来了一波性能优化趋势，但实际发展的只是增量静态再生成（ISR）和流式 SSR 等更具体的渲染技术。前者改善了 SSG 性能，允许在每页基础之上静态重建整个网站。...这些包可以在各种应用程序中直接导入：使用所有共享包的实际应用程序（例如 app.mywebsite.com 客户端渲染）、仅使用共享设计系统包且考虑 SEO 需求的主页 / 产品 / 登陆页面（例如由服务器端渲染或静态站点生成的
当查看使用特定框架构建的所有已知网站时，Astro和SvelteKit的平均通过率超过了所有测试的网站的平均通过率（40.5％），而其他框架则没有。...两个指标的不同之处在于INP观察用户对页面进行的所有交互的延迟，而不仅仅是第一个交互。低INP意味着页面能够始终快速响应所有或绝大部分用户交互。...根据谷歌的说法，INP通过覆盖一个网站的整个交互谱系，从页面开始加载到用户离开页面的时间，更全面地衡量了网站的响应性。这种全面的测量使INP比FID更可靠地指示网站的整体响应性。...引用 INP的整体性质使其比FID更具挑战性，因为您的代码必须以一种方式实现，以在用户的整个旅程中保护响应性，而不仅仅是在第一次加载时。...例如，Django 是一个非常强大的框架，适合大型项目，而 Flask 则非常轻便，适合快速开发。对于 Ruby on Rails 和 Laravel等框架，本文还介绍了它们在特定情况下的应用。
此外 Whisky 还支持 Homebrew 安装，并提供了针对特定游戏问题的 Wiki 页面。...性能优化：利用 Vercel 的边缘网络对博客文章进行快速地缓存，并可以使用增量静态再生成 + Next.js 的 revalidateTag API 在需要时 (当用户进行更改) 刷新缓存。...自定义样式：通过 Next.js 基于文件系统实现 Metadata API 来为每个站点设置定制字体、404 页面、favicon 和网站地图等特性。...动态 OG 卡片：每篇博文都有动态 OG 图像，由 @vercel/og 提供支持 Dark Mode：更好夜间模式下的用户体验 该项目适合构建以下类型平台： 内容创作平台：这些内容密集型平台 (博客)...网站与电商店铺生成器：可定制页面且支持非编码方式创建网站。 B2B2C 平台：支持多租能力认证、登录和访问控制等特性。
而Vite则避开了这一点，它顺应时代潮流而产生的，继承了诸多前辈的优点。...鉴于Vite使用anindex.html作为切入点并构建为纯HTML，CSS和JavaScript的特性，毫无疑问它是一个是用于静态站点和潜在的Jamstack应用程序的出色工具。...调整Vite的汇总配置之后，我们可以使用Vite创建多个页面，如文档中的多页应用。...如果我们有特定的需求，Vite允许我们自行设置，可以覆盖Rollup和各种Rollup插件的配置。 项目中绑定的工具越多，整体就会越脆弱。...如果一个组件发生故障或引入了重大更改，则整个流程将中断，我们必须再次深入研究每个工具和插件及其复杂性，以对其进行修复，Vite从根本上减轻了开发的负担。
React 按照官方文档的解释： React是一个声明性、高效且灵活的JavaScript库，用于构建用户界面。它允许我们从称为“组件”的代码片段组成复杂的UI。...Next.js 维基百科对Next.js的解释： Next.js是一个由Vercel创建的开源web开发框架，支持基于React的web应用程序进行服务器端渲染并生成静态网站。...它使用基于页面的路由以方便开发人员，并支持动态路由。 其他功能包括：模块热更新、代码自动拆分，仅加载页面所需的代码、页面预获取，以减少加载时间。 Next.js还支持增量静态再生和静态站点生成。...网站的编译版本通常在构建期间构建，并保存为.next文件夹。当用户发出请求时，预构建版本（静态HTML页面）将被缓存并发送给他们。...这个不太好直接下结论，因为React是一个用于构建UI的库，而Next是一个基于React构建整个应用程序的框架。 React有时比Next更合适，但是有时候Next比React更合适。
下面先来回顾一下在这些构建工具出现之前是如何编写 Web 页面的。...可以通过编写 loaders 来将这些格式转化为可执行的 JavaScript，这样编译的开销也只会在构建时产生，而不会影响运行时性能。...原生 ESM 2017年，浏览器终于支持了原生 ESM，这意味着以后可以在浏览器中直接使用 ESM 规范，而不是只能在构建时才能使用。...第一个 release 版本的核心逻辑比较粗糙，并且仅支持 Vue组件，因为最初的想法是找到一个轻量的 vue-cli 的替代品。...所以，在 Vue 的生态中，提供了一个静态站点生成器：VitePress，它是一个基于 Vite 的高级别应用。它允许通过路由去编写 HTML 文件，并且可以在其中引入 Vue 组件。
工程方案其实也可以小而美！只不过它的小而美不是指代码量，而是指“规则”。...，也更容易支持多个团队共同维护一个大型站点的开发。...前端这种GUI软件的界面状态，是UI组件的容器 首页(index)，列表页(list)，用户管理(user) 应用 整个项目或整个站点被称之为应用，由多个页面组成 以上5种开发概念以相对较少的规则组成了前端开发的基本工程结构...简单看过整个系统之后发现原理并不复杂（小而美的典范），它是通过一个小工具扫描所有静态资源，生成一张资源表，然后有一个PHP实现的资源管理框架（Celerity）提供了资源加载接口，替代了传统的script...资源表是一份数据文件（比如JSON），是项目中所有静态资源（主要是JS和CSS）的构建信息记录，通过构建工具扫描项目源码生成，是一种k-v结构的数据，以每个资源的id为key，记录了资源的类别、部署路径
工程方案其实也可以小而美！只不过它的小而美不是指代码量，而是指“规则”。...由于系统功能被分治到独立的模块或组件中，粒度比较精细，组织形式松散，开发者之间不会产生开发时序的依赖，大幅提升并行的开发效率，理论上允许随时加入新成员认领组件开发或维护工作，也更容易支持多个团队共同维护一个大型站点的开发...前端这种GUI软件的界面状态，是UI组件的容器 首页(index)，列表页(list)，用户管理(user) 应用 整个项目或整个站点被称之为应用，由多个页面组成 以上5种开发概念以相对较少的规则组成了前端开发的基本工程结构...，随着页面访问的增加，渐进式的将整个程序下载到本地运行，“增量下载”是前端在工程上有别于客户端GUI软件的根本原因。...简单看过整个系统之后发现原理并不复杂（小而美的典范），它是通过一个小工具扫描所有静态资源，生成一张资源表，然后有一个PHP实现的资源管理框架（Celerity）提供了资源加载接口，替代了传统的script
包含值以及 getter 和 setter 函数，允许框架观察和更新 DOM 中所需的确切位置的变化，而 React 则重新渲染整个组件。 Solid.js 不仅使用 JSX，还对其进行了增强。...在 Astro 的上下文中，岛屿是页面上的一切交互式 UI 组件，从静态内容的海洋中脱颖而出。页面可以有任意数量的岛屿，因为它们彼此独立运行，但它们也可以共享状态并相互通信，非常的好用。...Astro 的另一个有趣之处在于，他们的实现方式允许用户使用不同的前端框架[5]，如 React、Vue、Solid 来构建网站。...类似于 Solid 和 Solid Start，Svelte 也有自己的框架，称为 SvelteKit。SvelteKit 为用户提供了一种快速启动 Svelte 应用的方法，由 Vite 提供支持。...每个人都寻求以一种建立在他们当前知识基础上的方式来吸引潜在的新开发者，而不是做完全新的事情，这是一个非常酷的概念。 当然，这里可能还有更多的图书馆和框架在整个文章中没有提及，但至少值得带一笔。
对 Vite、NextJS 和 SvelteKit 的零配置支持 Storybook 7 引入了对 Vite、NextJS 和 SvelteKit 的零配置支持。...以组件为中心的自动文档生成 在 Storybook 7 中，你现在可以直接将文档附加到你的组件上。页面会出现在侧边栏中，与组件的 stories 一起显示，而不是以前的选项卡式用户界面。...你可以通过添加autodocs标签来为组件启用自动生成的文档页面。 带有 MDX 2 加持的手动文档编写 Storybook 7 通过支持 MDX2 提供了增强的手动文档编写功能。...此外，我们还提供了一个useOf 钩子，用于创建自定义文档 Blocks，让你根据特定要求自定义文档页面。 在官方文档里可以了解更多有关这些变化的信息。...我们认为 Storybook 7 做得很好，并且打算未来的重大版本发布将更多地支持各种工具的最新版本，而不是重新制定开发、文档编制和组件测试的基本原则。
Vite 5 专注于清理 API（删除不推荐使用的功能），并简化了解决长期问题的几个功能，例如切换定义以使用正确的 AST 替换而不是 regex。...对于 Vite 插件，this.parse目前仅支持allowReturnOutsideFunction选项。 CJS Node API 已被弃用 Vite 的 CJS Node API 已被弃用。...应该更新文件或框架，以导入 Vite 的 ESM 构建而不是 CJS 构建。 在基本的 Vite 项目中，请确保： vite.config.js文件内容使用 ESM 语法。...而从 Vite 5 开始，默认情况下它们将会生成在.build.outDir目录中的.vite目录中。这个改变有助于避免公共文件与相同的清单文件名在复制到build.outDir时发生冲突。...它可能会转译为静态初始化块，而这在浏览器中可能不被支持。
，在构建时生成静态页面，不同用户访问到的都是同一个页面。...这个方法 generateStaticParams方法返回静态页面所有路由变量值的数组，假如使用的是[name]这个变量做文件名，该方法就需要返回name的所有情况 和pages不同的是，app路由不需要用特定的静态方法获取数据...，而缺点也是因为静态，不能动态渲染，每添加一篇博客，就需要重新构建。...所以有了ISR，增量静态生成，可以在一定时间后重新生成静态页面，不需要手动处理。...On-demand Revalidation（按需增量生成） NextJS提供了更新静态页面的方法，我们可以在 app 目录下新建一个 app/api/revalidate/route.ts接口，用于实现触发增量更新的接口
领取专属 10元无门槛券
手把手带您无忧上云
