（插图）

~~曾几何时，~~几年前，当我刚开始使用Java进行Web工作时，我们使用JSP。整个页面在服务器上生成并发送给客户端。但随后出现的问题是答案来得太久了...

我们开始使用一种方法，其中给出一个空页面模板，并且所有数据已经由Ajax逐步加载。页面显示，每个人都很高兴。我们还没有意识到我们为自己所做的事情，因为CSR会对搜索引擎的优化和移动设备的性能产生负面影响。但是后来我又听说了JS框架对SSR的支持。

那么，历史会重演吗？

SSR的工作原理是什么？

1.预渲染。在最简单的情况下，将生成N个HTML文件，这些文件将被放置在服务器上并按原样返回-也就是说，返回的是static，在请求期间我们不会生成任何内容。

2.与JSP一样，服务器将生成包含所有内容的完整HTML，并将其返回给客户端。但是，为了不为每个请求生成一个页面（可能会有一百万个请求，并且我们的服务器会弯曲），我们添加一个代理缓存。例如，清漆。

这些方法何时可以适用：

1.什么时候生成一堆HTML文件有意义？显然，当站点上的数据更改比从未更改时少。例如，一家鞋修理摊位的公司网站就在拐角处（是的，叔叔在一个2x2米的摊位中换鞋跟的叔叔也想要该公司的网站，当然还有公司的任务页面）。对于这样的网站，您甚至不必费心使用框架，SSR和其他工具，但这只是一个球形的例子。如果我们的博客有1000条帖子怎么办？有时我们更新它们，有时我们添加新的。生成1k +静态文件...出了点问题。而且，如果我们更改职位，那么我们需要重新生成某个文件。嗯...

第二种方法适合我们。我们是在第一时间动态生成的，然后将响应缓存在代理服务中。缓存时间可以是一个小时/两个/天-随便什么。如果我们每小时每个帖子有10,000个呼叫（令人难以置信，对吗？），那么只有第一个请求将到达服务器。其余的将作为响应接收缓存的副本，并且我们的服务器更有可能存活。在更新帖子的情况下，我们只需要重置缓存的记录，以便下一页将生成实际的页面。

从言语到行动：

你好世界回购。

0）生成世界

为了快速入门，Nuxt社区已经准备了基本模板，您可以使用以下命令安装其中的任何一个：

$ vue init <template-name> <project-name>

默认情况下，建议使用started-template，我们将以它为例。尽管在实际应用中，我们还是选择了Express-Template。让我们将项目称为简单项目：

 $ vue init nuxt-community/starter-template habr-nuxt-example $ cd habr-nuxt-example $ yarn #  npm install,    $ yarn dev

好了，我们生成了一个世界。浏览URL，您可以看到生成的页面：
1）Webpack和Linting

Nuxt开箱即用地配置了Webpack，以支持ES6（babel-loader），Vue单文件组件（vue-loader）以及SCSS，JSX等。

如果这些功能还不够，可以扩展webpack配置。我们转到nuxt.config.js，在build.extend中，我们可以修改配置。

例如，我们将通过类比添加代码衬里来添加样式衬里-在我们看来，这是维护统一代码库的重要点。这是一个好习惯，将有助于避免许多陷阱。

配置扩展的示例（基于环境变量为女仆连接配置文件）：

 config.plugins.push( new StylelintPlugin({ files: [ '**/*.vue', 'assets/scss/**/*.scss' ], configFile: './.stylelintrc.dev.js' }) )

其他更改可以在repo中按标签查看，这些更改将帮助我们保持样式整齐。

还有一个linter配置文件的示例：我们使用Standard JS，作为Vue / Nuxt中普遍接受的解决方案：

 ... extends: [ - 'plugin:vue/essential' + 'standard', + 'plugin:vue/recommended' ], …

2）有关使用数据的示例，我们将使用以下API ：

将Axios作为插件连接，在plugins目录中创建一个新文件：

 import * as axios from 'axios' let options = {} // The server-side needs a full url to works if (process.server) { options.baseURL = `http://${process.env.HOST || 'localhost'}:${process.env.PORT || 3000}` } export default axios.create(options)

并举例说明：

 import axios from '~/plugins/axios' export default { async asyncData ({ params }) { const { data } = await axios.get('https://jsonplaceholder.typicode.com/posts') return { data } } }