Next.js,一个非常简洁的 React 应用的服务器端渲染框架

时间: 2017-11-21阅读: 644标签: SSR

背景

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 拥用许多正确的编程思想(最重要的是 - 它足够的简单)。


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

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

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

服务器端渲染的不足

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

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

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

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


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

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

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

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

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

  • 只需要在谷歌上做 SEO(搜索引擎优化)。

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


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

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

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

来源:https://medium.com/@wesharehoodies/next-js-react-server-side-rendering-done-right-f9700078a3b6