next.js 的强大

next.js 的强大

---

next.js 的强大

我这期间一直在使用 next.js 构建我的项目，我发现 next.js 真是太好用了，所以我决定忽悠大家一起来搞 next.js 吧，真的好用啊。如果你想做一个静态网站的话，我首推就是 next.js 为什么呢？

预生成

静态网站所有的数据和网页全部提前预生成好，像 vue，react等单页应用，如果我们访问一个接口都是先静态的加载一个空页面，页面里面除了 JS 脚本他是没有内容的，只有 js 脚本加载之后靠 js 脚本动态的把内容获取，再动态的把这个页面再渲染再刷新，所以这也是为啥出现空白，很多都是用 loading 交互来处理这个问题。

静态预生成静态网站而不是动态获取数据动态渲染

现在的框架或者说库以 JS 为中心，emmm，怎么说呢就是一个网页它 HTML 里面是空的它的功能就是用来指明一个 JS 文件，这样的话当浏览器加载html文件之后，还需要加载JS文件，浏览器就会把js文件加载进浏览器，让js脚本来运行，这时候js的任务就是在外面获取数据，在内部通过浏览器的DOM接口，把当前页面渲染一遍。 把最初的一个空的HTML页面渲染成一个最终的有数据的一个页面，然后呈现给用户 这就是单页应用的一个加载渲染过程。 这个对访问者是没有影响的，但是对爬虫是很不友好的，因为html是空的，它爬不到。

next.js 有一个构建过程在构建的时候，就运行JS就可以把页面提前生成。

我build了一下，我看了next.js 生成的数据它在html页面里面的，就是把请求的内容数据拿到保存在页面里（要输出成html才行）

当然这也就不适合实时刷新的网站了，但是是通过一个函数来生成的，我们可以在不需要频繁更新数据的时候使用就可以了。