type
status
slug
tags
category
icon
password
summary
静态网站生成器对比1. NEXT.JS （React JS的框架）1.1. 什么是NextJs？1.2. 什么是 React JS？2. Nuxt.JS （Vue JS框架）2.1. 什么是NuxtJs？2.2. 什么是 Vue JS？3. Angular4. Svelte5. Gatsby6.Remix7.Vite8.mkdocs
旧框架（Gatsby，Next.js，Nuxt）具有更长的尾巴，运行其框架的旧版本包含在数据集中，这造成运行缓慢。较新的框架（Astro，Remix，SvelteKit）运行速率更快。React 是“用于构建用户界面的声明式、高效且灵活的 JavaScript 库”。Vue 是“一个渐进的、可逐步采用的 JavaScript 框架，用于在 Web 上构建 UI”。
静态网站生成器对比
描述 | ㅤ | |
Vercel开发的(JavaScript using React)基于React的SSG静态网站生成器 | ||
Go免费开源 Hugo使用语言Go免费开源；速度非常快，对构建速度做了优化；内置支持很多功能：动态API请求的内容；无限制内容类型；Shortcode，一个灵活的Markdown替代；国际化；别名重定向；分页。预制的Go模版和模式；无需依赖（不用安装Go，因为它是编译好的二进制）；功能强大的内容模型。主题使用Go模版，所以需要熟悉Go；没有内置默认主题；缺少扩展性和插件（因为Go是编译型语言）。 | ||
Gatsby已加入Netlify | ||
(Ruby)2023年2月 Jekyll使用语言RubyGitHub支持；免费且开源；RubyGems支持构建主题为gems方便分发；简单便捷使用；开箱即用的合适的默认极简主题。Liquid模版引擎；基于Gem主题；Markdown和YAML类型支持；Sass预处理CSS支持；官方插件支持CoffeeScript。使用Jekyll设置GitHub Pages站点 | ||
ㅤ | ㅤ | |
Facebook开发，JavaScript React, Markdown，对所有人免费，专注文档网站，和其他生成器对比 | ||
(JavaScript)（在cloudflare搭建目前不推荐） Hexo使用Node.js相当快速；EJS模版引擎；在GitHubPages部署简单；没有英文，中文支持中文社区（对于非中文用户可能是劣势）；对于HTML+CSS+Javascript非常友好。 缺点 cloudflare page没有hexo
由于官方将中文的语言命名由zh-Hans改为了zh-CN，因此要将hexo配置文件中的语言进行对应修改。
language: zh-CN | ||
(JavaScript) | ||
基于Vue.js的静态网站生成器 | ㅤ | |
重心转向商业产品，只对开源和非营利团队免费 | ㅤ | |
JavaScript using React | ㅤ | |
如不需单页应用，也不打算利用 React 的话，这是个好选择 | material⭐13k 滑动底部有bug | |
11ty Eleventy 是最快的基于 JavaScript 的生成器 | 主题：ale | |
由Svelte提供支持 | ㅤ |
jamstack.org使用了TailwindCSS
decap-cms配合静态博客生成器使用的CMS
1. NEXT.JS （React JS的框架）
1.1. 什么是NextJs？
Nextjs 是一个使用 ReactJs 框架的 JavaScript 框架，它为服务器端渲染、提供静态文件、智能处理bundles（捆绑包）等各种事情提供了更好的体验，它有助于优化图像、脚本等等。自动代码拆分您的应用程序，以便每个页面仅在被请求时加载，这可以提高性能。
NextJs是开源的，可以免费使用在ReactJs NodeJs上开发的Javascript Web应用程序框架。直接支持i18n国际语言
缺点：如果您不小心，next.js 会使您的应用程序代码库更加复杂且更难维护。一些开发人员发现 next.js 的内置功能固执己见且不灵活。
1.2. 什么是 React JS？
ReactJs 也是一个免费的开源 Javascript 库，用于使用 UI 组件创建用户界面，它由 Meta （Facebook） 开发并由他们维护。
它可用于开发各种类型的移动应用程序和开发单页Web应用程序。
缺点：React 的学习曲线很大，因为它是一个复杂的 JavaScript 库。React 不是一个成熟的框架，因此它需要使用额外的库来完成许多任务。
使用React的：Instagram、Reddit、Facebook、Netflix、Dropbox、Airbnb、Twitter Lite
2. Nuxt.JS （Vue JS框架）
2.1. 什么是NuxtJs？
Nuxt Js 是一个免费的开源高级框架，基于 webpack、Babel.js 和 NodeJs 的 VueJs 框架开发，有助于构建简单而强大的静态 Web 应用程序以及服务器端渲染应用程序。
优点：
- Nuxt.js 易于使用和扩展。
- 由于服务器端呈现，Nuxt.js 应用程序速度快且响应迅速。
缺点：
- 虽然 Nuxt.js 易于使用，但如果您想掌握它的所有功能，它的学习曲线会很大。
- Nuxt.js 没有其他一些框架那么多可用的库和工具。
2.2. 什么是 Vue JS？
前端框架Vue.js的作者是尤雨溪
Vue Js 是一个开源的渐进式 JavaScript 框架，用于开发轻量级和高性能，用于创建单页 Web 应用程序和用户界面。它主要关注视图层，也很容易与现有项目和库集成。它提供了许多内置库，用于创建高级和复杂的功能应用程序，如状态管理、路由等。
Vue轻量级、易学、愉快编写，并且不难与传统技术集，或与没有指定框架的应用程序集成。由于其熟悉的模板语法和组件的使用，将现有项目集成或迁移到 Vue 更快、更顺畅。出于这个原因，Vue.js 非常适合初创公司，但同样适用于大型应用程序。
在性能方面，Vue.js 与 React 不相上下。但是，最终结果基本上取决于优化工作和应用程序大小。
而 React 则是 JS 领域的老手。凭借企业支持、大型社区和更大的生态系统，React 非常适合构建复杂的企业级应用程序。
缺点：Vue.js 没有其他一些框架那么多可用的库和工具。
使用VUE的：Facebook、Google Careers、Adobe Behance、Netflix、Euronews、Give Directly
- 由于支持后端功能，Next.js 被归类为用于创建服务器端渲染 React 应用程序的全栈框架。同时，Nuxt.js 被归类为构建通用 Vue 应用程序的前端框架
- 两者都是开源的，但在流行度方面，由于 React 是流行的前端框架，Next.js 占据上风
- Nuxt.js 是一个直观的 Vue 框架，预先配置了创建 Vue 应用程序所需的所有设置。同时，Next.js 是一个用于构建服务端渲染和复杂静态 React 应用程序的 React 框架
- Nuxt.js 模块使将新技术（例如无头 CMS、Stripe、Tailwind）集成到您的网站变得简单快捷。Next.js 没有模块或插件；开发人员需要编写额外的样板代码才能运行。然而，这不一定是坏事，因为它可以让您更好地控制您集成的工具，并允许更轻松的调试工作流程。
3. Angular
Angular 是一个 JavaScript 框架，用于在 JavaScript、html 和 Typescript 中构建 Web 应用程序和应用程序。Angular 由 Google 创建和维护。Angular 提供双向数据绑定，因此对模型的更改会自动传播到视图。它还提供了一种声明性语法，可以轻松构建动态 UI。最后，Angular 提供了许多有用的内置服务，例如 HTTP 请求处理以及对路由和模板的支持。
4. Svelte
Svelte 是一个类似于 React、Vue 或 Angular 的 JavaScript 框架。然而，在这些框架使用虚拟 DOM（文档对象模型）差异来确定视图之间发生了什么变化的地方，Svelte 使用了一种称为 DOM 差异的技术。这意味着它只更新 DOM 中发生变化的部分，从而实现更高效的渲染过程。此外，Svelte 还包括一些其他框架没有的内置优化，例如自动批处理 DOM 更新和代码拆分。这些特性使 Svelte 成为高性能应用程序的不错选择。
优点：
- Svelte 具有其他框架没有的内置优化功能，例如代码拆分。
- 由于其清晰的语法和组织良好的文档，Svelte 易于学习。
缺点：
- 虽然 Svelte 易于学习，但如果您想掌握其所有功能，它的学习曲线会很大。
- Svelte 没有其他一些框架那么多可用的库和工具。
5. Gatsby
Gatsby 是一个基于 React 的免费开源框架，可帮助开发人员构建速度极快的网站和应用程序。它使用尖端技术使构建网站和应用程序的过程更加高效。其关键特性之一是能够预取资源，以便在需要时立即可用。这使得 Gatsby 网站非常快速且响应迅速。使用 Gatsby 的另一个好处是，它允许开发人员使用 GraphQL 查询任何来源的数据，从而轻松构建复杂的数据驱动应用程序。此外，Gatsby 附带了许多插件，使其更易于使用，包括用于 SEO、分析和图像优化的插件。所有这些因素使 Gatsby 成为构建现代网站和应用程序的极受欢迎的选择。
优点：
- 由于使用预取，Gatsby 网站非常快速且响应迅速。
- Gatsby 支持 GraphQL，因此可以轻松构建复杂的数据驱动应用程序。
- Gatsby 附带了许多插件，使其更易于使用。
缺点：
- 虽然 Gatsby 易于使用，但如果您想掌握其所有功能，它的学习曲线会很大。
- Gatsby 没有像其他一些框架那样多的可用库和工具。
Ember.js
Backbone.js
6.Remix
react.dev 正式上线了，最大的变化是 CRA 从 react 文档中消失了，react 官方对"开始一个新的 react 项目"的首选建议居然是 nextjs remixjs
似乎每隔一天就会引入一个 React 框架。虽然每个 React 框架都有一些特别的东西可以提供，但 Remix 脱颖而出。Remix 是一个用于服务器端渲染 （SSR） 的 React 框架。这意味着后端和前端都可以使用单个 Remix 应用程序进行。数据呈现在服务器上，并以最少的 JavaScript 提供给客户端。与在前端获取数据然后在屏幕上呈现的原版 React 不同，Remix 在后端获取数据并将 HTML 直接提供给用户。
- Remix 在提供静态内容方面与 Next 一样快或更快.js
- Remix 在提供动态内容方面比 Next 更快.js
- Remix 即使在慢速网络上也能实现快速的用户体验
- Remix 会自动处理错误、中断和争用条件，Next.js 不会
- NextJs鼓励客户端JavaScript提供动态内容，Remix不
- NextJs需要客户端 JavaScript 进行数据突变，Remix 不需要
- NextJs构建时间随数据线性增加，Remix 构建时间几乎是即时的，并且与数据分离
- NextJs要求您在数据扩展时更改应用程序架构并牺牲性能
7.Vite
8.mkdocs
mkdocs-material Version: 9.1.2 Requires: colorama, jinja2, markdown, mkdocs, mkdocs-material-extensions, pygments, pymdown-extensions, regex, requests
- Author:ABCPEAK
- URL:https://abcpeak.eu.org/article/web-frameworks
- Copyright:All articles in this blog, except for special statements, adopt BY-NC-SA agreement. Please indicate the source!
