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

更新日期: 2017-11-21阅读: 4.6k标签: next

背景

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


链接: https://www.fly63.com/article/detial/143

支付宝框架UmiJs(五米)_极快的类 Next.js 的 React 应用框架

umi 就是一套零配置,按最佳实践进行开发的前端框架。支持PWA、按需加载、tree-shake、scope-hoist、智能提取公共文件、Critical CSS、preload、hash build、preact 等等

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

本文的目的不是要对 React、Vue 和 Angular 三者进行比较,已经有许多人对这个话题进行了比较深入的探讨。每个人都有自己的偏好。与其他库和框架相比,我更喜欢使用 React 构建用户界面。 对我来说,这是构建用户界面唯一正确的方法,它让我爱上了 React。

next.js使用 antd, 支持 css 和 scss

项目开发中, 大多数团队都会选择使用开源的 UI 库, 那么在 next.js 中要引入第三方库. 我们需要进行相应的配置. 在 css 预处理器上, 目前团队使用 scss . 个人觉得非常好用. 如果要使用 scss 我们必须要做简单配置, 否则是无法使用的

域名二级目录 指向 nextjs 应用

应用场景: 考虑到多应用在一个域名下能提高该域名的SEO,所以选择通过域名二级目录形式指向 nextjs应用,这里需要修改 nginx 和 nextjs 配置

Next.js 热更新 Markdown 文件变更

Next.js 提供了 Fast-Refresh 能力,它可以为您对 React 组件所做的编辑提供即时反馈。但是,当你通过 Markdown 文件提供网站内容时,由于 Markdown 不是 React 组件,热更新将失效。

安全输入Next.js应用程序使用Prisma/PostgreSQL(SQL注入等)的问题

在Next.js应用程序中,可以通过使用Prisma / PostgreSQL数据库来保护应用程序免受SQL注入等安全漏洞的威胁。以下是如何实现此目标的一些技术解决方案和代码示例:

Next.js 14 正式发布,更快、更强、更可靠!

10 月 26 日,Next.js 正式发布。该版本的主要更新如下:Turbopack:App & Pages Router 通过 5000 个测试,服务端操作(稳定):逐步增强的数据变更

Node.js 新官网为何选用了 Next.js?

近期 Node.js 发布了新网站,带来了全新的外观变化。看其技术选型,也是紧跟潮流,用到了最新的 Next.js App Router 框架,版本 ~14.1.3 这是 Next.js 近期的最新版本了,不过看起来同时也在用 Next.js 的 pages 模式。

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!