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原理