There is something going on within the 前端 社区最近. 由于反应及其内置的服务器端水合功能，服务器端渲染越来越受欢迎. 但这并不是为用户提供快速体验的唯一解决方案，它具有超快的到达第一字节时间(TTFB)得分:预渲染也是一种非常好的策略. 这些解决方案与完全客户端呈现的应用程序之间的区别是什么?

Client-rendered应用程序

因为像Angular、Ember这样的框架.在js和Backbone存在的情况下，前端开发人员倾向于在客户端呈现所有内容. Thanks to Google and its ability to “read” JavaScript, 效果很好, 它甚至是SEO友好.

使用客户端呈现解决方案, 您将请求重定向到单个HTML文件，服务器将在没有任何内容(或带有加载屏幕)的情况下交付请求，直到您获取所有JavaScript并让浏览器在呈现内容之前编译所有内容.

Under a good and reliable internet connection, it’s pretty fast and works well. But it can be a lot better, it doesn’t have to be difficult to make it that way. That’s what we will see in the following sections.

服务器端呈现(苏维埃社会主义共和国)

An 苏维埃社会主义共和国 solution is something we used to do a lot, 许多年前, 但是现在，它经常在服务器端呈现与客户端呈现之争中失利, as we tend to forget it in favor of a client-side rendering solution. Here, we’ll discuss when to use 服务器端 rendering and how this 方法 works.

与 老 服务器端呈现解决方案, you built a web page—with PHP for example—the 服务器 compiled everything, 包括数据, delivered a fully populated HTML page to the client. 它又快又有效.

但是… every time you navigated to another route, the 服务器 had to do the work all over again: Get the PHP 文件, 编译它, 并传递HTML, 所有的CSS和JS将页面加载延迟到几百毫秒甚至一整秒.

What if you could do the first page load with the 苏维埃社会主义共和国 solution, then use a framework to do dynamic routing with AJAX, 只获取必要的数据?

这就是为什么苏维埃社会主义共和国前端解决方案在社区中越来越受欢迎的原因，因为反应用一个易于使用的解决方案普及了这个问题 RenderToString 方法.

This new kind of web application is called a 普遍的应用 或者一个 同构应用. 这些术语的确切含义以及它们之间的关系仍然存在一些争议, but many people use them interchangeably.

无论如何, 这种解决方案的优点是能够使用相同的代码开发应用程序的服务器端和客户端，并使用自定义数据为用户提供真正快速的体验. The disadvantage is that you need to run a 服务器.

苏维埃社会主义共和国 is used to fetch data and pre-populate a page with custom content, leveraging the 服务器’s reliable internet connection. That is, the 服务器’s own internet connection is better than that of a user with lie-fi), so it’s able to prefetch and amalgamate data before delivering it to the user.

使用预填充的数据, 使用苏维埃社会主义共和国应用程序还可以解决客户端渲染应用程序在社交共享和OpenGraph系统方面存在的问题. 例如，如果你只有一个 指数.html 文件交付给客户端, they will only have one type of metadata—most likely your homepage metadata. This won’t be contextualized when you want to share a different route, 因此，你的路线不会在其他网站上显示，用户不会想要与世界分享他们的适当用户内容(描述和预览图片).

呈现前

通用应用程序的强制服务器对某些人来说可能是一种威慑，对小型应用程序来说可能是多余的. This is why pre-rendering can be a really nice alternative.

我发现了这个解决方案 提前 以及它自己的CLI，它允许你编译所有预先选择的路由，这样你就可以将一个完全填充的HTML文件存储到 静态 服务器. This lets you deliver a super-fast experience to the user, thanks to the 提前/反应 hydration function, 而不需要Node.js.

问题是, 因为这不是战略科学军团, 此时，您没有特定于用户的数据要显示，它只是在第一个请求时直接发送的静态(并且有点通用)文件, 按原样. 如果你有用户特定的数据, 在这里，您可以集成一个设计精美的框架，向用户显示他们的数据即将到来, to avoid some frustration on their part:

There is another catch: In order for this technique to work, you still need to have a proxy or something to redirect the user to the right 文件.

为什么?

使用单页应用程序, you need to redirect all requests to the root 文件, then the framework redirects the user with its built-in routing system. So the first page load is always the same root 文件.

In order for a pre-rendering solution to work, 您需要告诉代理，有些路由需要特定的文件，而不总是需要根文件 指数.html 文件.

例如, say you have four routes (/, /about, /工作, 博客) and all of them have different layouts. 您需要4个不同的HTML文件来向用户交付框架，然后用户可以使用 反应/超前/等. 用数据给它补水. So if you redirect all those routes to the root 指数.html 文件, 页将有一个不愉快的, 加载时有毛刺感, 这样，用户将看到错误页面的骨架，直到它完成加载并替换布局. 例如, the user might see a homepage skeleton with only one column, when they had asked for a different page with a Pinterest-like gallery.

解决方案是告诉你的代理，这四个路由中的每一个都需要一个特定的文件:

• http://my-website.com →重定向到根目录 指数.html 文件
• http://my-website.com/about →重定向到 /关于/索引.html 文件
• http://my-website.com/工作 →重定向到 /工作/索引.html 文件
• http://my-website.com/博客 →重定向到 /博客/索引.html 文件

这就是为什么这个解决方案对于小型应用程序非常有用—您可以看到，如果您有几百页，那么这将是多么痛苦.

严格地说，这样做并不是强制性的，您可以直接使用静态文件. 例如, http://my-website.com/about/ will work without any redirection because it will automatically search f或者一个 指数.html 在它的目录中. But you need this proxy if you have param urls—http://my-website.com/pro文件/guillaume 需要将请求重定向到 / pro文件 /索引.html 有自己的布局，因为 配置文件/ guillaume /索引.html doesn’t exist and will trigger a 404 error.

---

简而言之, 上面描述的呈现策略有三种基本视图, 一具骷髅, the full page once it’s finally rendered.

取决于策略, sometimes we use all three of these views, sometimes we jump straight to a fully-rendered page. Only in one use case are we forced to use a different approach:

Client-only Rendering is Often Not Enough

客户端呈现的应用程序是我们现在应该避免的，因为我们可以为用户做得更好. And doing better, in this case, is as easy as the pre-rendering solution. 这绝对是对仅客户端呈现的改进，并且比完全服务器端呈现的应用程序更容易实现.

如果您有一个包含许多不同页面的大型应用程序，那么苏维埃社会主义共和国/通用应用程序将非常强大. It allows your content to be focused and relevant when talking to a social crawler. This is also true for search engine robots, which now take your site’s performance into account when ranking it.

请继续关注后续教程, 在那里我将介绍SPA到预渲染和苏维埃社会主义共和国版本的转换, 比较他们的表现.