Next.js — React 完美的服务器端渲染框架

本文由枫叶在众成翻译平台翻译。

背景

Next.js 开源于 2016年的10月25日。开发 Next 的公司叫做 ZEIT。

Next.js 有一个提供稳定支持的组织，同时在开源世界也非常的活跃。Next 不会几个月后就过时消失，而很有可能会一直存在下去。

所以你可以看到 --有一大堆关于 react 应用服务器端渲染的问题在我们官网上提出，如：

• 我为何要关注它？ --我已经掌握创建高质量 React 应用的技巧了。

问得好 - 我们应该随时抱着开放的态度去学习新东西。记住，作为一位开发者意味着此生都将不断地去学习。Next 将改善你作为一位开发者的生活。

还有富有想像力的问题： “我为什么要去关注” 每一次新技术的诞生。如果是这样的话，我们将会被无数的开发工具弄得头昏脑胀。

当 jQuery 问世时（它的易于使用成为了一场革命）—你问“为什么还要去关注？”，只要继续使用 Vanilla JS 就可以了。但是你不得不承认它改善了几乎所有的代码库和使我们的生活变得更简单了一点。

最后，创新终将会是赢家 - 为什么不做第一个吃螃蟹的人呢？ 

Next 如何能改善你的生活

• 使用简单。所有关于 webpack, react 路由，react 和 react-dom 的设置都可以统统丢掉了。因为 所有设置都已经包含在里面，并且可以立即可用！

• 代码分离，开箱即用。

• 初始只加载首页，提升性能

• 改善 SEO(搜索引擎优化)

• 一切皆 Javascript （在这之前我们都听过像 MongoDB 和 Meteor）。Meteor 是一个非常棒，很全面的框架，我甚至做过一个 Meteor 和 MongoDB 的项目。Next 是下一（双关语）阶段技术演化的产物。Next 拥用许多正确的编程思想（最重要的是 - 它足够的简单）。

好奇的好处？ 这篇文章深入完整地剖析了 Next 的细节

客户端渲染和服务器渲染有什么区别？

客户端渲染 - 通常我们使用 React，你的浏览器会下载一个最小化的 HTML 页面，然后用 JavaScript 来生成、填充内容。

而在 服务器端渲染，在服务端已经生成好初始内容，所以你的浏览器下载的是一个完整的页面，它的内容早已在里面。但内容的更新仍然还是需要浏览器来处理。

服务器端渲染的不足

• 在很多情况下，服务器渲染可以提升性能，但一些情况下却会适得其反。

• SSR(服务器端渲染) 会增加服务器的压力，所以你的 HTTP 响应返回会花费更长一点的时间。如果你的服务器负载很重的话，花的时间将会更加长。

• 你的 HTML 页面大小将增加和花费更多的下载时间。对大多数的应用而言这点可以忽略不计，但如果你的 React 组件包含很长的数组或表格，那就不能忽视了。SSR(服务器端渲染) 通常会为你的应用提升性能， 但也不是绝对的。

• 使用 SSR(服务器端渲染) 会增加你应用程序的复杂度，这意味着服务器应用在其他特性和改进上的时间将会更少。

什么时候应该使用服务器端渲染？

• 你需要在谷歌，DuckDuckGo，必应，雅虎和百度上做 SEO(搜索引擎优化)。

• 你已经有一个运行中的 React 应用，需要最佳的性能和愿意为增加的服务器资源去付费。

什么时候不应该使用服务器端渲染？

• 你的 React 应用还没完成：首先得让它可以工作，这时不应该使用 Next。--但如果是从头开始写一个应用是完全没问题的！

• 只需要在谷歌上做 SEO(搜索引擎优化)。(确保谷歌能抓取到你的内容)

• 服务器资源短缺，或许是你的预算较低或你的应用只有少数人在使用。

有什么可以替代服务器端渲染？

1. 像平常一样在客户端渲染。 依靠 Googlebot 的 JavaScript 抓取功能作搜索引擎优化，和把你应用程序的关注点放在其他性能方面的提升。你的搜索引擎优化在百度，必应和雅虎上将会受到影响。

2. prerender 是一个存储你页面缓存的服务。这将同时有助于 SEO 和 性能提升，它能保持你代码的简洁。但我没有使用过这个服务，所以我无法保证它的效果如何。

关于服务器渲染的好处和什么时候用它，什么时候不用的非常实用的文章！

你准备好给 Next 和服务器端渲染一个机会了吗？ 许多人已经开始使用它了！

让我们开始 Next 之旅

我们像其他的 Node 项目一样开始我们的 Next.js 项目。你需要做的只是把 Next 作为一般的 npm 模块来安装。复制下面的命令到命令行窗口。

mkdir next-react-ssr && cd next-react-ssr && npm init -y && npm install --save react react-dom next && mkdir pages

安装成功之后开始我们的 node 项目，安装 react, react-dom 和 next --用你的 编辑器/集成开发环境 打开项目。添加运行 next 的脚本（看第7行）

见证奇迹 - 运行 dev 脚本！

没错，我们已经成功安装了 Next。是不是不可思议的简单？

我们已经将痛苦的项目配置都封装好，开箱即用，包含 React, webpack, 热加载，路由，服务器端渲染，预加载和许多非常棒的东西！

好 - 你也许很想问为什么 Next 会给我们个 404 的页面？

这。。是因为我们还没有创建任何的页面！

让我们在 pages/index.js 创建我们的第一个组件

touch pages/index.js

注意我们为什么不需要导入 React --和 Next 是如何设置路由的？试试添加其他的段落 --我们同样支持热加载！

完美。

如果你查看我们生成的 HTML 页面 - 将会看以下面的内容。

这就是 Next 的神奇之处。我们的 React 应用已经在服务器端渲染了。

酷！下面有更多关于 什么是服务器端渲染 --为什么它非常有用--和如何用 Next 让球滚动。

通过这个非常棒的 Next 教程去认识 Next 中所有强大的功能。

想获得更多内容可以关注我的推特！我使用推特是从我在上面发现了一个非常棒的开发者社区开始的

感谢你的阅读，希望你能尽可能的学到更多东西！

原文来自:众成翻译

声明：所有来源为“聚合数据”的内容信息，未经本网许可，不得转载！如对内容有异议或投诉，请与我们联系。邮箱：marketing@think-land.com