为什么我会选择React+Next.js，而不是Vue或Angular？

本文的目的不是要对React、Vue和Angular三者进行比较，已经有许多人对这个话题进行了比较深入的探讨。

每个人都有自己的偏好。与其他库和框架相比，我更喜欢使用React构建用户界面。在我解释了为什么之后，也许你也会切换到React，如果你现在还没有用它的话。

几个月前，我正在寻找一个用于React的样板文件生成器或是初学者工具包。我向往简单可靠的东西。经过长时间的搜索，我找到了自己想要的东西。那就是名为Next.js的框架。

它在GitHub上获得了大量的star数，这在我看来是一大优势。这意味着这个项目的未来可期，而且如果需要，你可以向社区寻求帮助。

在readme文件的顶端，有一个指向learnnextjs.com的链接。一个大约1小时的短教程，教你如何使用Next.js。我不是说简介，而是让你可以真正地开始构建应用。真的很棒！

为什么是Next.js？

我发现，Next.js比其他可选的方案要简单的多，也更有效率。

Create React App在GitHub上的星数更多，而且承诺零构建配置。但是，它不像看上去那么简单。你需要学习客户端路由、页面布局等等，更不用说服务器端渲染了。

而对于Next.js，你只要几个小时就可以用它进行开发了。

越来越多的人喜欢Vue，即使它在某些方面仍然比不上React和Angular。因为它简单，你可以用最少的时间完成最多的事情。在我看来，Next.js填补了React和Vue之间的空白，使React一飞冲天。

Vue似乎是一个不错的选择，Angular呢？

这两个都是排名很靠前的框架，提供了出色的支持、性能，而且未来可期。但是，在和Next.js搭配使用时，我只会选择React，而不是它俩中的一个。

Vue

我一直将Vue视为入门级应用和网站的最佳选择。我以前甚至还写过几篇文章，但是，React与Next.js的搭配是最省力的。有人可能会说这是孩子的游戏。

公平地讲，React入门并没有那么难。它的学习曲线稍微有点陡峭，但你最终会得到回报。

考虑到这一点，React就占了上风。它更成熟、更可靠，有更大的社区和Facebook的支持。

Angular

在我的印象中，Angular一直是一个重要而成熟的框架，但是，我不会选择它。因为我不喜欢它。

虽然TypeScript也是一个选项，但你似乎是被迫在使用它。整个框架看上去过于复杂，而且没有明确的理由。最糟糕的是，我似乎找不到任何值得我经历这些麻烦去使用它的地方。

Next.js的特性

下面是learnnextjs上列出的一些很棒的Next.js特性：

• 默认服务器端渲染；

• 为加速页面加载，自动进行代码分割；

• 简化客户端路由（基于页面）；

• 基于Webpack的开发环境，支持热模块更换（HMR）；

• 可以通过Express或任何其他Node.js HTTP服务器实现；

• 可以通过你自己的Babel和Webpack配置进行定制；

让我稍微解释下这些特性。

应用被分成块在服务器端渲染，加载时间非常短。甚至，对于不支持客户端渲染的搜索引擎，SEO都没有意义。

路由解决方案和Webpack都有了很好的支持。然后是热模块更换（HMR）可以为你节省宝贵的开发时间，因为只需上传变化的代码就可以。最后，它提升了开发者体验（DX）。

它是如何使我的工作变得更轻松的？

每当我开始创建一个新项目时，我必须建立一堆依赖关系和脚本，使一切正常运行。我不得不做一些事情，如安装node-sas、设置监控、编写npm脚本等。

甚至在我真正地开始应用开发的前夕，我还得管理几十个依赖项。Next.js使我可以跳过这些我每次都会遇到的繁琐工作。它使我可以在几分钟内开始任意一个项目。

样式

Next.js提供了内置的CSS支持，称为styled-jsx。我必须承认，我直到最近才使用它，因为它还无法与其他类似的解决方案相比，如styled-components或JSS。但是，最近他们发布了版本2，比第一个版本有了很大的改进，并且有很大的潜力。

以下是他们列出的一些特性：

• 完全支持CSS，没有电量方面的权衡；

• 运行时大小仅有3KB（从12KB经gzip压缩）；

• 选择器、动画、关键帧完全隔离；

• 内置CSS“浏览器引擎前缀（vendor prefixing）” ；

• 最低限度的转译快速而高效；

• 非服务器端渲染时的高性能运行时CSS注入；

• 未来可期：与服务器端可渲染的“Shadow CSS”相当；

• “源映射（Source maps）” 支持；

• 支持动态样式和主题；

• 基于插件的CSS预处理。

你需要知道的是，它非常快、非常灵活，最重要的是，它与JSX以及React的思想一致。你不需要设置任何东西，什么都为你准备好了。

不过，如果你仍然希望使用以前的CSS预处理器，你也可以使用。关于LESS、SASS、PostCSS和CSS-Modules，我都有点忘了，但如果你还喜欢它们，当然就可以使用它们。

作为styled-jsx的替代方案，我推荐Material-UI-Next。这是一个不怎么有名的React组件，实现了谷歌的Material Design。它使用了前面提到的JSS，适应性强且未来可期。

我现在正在一个新项目中使用它，目前为止，我很喜欢他。

Webpack

你声明的每一个导入都是针对每个页面自动打包并提供。也就是说，页面永远不会加载不必要的代码。

你甚至可以分析打包好的文件，借助延迟加载模块进一步优化加载时间。

路由

路由简单而直观，你可以选择预取页面来获得最好的性能。你不需要为了让路由器发挥作用而安装任何依赖。

开始的时候，习惯使用React Router或其他类似路由器的人们可能会遇到一点困难，但它确实很简单，只是方法不同。但在我看来，这种方法非常容易掌握。

你不需要指定路由和所有与路由相关的内容，而只要将一个页面添加到pages目录，从而使页面URL可用。这非常简单，但是如果你想要更复杂的东西呢？

安装一个服务器，最好是Express，在服务器配置中指定自定义路由。通过这种方式，你可以得到你想要的各种路由和简洁的URL。

部署

只要不需要在运行时生成动态页面，Next.js就允许你将应用导出成静态HTML。相当不错，不是吗？

应用程序部署非常令人愉快；这不仅是因为你最终会达到目标，还因为你的实现方式。你可以使用一个命令构建整个应用程序，并使用另一个命令将其部署到全球的主机。

如果你的主机上有ZEIT now，你就多了一个选项。如果你计划使用Next.js，我建议你使用这个部署工具，因为它会使部署变得极其简单。

总结

有许多细节我没有提及。我只是大致介绍了在我看来最重要的内容。

在我发现Next.js之前，我从来没有像现在这样喜欢React。把React和Next一起使用，看起来很自然。一开始就应该是这样的。

对我来说，这是构建用户界面唯一正确的方法，它让我爱上了React。

查看英文原文：Why I chose React + Next.js for my next website instead of Vue or Angular

更多内容可关注前端之巅公众号：