静态化与服务器渲染（Static vs. Server Rendering)

静态化渲染和服务器渲染两者都为你的APP页面进行HTML渲染， 然而他们之间有个巨大的差别。。。
复制代码

也许你曾听过静态化渲染与服务器渲染，你也知道他们两者均可以提升SEO，让你的网站或者APP进行生成HTML页面。固然你也可使用 ReactDOMServer.renderToString()实现上述两种目的。

这么说，他们二者看上去是一种东西？对吧？他们几乎几乎差很少同样，接下来让我解释下。

热切的静态化渲染， 慵懒的服务器渲染

静态和服务器渲染都参与到了对HTML的生成， 不一样点在于静态化渲染只在编译的时候发生一次，然而服务器渲染则是按需发生根据用户的每一次请求。

静态化渲染

当静态化渲染的时候，你须要在每次用户访问前就生成好一个单一的HTML文件。 接着你把这些生成好的文件都存放在云端服务中，好比亚马逊的S3，或者运行中的Nginx服务器。

静态化渲染的优点在于可以对服务器请求作到无脑的快速，由于在处理过程当中不须要再去生成什么文件。 实际上, 因为你的网站的响应都是提早生成好的，那么你就能够存放文件在全世界任何角落的CDN。这样可让你的网站打到一个难以想象的响应速度。可是这也是有代价的。

使用静态化渲染时，你须要给每个可能的请求提早生成响应。 对于那些对高质量内容的网站来讲，这样是没问题的——静态化渲染工具好比Navi能够在仅仅几秒内生成上百个网页。可是若是你须要搭建一些没法预测因此用户请求的项目，好比一个搜索引擎？或者你有一堆用户生成内容，根据每个请求来改变响应？这种状况的话，你须要的是服务器渲染。

服务器渲染

按React的说法，服务器渲染指的是按照每个请求生成HTML的过程。一般，你在服务器上架设一些后端框架好比express或者Next.js，根据每一个请求渲染你的React app， 就像更传统的PHP和Rails框架网站同样。

服务器渲染老是慢于静态内容的。然而，你还得为了让速度更快些捣鼓一堆东西，固然这样的延迟是否重要取决于你的商业需求。

固然， 服务器渲染的速度短板，成就了他的灵活性，它容许你：

• 响应任何用户发出的请求 —— 即便是你可能没预想过的
• 从数据库中抓取最新的内容，而不是过期的静态文件
• 对没受权的用户选择性的隐藏内容

那么我该选哪个？

这个问题的 ~ 答案 ~ 固然是 ~~~ 看状况

若是静态渲染可行的话（做者指对于你当前的需求），它是一个快速，低廉，简单的解决方案。可是，若是你的网站须要达到如下这些需求，你则须要服务器渲染：

• 若是你不能预测全部可能性的用户请求
• 若是响应内容须要根据不一样用户进行改变
• 若是响应内容很快过期

请记住，若是须要为每一个页面提供特定的HTML用于SEO，这些需求将仅使服务器渲染呈现成为必要的选择。举个例子，一个社交网络或者在线电商最好仍是用服务器渲染来搭建。

另外一方面来讲，若是SEO可有可无的话，例如，一个存在于登陆屏幕后面的应用程序 - 而后您的应用程序只须要一个HTML文件。 在曾经，静态渲染多是最好的选择。可是，最近静态和服务器渲染工具的改进大多缩小了简单性差距。

渲染工具

几年前当我开始用React来构建网站的时候，不论是静态仍是动态，都很难。我甚至写了篇文章告诉你别这么作,可是近年来，改变了不少。

有愈来愈多基于React的工具来静态化渲染网站和APP，Gatsby就是个很受欢迎，高强度的选择。对于一些更简单的东西，你能够选择Navi,一个跟Create-react-app一块儿使用的框架。

对于服务器渲染，有两种选择（做者只提到这两个），Next.js和Express,使用Next.js，您能够得到一个开箱即用的完整框架和托管解决方案——同时你的整个项目也绑定到Next.js。若是Next.js对你来讲不是好的选择，你也能够试试比较传统化的Express。

鸡毛蒜皮的小事

最后，让我解释您正在阅读的网站（这里的网站指原文post的网站frontarm.com）如何运做。 Frontend Armory 是静态渲染的,每次内容更改时，都会使用Navi从新构建站点，而后将其推送到S3。 而后，当您发送请求时，它首先会检查与CloudFront在地理位置上接近您的缓存版本，而后再从S3请求它（若是失败）。

关于原文做者

原文是由 Frontend Armory的编辑James K Nelson发表在Frontend Armory上面的。

译者语

本篇文章，只是很基本的讲解了一下静态渲染和服务器渲染的一些基本特色和区别，适合入门新人，对两种渲染没有基本概念的读者。

因为近期对Frontend Armory这个网站的兴趣，发现上面有些不错的前端基本概念文章，因此想以此为长期学习的地方，经过翻译来提高本身，也帮助他人。