现代 Web 开发框架与静态生成器选型指南
next 和 nuxt 是全栈应用框架，分别基于 React 和 Vue，支持服务端渲染（SSR）和静态生成（SSG）。gatsby 是专注于内容的 React 静态生成器，内置 GraphQL 数据层。hexo 是轻量级的 Node.js 博客生成器，适合纯内容站点。sapper 是 Svelte 的旧版框架，已停止维护，建议迁移至 SvelteKit。
npm下载趋势
GitHub Stars 排名
统计详情
五大 JavaScript Web 框架与生成器深度对比
在构建现代 Web 项目时，选择合适的工具链直接影响开发效率和长期维护成本。next、nuxt、gatsby、hexo 和 sapper 代表了不同的技术路线。本文将从架构定位、路由系统、数据获取和维护状态四个维度进行深度对比。
🏗️ 核心定位：全栈应用 vs 内容生成
next 和 nuxt 是真正的全栈框架。
- 它们不仅处理前端渲染，还提供 API 路由、服务端逻辑和数据库集成能力。
- 适合需要用户登录、动态数据交互的复杂应用。
gatsby 是专注于内容的静态生成器。
- 它在构建时生成 HTML，运行时主要依赖客户端 JavaScript。
- 适合营销网站、文档站，但不适合高频动态数据场景。
hexo 是轻量级博客生成器。
- 它专注于将 Markdown 转换为 HTML。
- 不适合构建 Web 应用，仅适合纯内容展示。
sapper 是 Svelte 的旧版应用框架。
- 定位类似 Next.js，但已停止维护。
🗂️ 路由与页面结构
所有现代框架都采用基于文件的路由系统，但实现细节不同。
next 使用 pages 或 app 目录。
- 文件路径直接映射为 URL 路径。
- 动态路由使用方括号
[id]。
// next: pages/users/[id].js
export default function User({ id }) {
return <div>User {id}</div>;
}
nuxt 使用 pages 目录。
- 支持 Vue 单文件组件。
- 动态路由同样使用方括号。
<!-- nuxt: pages/users/_id.vue -->
<template>
<div>User {{ $route.params.id }}</div>
</template>
gatsby 使用 src/pages 目录。
- 支持 React 组件。
- 动态路由使用
createPagesAPI 或文件命名。
// gatsby: src/pages/users/{id}.js
export default function User({ params }) {
return <div>User {params.id}</div>;
}
sapper 使用 src/routes 目录。
- 使用 Svelte 组件。
- 动态路由使用方括号。
<!-- sapper: src/routes/users/[id].svelte -->
<script>
export let id;
</script>
<div>User {id}</div>
hexo 不使用应用式路由。
- 它基于文章文件生成固定页面。
- 通过
_config.yml配置 permalink。
# hexo: _config.yml
permalink: :year/:month/:day/:title/
📥 数据获取模式
数据获取是区分静态生成和服务端渲染的关键。
next 提供多种获取方法。
getStaticProps用于构建时获取数据。getServerSideProps用于每次请求时获取数据。
// next: getStaticProps
export async function getStaticProps() {
const res = await fetch('https://api.example.com/data');
return { props: { data: await res.json() } };
}
nuxt 使用 useFetch 或 asyncData。
- 在服务端和客户端自动处理。
- 支持 suspense 状态。
<!-- nuxt: useFetch -->
<script setup>
const { data } = await useFetch('https://api.example.com/data');
</script>
gatsby 强制使用 GraphQL。
- 页面查询在构建时执行。
- 数据层统一但学习曲线较陡。
// gatsby: GraphQL Query
export const query = graphql`
query {
site { siteMetadata { title } }
}
`;
sapper 使用 preload 函数。
- 在服务端渲染前执行。
- 返回的数据传递给组件。
// sapper: preload
export async function preload() {
const res = await this.fetch('/api/data');
return { data: await res.json() };
}
hexo 不支持动态数据获取。
- 数据在生成时从本地文件读取。
- 无法处理运行时 API 请求。
⚠️ 维护状态与风险
这是选型中最容易被忽视但最关键的一点。
sapper 已官方停止维护。
- 团队建议所有新项目使用
SvelteKit。 - 继续使用
sapper将面临安全漏洞和兼容性问题。
hexo 维护稳定但功能有限。
- 适合长期不变的博客。
- 不适合需要频繁更新功能的业务系统。
next、nuxt、gatsby 均活跃维护。
next由 Vercel 支持，迭代最快。nuxt社区活跃，Nuxt 3 性能提升明显。gatsby转向云服务和内容管理，核心仍可用。
📊 总结对比表
| 特性 | next | nuxt | gatsby | hexo | sapper |
|---|---|---|---|---|---|
| 核心库 | React | Vue | React | Node.js | Svelte |
| 渲染模式 | SSR/SSG/ISR | SSR/SSG | SSG | SSG | SSR/SSG |
| 数据层 | 任意 API | 任意 API | GraphQL | 本地文件 | 任意 API |
| 适用场景 | 全栈应用 | 全栈应用 | 内容站点 | 博客 | 已弃用 |
| 维护状态 | ✅ 活跃 | ✅ 活跃 | ✅ 活跃 | ✅ 稳定 | ❌ 停止维护 |
💡 最终建议
对于新项目：
- 如果是 React 技术栈 且需要动态功能，首选
next。 - 如果是 Vue 技术栈 且需要动态功能，首选
nuxt。 - 如果是 纯内容站点 且团队熟悉 GraphQL，考虑
gatsby。 - 如果是 个人博客 且追求简单，
hexo依然可靠。 - 绝对不要 在新项目中使用
sapper，请直接选择SvelteKit。
架构决策核心： 不要只看流行度。问自己：我需要服务端逻辑吗？我需要频繁更新内容吗？我的团队熟悉什么框架？答案通常会直接指向其中一个选项。保持技术栈简单 — 能解决问题的工具就是最好的工具。
如何选择: gatsby vs hexo vs next vs nuxt vs sapper
- gatsby:
选择
gatsby如果你主要构建内容驱动的网站（如文档、营销页），依赖 GraphQL 统一管理多源数据，且团队熟悉 React 生态。 - hexo:
选择
hexo如果你只需要一个简单的博客或个人站点，不需要复杂的交互逻辑，偏好 Markdown 写作和轻量级部署。 - next:
选择
next如果你需要基于 React 构建全栈应用，支持混合渲染模式（SSR/SSG/ISR），且需要强大的生态系统和企业级支持。适合电商、仪表盘和内容混合型网站。 - nuxt:
选择
nuxt如果你偏好 Vue 技术栈，需要类似 Next.js 的全栈能力，包括自动导入、服务端渲染和模块化架构。适合 Vue 团队构建高性能 Web 应用。 - sapper:
不要在新项目中选择
sapper。它已官方停止维护，功能被SvelteKit取代。如果维护旧项目，建议制定迁移计划至 SvelteKit。
热门对比
gatsby的README
Gatsby
The future of web development is here.
Gatsby is a free and open source framework based on React that helps developers build blazing fast websites and apps.
It combines the control and scalability of dynamically rendered sites with the speed of static-site generation, creating a whole new web of possibilities.
Quickstart
·
Tutorial
·
Plugins
·
Starters
·
Showcase
·
Contribute
Support: Discussions
Gatsby helps professional developers efficiently create maintainable, highly-performant, content-rich websites.
-
Load Data From Anywhere. Gatsby pulls in data from any data source, whether it’s Markdown files, a headless CMS like Contentful or WordPress, or a REST or GraphQL API. Use source plugins to load your data, then develop using Gatsby’s uniform GraphQL interface.
-
Go Beyond Static Websites. Get all the benefits of static websites with none of the limitations. Gatsby sites are fully functional React apps, so you can create high-quality, dynamic web apps, from blogs to e-commerce sites to user dashboards.
-
Choose your Rendering Options. You can choose alternative rendering options, namely Deferred Static Generation (DSG) and Server-Side Rendering (SSR), in addition to Static Site Generation (SSG) — on a per-page basis. This type of granular control allows you to optimize for performance and productivity without sacrificing one for the other.
-
Performance Is Baked In. Ace your performance audits by default. Gatsby automates code splitting, image optimization, inlining critical styles, lazy-loading, prefetching resources, and more to ensure your site is fast — no manual tuning required.
-
Use a Modern Stack for Every Site. No matter where the data comes from, Gatsby sites are built using React and GraphQL. Build a uniform workflow for you and your team, regardless of whether the data is coming from the same backend.
-
Host at Scale for Pennies. Gatsby sites don’t require servers, so you can host your entire site on a CDN for a fraction of the cost of a server-rendered site. Many Gatsby sites can be hosted entirely free on Gatsby Cloud and other similar services.
-
Use Gatsby's Centralized Data Layer Everywhere. With Gatsby's Valhalla Content Hub you can bring Gatsby's data layer to any project. Making it accessible via a unified GraphQL API for building content sites, eCommerce platforms, and both native and web applications.
Learn how to use Gatsby for your next project.
🚀 Ship your first Gatsby site in 5 Minutes
Click the link below to quickly try the workflow of developing, building, and deploying websites with Gatsby and Gatsby Cloud.
At the end of this process, you'll have
- a site working on Gatsby Cloud
- a new repository that is linked to that new site
- as you push changes to your new repository, Gatsby Cloud will automatically rebuild and redeploy your site!
💻 Get started with Gatsby locally in 5 Minutes
You can get a new Gatsby site up and running on your local dev environment in 5 minutes with these four steps:
-
Initialize a new project.
npm init gatsbyGive it the name "My Gatsby Site".
-
Start the site in
developmode.Next, move into your new site’s directory and start it up:
cd my-gatsby-site/ npm run develop -
Open the source code and start editing!
Your site is now running at
http://localhost:8000. Open themy-gatsby-sitedirectory in your code editor of choice and editsrc/pages/index.js. Save your changes, and the browser will update in real time!
At this point, you’ve got a fully functional Gatsby website. For additional information on how you can customize your Gatsby site, see our plugins and the official tutorial.
🎓 Learning Gatsby
Full documentation for Gatsby lives on the website.
-
For most developers, we recommend starting with our in-depth tutorial for creating a site with Gatsby. It starts with zero assumptions about your level of ability and walks through every step of the process.
-
To dive straight into code samples head to our documentation. In particular, check out the “How-to Guides”, “Reference”, and “Conceptual Guides” sections in the sidebar.
We welcome suggestions for improving our docs. See the “how to contribute” documentation for more details.
Start Learning Gatsby: Follow the Tutorial · Read the Docs
🚢 Release Notes
Wondering what we've shipped recently? Check out our release notes for key highlights, performance improvements, new features, and notable bugfixes.
Also, read our documentation on version support to understand our plans for each version of Gatsby.
💼 Migration Guides
Already have a Gatsby site? These handy guides will help you add the improvements of Gatsby v5 to your site without starting from scratch!
❗ Code of Conduct
Gatsby is dedicated to building a welcoming, diverse, safe community. We expect everyone participating in the Gatsby community to abide by our Code of Conduct. Please read it. Please follow it. In the Gatsby community, we work hard to build each other up and create amazing things together. 💪💜
🤝 How to Contribute
Whether you're helping us fix bugs, improve the docs, or spread the word, we'd love to have you as part of the Gatsby community!
Check out our Contributing Guide for ideas on contributing and setup steps for getting our repositories up and running on your local machine.
A note on how this repository is organized
This repository is a monorepo managed using Lerna. This means there are multiple packages managed in this codebase, even though we publish them to NPM as separate packages.
📝 License
Licensed under the MIT License.
💜 Thanks
Thanks go out to all our many contributors creating plugins, starters, videos, and blog posts. And a special appreciation for our community members helping with issues and PRs, or answering questions on GitHub Discussions.
A big part of what makes Gatsby great is each and every one of you in the community. Your contributions enrich the Gatsby experience and make it better every day.