查看源代码以确认SSR在Next.js中正常工作

如何检查SSR是否在您的Next.js应用程序中正常工作

您是否已设置新的Next.js应用程序?伟大的!

现在,让我们检查应用程序是否正常运行,正如我们期望的那样。这是一个Next.js应用,因此应该服务器端渲染

这是Next.js的主要卖点之一:如果我们使用Next.js创建一个网站,则该网站页面将呈现在服务器上,该服务器会将HTML传递给浏览器。

这具有3个主要优点:

  • 客户端不需要实例化React来渲染,这使得网站对您的用户更快。
  • 搜索引擎将为页面编制索引,而无需运行客户端JavaScript。 Google开始做的事情,但公开承认这是一个缓慢的过程(如果您想获得良好的排名,则应该尽可能地帮助Google。
  • 您可以拥有社交媒体元标记,可用于添加预览图像,自定义在Facebook,Twitter等上共享的任何页面的标题和描述。

让我们查看应用程序的源代码。使用Chrome浏览器,您可以右键单击页面中的任意位置,然后按查看页面源代码

如果您查看页面的源代码,则会看到<div><h1>Airbnb clone</h1></div>HTML中的代码段body,以及一堆JavaScript文件-该应用程序捆绑在一起。

我们不需要进行任何设置,SSR(服务器端渲染)已经为我们工作。

React应用程序将在客户端上启动,并且将成为使用客户端渲染推动交互(例如单击链接)的一种方式。但是重新加载页面会从服务器重新加载页面。使用Next.js,浏览器的结果应该没有什么区别-服务器呈现的页面应该看起来完全像客户端呈现的页面。

免费下载我的Next.js手册


接下来的更多教程: