里面肯定有什么事 前端 社区最近. 由于反应及其内置的服务器端水合功能，服务器端渲染越来越受欢迎. 但这并不是为用户提供快速体验的唯一解决方案，它具有超快的到达第一字节时间(TTFB)得分:预渲染也是一种非常好的策略. 这些解决方案与完全客户端呈现的应用程序之间的区别是什么?
因为像Angular、Ember这样的框架.在js和Backbone存在的情况下，前端开发人员倾向于在客户端呈现所有内容. 多亏了谷歌和它“阅读”JavaScript的能力, 效果很好, 它甚至是SEO友好.
使用客户端呈现解决方案, 您将请求重定向到单个HTML文件，服务器将在没有任何内容(或带有加载屏幕)的情况下交付请求，直到您获取所有JavaScript并让浏览器在呈现内容之前编译所有内容.
在良好和可靠的互联网连接下，它非常快，运行良好. 但它可以变得更好，而且做到这一点并不困难. 这就是我们将在下面几节中看到的内容.
战略科学军团的解决方案是我们以前经常做的事, 许多年前, 但是现在，它经常在服务器端呈现与客户端呈现之争中失利, 因为我们倾向于忘记它，而倾向于客户端呈现解决方案. 在这里，我们将讨论何时使用服务器端呈现以及该方法如何工作.
与 老 服务器端呈现解决方案, 您构建了一个网页(例如使用PHP)，服务器将编译所有内容, 包括数据, 并将一个完整的HTML页面交付给客户端. 它又快又有效.
但是… 每次你转到另一条路线, 服务器必须从头再做一遍:获取PHP文件, 编译它, 并传递HTML, 所有的CSS和JS将页面加载延迟到几百毫秒甚至一整秒.
如果你可以用苏维埃社会主义共和国的解决方案做第一页加载呢, 然后使用一个框架来实现AJAX的动态路由, 只获取必要的数据?
这就是为什么苏维埃社会主义共和国前端解决方案在社区中越来越受欢迎的原因，因为反应用一个易于使用的解决方案普及了这个问题 RenderToString 方法.
这种新型的web应用程序被称为 普遍的应用 或者一个 同构应用. 这些术语的确切含义以及它们之间的关系仍然存在一些争议, 但很多人把它们互换使用.
无论如何, 这种解决方案的优点是能够使用相同的代码开发应用程序的服务器端和客户端，并使用自定义数据为用户提供真正快速的体验. 缺点是需要运行服务器.
苏维埃社会主义共和国用于获取数据并使用自定义内容预先填充页面, 利用服务器可靠的Internet连接. 也就是说，服务器自己的网络连接比用户的网络连接要好 lie-fi)，因此它能够在将数据传递给用户之前预取和合并数据.
使用预填充的数据, 使用苏维埃社会主义共和国应用程序还可以解决客户端渲染应用程序在社交共享和OpenGraph系统方面存在的问题. 例如，如果你只有一个 指数.html 文件交付给客户端, 它们只有一种类型的元数据——很可能是你的主页元数据. 当你想要共享不同的路由时，这不会被语境化, 因此，你的路线不会在其他网站上显示，用户不会想要与世界分享他们的适当用户内容(描述和预览图片).
通用应用程序的强制服务器对某些人来说可能是一种威慑，对小型应用程序来说可能是多余的. 这就是为什么预渲染是一个很好的选择.
我发现了这个解决方案 提前 以及它自己的CLI，它允许你编译所有预先选择的路由，这样你就可以将一个完全填充的HTML文件存储到 静态 服务器. 这让你可以为用户提供超快的体验, 由于提前/反应水合作用功能, 而不需要Node.js.
问题是, 因为这不是战略科学军团, 此时，您没有特定于用户的数据要显示，它只是在第一个请求时直接发送的静态(并且有点通用)文件, 按原样. 如果你有用户特定的数据, 在这里，您可以集成一个设计精美的框架，向用户显示他们的数据即将到来, 为了避免他们的挫折:
还有另一个问题:为了使这种技术起作用, 您仍然需要一个代理或其他东西来将用户重定向到正确的文件.
使用单页应用程序, 您需要将所有请求重定向到根文件, 然后框架用它内置的路由系统重定向用户. 因此，第一个页面加载总是相同的根文件.
为了使预渲染解决方案工作, 您需要告诉代理，有些路由需要特定的文件，而不总是需要根文件 指数.html 文件.
例如，假设您有四条路由(/, /about, /工作, 博客)，它们都有不同的布局. 您需要4个不同的HTML文件来向用户交付框架，然后用户可以使用 反应/超前/等. 用数据给它补水. 如果你把所有的路由重定向到根目录 指数.html 文件, 页将有一个不愉快的, 加载时有毛刺感, 这样，用户将看到错误页面的骨架，直到它完成加载并替换布局. 例如, 用户可能会看到只有一列的主页骨架, 因为他们要求换一个页面，里面有一个类似pinterest的图片库.
解决方案是告诉你的代理，这四个路由中的每一个都需要一个特定的文件:
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/ 将在没有任何重定向的情况下工作，因为它会自动搜索 指数.html 在它的目录中. 但如果你有参数url，你需要这个代理http://my-website.com/pro文件/guillaume 需要将请求重定向到 / pro文件 /索引.html 有自己的布局，因为 配置文件/ guillaume /索引.html 不存在，会触发404错误.
简而言之, 上面描述的呈现策略有三种基本视图, 一具骷髅, 以及最终渲染完成后的完整页面.
取决于策略, 有时我们使用这三种视图, 有时我们直接跳转到完全渲染的页面. 只有在一个用例中，我们被迫使用不同的方法:
| 方法 | 着陆(e.g. /) | 静态(e.g. /about) | 固定动态(e).g. /新闻) | 参数化动态(e.g. / /用户:用户id) |
|---|---|---|---|---|
| Client-rendered | 加载→满 | 加载→满 | 装载→骨架→满载 | 装载→骨架→满载 |
| 预渲染 | 完整的 | 完整的 | 骨架→满 | HTTP 404(未找到页面) |
| 使用代理预渲染 | 完整的 | 完整的 | 骨架→满 | 骨架→满 |
| 苏维埃社会主义共和国 | 完整的 | 完整的 | 完整的 | 完整的 |
客户端呈现的应用程序是我们现在应该避免的，因为我们可以为用户做得更好. 在这种情况下，做得更好就像预渲染解决方案一样简单. 这绝对是对仅客户端呈现的改进，并且比完全服务器端呈现的应用程序更容易实现.
如果您有一个包含许多不同页面的大型应用程序，那么苏维埃社会主义共和国/通用应用程序将非常强大. 它可以让你的内容在与社交爬虫交谈时更有针对性和相关性. 搜索引擎机器人也是如此, 现在哪些网站在排名时会考虑网站的性能.
请继续关注后续教程, 在那里我将介绍SPA到预渲染和苏维埃社会主义共和国版本的转换, 比较他们的表现.
客户端渲染允许开发人员使用JavaScript在浏览器中完全渲染他们的网站. 而不是每个路由都有不同的HTML页面, 客户端渲染网站直接在浏览器中动态创建每条路由. 一旦JS框架让这种方法变得容易使用，这种方法就会传播开来.
服务器端渲染允许开发人员直接在服务器上用自定义用户数据预填充网页. 通常，在服务器内处理所有请求比在浏览器到服务器之间进行额外的往返要快得多. 这是开发人员在客户端呈现之前所做的事情.
客户端呈现动态地管理路由，而不会在每次用户请求不同的路由时刷新页面. 但是服务器端渲染能够在网站的任何路径的第一次加载时显示一个完全填充的页面, 而客户端呈现首先显示一个空白页面.
预呈现是客户端和服务器端呈现之间的折衷. 每个预渲染页面都显示一个框架模板，同时数据等待AJAX/XHR请求重新处理. 获取页面后, 内部路由是动态完成的，以利用客户端呈现的网站.
通用应用程序向浏览器发送一个填充了数据的页面. 然后，应用程序加载它的JavaScript并重新填充页面，以获得一个完整的客户端渲染应用程序. 这种方法结合了当今可用的最新技术的优点.
纪尧姆的摄影学位和平面设计经验使他的前端web开发具有美丽图像的惊人优势.
作者都是各自领域经过审查的专家，并撰写他们有经验的主题. 我们所有的内容都经过同行评审，并由同一领域的Toptal专家验证.8
世界级的文章，每周发一次.
世界级的文章，每周发一次.
