ssr next原理

Do you have set up your new Next.js application? Great!

您是否已设置新的Next.js应用程序？ 大！

Let’s now check the application is working as we expect it to work. It’s a Next.js app, so it should be server side rendered.

现在让我们检查应用程序是否正常运行。 这是一个Next.js应用程序，因此应该在服务器端呈现 。

It’s one of the main selling points of Next.js: if we create a site using Next.js, the site pages are rendered on the server, which delivers HTML to the browser.

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

This has 3 major benefits:

这具有3个主要优点：

• The client does not need to instantiate React to render, which makes the site faster to your users.
  客户端不需要实例化React来渲染，这使得网站对您的用户更快。
• Search engines will index the pages without needing to run the client-side JavaScript. Something Google started doing, but openly admitted to be a slower process (and you should help Google as much as possible, if you want to rank well.
  搜索引擎将为页面编制索引，而无需运行客户端JavaScript。 Google开始做的事情，但公开承认这是一个缓慢的过程(如果您想获得良好的排名，则应该尽可能地帮助Google。
• You can have social media meta tags, useful to add preview images, customize title and description for any of your pages shared on Facebook, Twitter and so on.
  您可以拥有社交媒体元标记，可用于添加预览图像，自定义在Facebook，Twitter等上共享的任何页面的标题和描述。

Let’s view the source of the app. Using Chrome you can right-click anywhere in the page, and press View Page Source.

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

If you view the source of the page, you’ll see the <div><h1>Airbnb clone</h1></div> snippet in the HTML body, along with a bunch of JavaScript files - the app bundles.

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

We don’t need to set up anything, SSR (server-side rendering) is already working for us.

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

The React app will be launched on the client, and will be the one powering interactions like clicking a link, using client-side rendering. But reloading a page will re-load it from the server. And using Next.js there should be no difference in the result inside the browser - a server-rendered page should look exactly like a client-rendered page.

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

翻译自:

ssr next原理