快来用 Nuxt 开发静态网站

要开发 SEO 的静态网站，又想享受框架开发的舒适，于是选择 Nuxt，可用来生成静态站总还是有些蹩脚，比如默认不支持动态路由等。

这两个次版本的发布，终于让 Nuxt 开发静态网站方便多了！

先说亮眼新特性：

可以处理动态路由 和 nuxt start 真是太棒了。

target: 'static' + nuxt generate 生成的【完全静态】的应用又是什么意思呢？与之前 generate 生成的静态应用有什么区别？

我们先来看一下 Nuxt 官网的一张图，阐述了 Nuxt.js 应用一个完整的服务器请求到渲染（或用户通 <nuxt-link> 切换路由渲染页面）的流程

可以看到，在 SSR 中，服务端会执行 asyncData() 和 fetch() ，用来访问接口生成数据，从而在服务端就渲染出页面内容。

那么，在 generate 生成的静态应用中会怎样呢？如我们预料，生成的 dist 中的 html，就是执行过 asyncData() 和 fetch() 的有数据内容的文件了。

但是，当我们切换路由的时候，这两个函数又被调用了一遍，如果其中有接口调用，就会再次请求接口，拿回来最新的数据。问题是，这让页面切换变慢，而许多静态网站并不需要请求最新的数据。

于是，【完全静态】的应用就被千呼万唤召唤出来了，它的接口请求的数据定格在 generate 的时候，部署后不会再通过 asyncData() 和 fetch() 调用 API 了。这使得页面切换变得非常快。

可是，对于某些页面，我还想要最新的数据，怎么办呢？别担心，新版的 nuxt 还很贴心地支持了 Preview mode :

添加这个插件，然后在需要更新数据的页面 url 后面加上 ?preview=1 就可以做到了。

Going Full Static

NuxtJS 官方文档

夫唯老师讲过做静态网站设计所采用的技术原理是一对一的形式，也就是说这样的网站上面，一个内容对应的就是一个页面，无论网站访问者如何操作都只是让服务器把固有的数据传送给请求者，没有脚本计算和后台数据库读取过程，大大降低了部分安全隐患。静态网站设计除了拥有上述的速度快，安全性高这两个特点之外还具有跨平台，跨服务器功能。

现在熟悉搜索引擎原理工作原理的朋友应该都知道它所提供给广大用户的信息是本身就存在于数据库当中的信息而不是实时的信息，固定的信息内容更容易接受和保存。我们可能常常会遇到这样的问题，当我们搜索自己所需要的信息时得出来的结果可能已经失效，这就是静态页面网站设计的不足之处，但又因为它的稳定，所以久久不会被删除。

与静态页面网站设计不同，asp生成的动态页面信息不但不易被搜索引擎所检索，而且打开速度慢，再者也不稳定，这就是为什么我们网站建设公司 都一再建议客户使用静态形式的网站设计的原因，有些网站建设公司会考虑把页面进行伪静态处理，但不知道大家有没有注意过，伪静态处理的URL通常是不规则的。

我们发现早期的网站制作所采用的都是静态页面网站设计技术，但这样的页面也因为没有数据库作为支持而缺乏互动功能，因此动态网站制作技术也就成为了必然趋势，如何把握好动态结合的最佳系数，不同的企业网站建设公司有不同的做法，针对不同的客户需求，网站建设公司也需要采用不同的手段。

现在动态的网页类型太多了，你是ASP，PHP，JSP，不是所有的动态的都能转换成静态的。同时请不要将一个动态网址改换格式以使其看起来是静态的。尽可能地使用静态

网址来显示静态内容是可取的，但在您决定展示动态内容的情况下，请不要将参数

隐藏起来从而使他们看起来像是静态的，因为这样做会删除掉那些有助于我们分析

网址的有用信息。传说：“动态网址的参数要少于3个。”事实：对于参数的数量是

没有限制的。但是，一个好的经验是不要让您的网址太长（这 个适用于所有的网

址，不论是静态的还是动态的）。您可以去掉一些对于Googlebot来说不重要的参

数，给用户一个好看一点的动态网址。如果您不能确定 可以去掉哪些参数，我们

建议您将动态网址中所有的参数都提供给我们，我们的系统会弄明白哪一些是不重

要的。将参数隐藏起来会影响我们正确地分析您的网址， 我们也就不能识别这些

参数，一些重要信息可能也因此丢失了。

内容出自谷歌中文网站管理员博客

---