Next.js
网站开发是一个基于 React 的框架,为这个问题提供了解决方案。它承诺使用一组易于使用的功能(包括预渲染)来提高网站的性能。考虑到开发者社区在框架发布后的短时间内蜂拥而至,可以肯定地说 Next 毫无保留地兑现了这一承诺。
尽管像 React 这样的现代基于 Javascript 的前端框架帮助我们开发了强大的动态网站,但它们有一个主要缺点:客户端必须等到所有 Javascript 代码加载后才能呈现页面并向用户显示内容。由于页面的加载速度会显着影响其用户体验和搜索引擎排名,这已成为 Web 开发中的主要问题。
与 React 这样的框架相比,Next.js 最突出的特性是预渲染。如上所述,在接收到 Javascript 代码后在客户端渲染网页是一个缓慢的过程。Next 通过向客户端发送每个页面的预渲染版本来解决这个问题。它使用三种类型的预渲染。他们是:静态站点生成、服务端渲染、增量静态再生。
虽然静态站点生成最适合构建静态网页,但服务器端渲染适合具有动态内容的页面。Next 的特殊之处在于它允许您分别决定为每个网页使用哪种渲染类型。除了预渲染之外,Next 还提供了一组精心设计的功能来简化开发过程,如下所示。
自动打包和代码拆分:与在 React 中必须设置 Webpack 以手动打包代码不同,Next.js 会使用 Webpack 自动打包代码。它还支持基于单独路由和动态导入的代码拆分。它减少了网页和动态组件的加载时间。= 图像优化:Next 原生支持按需调整图像大小和优化图像。您可以将其与默认的延迟加载选项配对以获得最佳性能。快速刷新:当开发过程中代码发生变化时,立即重新渲染组件。