Next JS和Puppeteer JS之间的区别

时间:2018-07-09 08:43:18

标签: reactjs puppeteer serverside-rendering next.js

我观看了Google's conference on SEO,他们建议对JS构建的应用程序(React,Vue等)使用动态渲染。实现这一目标的工具之一是使用Puppeteer JS。 我需要创建一个高度依赖SEO的应用程序,因此服务器端渲染(SSR)极为重要。

我知道Next JS默认情况下会完成S​​SR,但是我可以对Puppeteer + Create React App进行同样的处理吗?在SSR和动态渲染方面,Next JS和Puppeteer有什么区别,哪个更适合SSR?

4 个答案:

答案 0 :(得分:1)

Nextjs与Puppeteer JS之间的区别非常简单。

下一个Js:-它是用于服务器端渲染SEO的React Framework的React Framework,针对发现进行了优化,实现了闪电般的快速交付。因此,非常简单的词是 SSR 。对于链接https://nextjs.org/#features

Puppeteer JS ,它由Google开发,用于对您的应用程序(如硒)进行端到端测试。

两者完全不同,目的也不同。

答案 1 :(得分:0)

无头Chrome启用了服务器和客户端之间的“同构JS”。如果您的库在服务器(节点)上不起作用,这是一个不错的选择。它的示例是lit-html,它的核心功能在浏览器之外不起作用。

在功能方面差异很大。

Next.js提供了Pupeteer所没有的一些不错的功能。

  • 热重装客户端和服务器
  • 自动代码拆分
  • 内置CSS支持,CSS-in-JS
  • 获取数据和组件生命周期
  • more

Puppeterer的某些功能:

  • 生成页面的屏幕截图和PDF。
  • 抓取SPA并生成预渲染的内容(即“ SSR”)。
  • 自动执行表单提交,UI测试,键盘输入等。
  • 创建最新的自动化测试环境。使用最新的JavaScript和浏览器功能,直接在最新版的Chrome中运行测试。
  • 捕获网站的时间线跟踪以帮助诊断性能问题。
  • 显然还有SSR ...

因此您可以看到这两个工具的主要区别。 Next.js固执己见,但旨在通过做出反应来进行SSR,并以此为基础。 考虑到Puperteer的SSR是相对较新的,而next.js的社区采用已经很成熟,并且具有使用不同技术堆栈的大量示例。

答案 2 :(得分:0)

简而言之,

Next.js是一个节点框架。您可以用它来编写代码,即构建应用程序。

Pupetteer可以被视为工具。它与Chromium捆绑在一起,而Chromium实际上是与测试环境等效的浏览器。您可以通过pupetteer编写测试,以在铬环境中运行脚本。

我为想要的人提供了过于简单的解释。如果想要深度,Shmotam给出了一个绝妙的答案。

答案 3 :(得分:0)

nextjs是功能强大的框架,支持ssr(服务器端渲染)和seo友好的Google搜索引擎。

解释的反应是,每次状态更改后都会调用该组件。但是nextjs会加载组件并首次调用getInitalProps,因此,查看页面源代码可以看到加载的数据