vue预渲染生成静态页面_服务器端渲染与静态网站生成

vue预渲染生成静态页面

Many buzzwords get thrown around in the tech space. Two of these are Static Site Generation (SSG) and Server Side Rendering (SSR).

在科技领域，许多流行语被扔掉了。 其中两个是静态站点生成(SSG)和服务器端渲染(SSR)。

Image credit: Author

图片来源：作者

In this article I’m going to try and demystify SSR and SSG and learn where they can actually help us. We’ll start with a bit of history, then get into some real-world examples and technologies like Next.js and Gatsby.

在本文中，我将尝试使SSR和SSG神秘化，并了解它们在实际中可以为我们提供帮助的地方。 我们将从一些历史开始，然后进入一些真实的示例和技术，例如Next.js和Gatsby。

This will be an interesting story, as we’ll do a full round trip through these technologies and approaches. We will go back to the future, then back to our origins. Let’s get to it!

这将是一个有趣的故事，因为我们将通过这些技术和方法进行一次完整的往返。 我们将回到未来，然后回到我们的起源。 让我们开始吧！

在一开始的时候… (In the Beginning…)

In the beginning, there were only static web pages. Nothing dynamic. Purely static HTML documents were sent to the client.

最初，只有静态网页。 没有动态。 纯静态HTML文档已发送到客户端。

When we accessed a website, a simple HTTP request was sent to the server, which responded with the actual HTML that our browser put on the screen. Easy.

当我们访问一个网站时，一个简单的HTTP请求被发送到服务器，该服务器以浏览器显示在屏幕上的实际HTML作为响应。 简单。

Then, dynamic rendering and templating engines happened. Hello, PHP and all the rest!

然后，发生了动态渲染和模板引擎。 您好，PHP和所有其他内容！

These server side technologies let us dynamically build the HTML that was sent to the client. Every HTTP request originating from the client would go through the application server. This would add little dynamic pieces, like our usernames, the current date, data from the database, and so on.

这些服务器端技术使我们能够动态构建发送给客户端HTML。 来自客户端的每个HTTP请求都将通过应用程序服务器。 这会增加一些动态内容，例如我们的用户名，当前日期，数据库中的数据等等。

This was the traditional server side rendering. The client (our browsers) would fetch the actual HTML to be shown.

这是传统的服务器端渲染。 客户端(我们的浏览器)将获取要显示的实际HTML。

AJAX与前端混乱的开始 (AJAX and the Beginning of the Front-End Chaos)

With AJAX, we were suddenly able to fetch data asynchronously, without the need for full page refreshes.

使用AJAX，我们突然能够异步获取数据，而无需刷新整个页面。

This was a big user experience imprvement — no more annoying screen flashes. But let’s think about this for a second…

这是一个巨大的用户体验需求-不再烦人的屏幕闪烁。 但是让我们考虑一下……

Asynchronous data, new data, new pages, new front-end components. The front-end is now responsible for generating the HTML it needs to render. Hello, client-side rendering!

异步数据，新数据，新页面，新前端组件。 现在，前端负责生成需要呈现HTML。 您好，客户端渲染！

With the need to render the visual markup client side, various libraries and frameworks started popping up. One of the most notorious of this gang is, of course, jQuery. These days we mainly use more modern technologies, like React, Vue and Angular.

由于需要呈现可视标记客户端，因此开始弹出各种库和框架。 当然，这个帮派中最臭名昭著的之一就是jQuery。 如今，我们主要使用更现代的技术，例如React，Vue和Angular。

So-called front-end fatigue started to get real, with new libraries and frameworks all over the place. Fortunately, it’s clear that there are a few winners, namely React and Vue, which are incredibly popular.

到处都有新的库和框架，所谓的前端疲劳开始变得现实。 幸运的是，很明显有一些获奖者，例如React和Vue，它们非常受欢迎。

单页应用程序和一些问题 (Single Page Applications and Some Problems)

With the possibility of easily generating the visual markup client-side, we somehow fully abandoned our beloved servers for rendering