next.js从入门到实战

官网上Next.js简介：Next.js 是一个轻量级的React服务端渲染框架

首先整理了一下各种渲染方式的优缺点

一） 服务端渲染/客户端渲染/同构渲染的优缺点

I ）为什么要使用服务端来渲染，有什么优点？

至于为什么要服务端渲染，我相信大家都有所闻，而且每个人都能说出几点来。

• 首屏等待

在 SPA 模式下，所有的数据请求和 Dom 渲染都在浏览器端完成，所以当我们第一次访问页面的时候很可能会存在“白屏”等待，而服务端渲染所有数据请求和 html内容已在服务端处理完成，浏览器收到的是完整的 html 内容，可以更快的看到渲染内容，在服务端完成数据请求肯定是要比在浏览器端效率要高的多。

• SEO的优化

  有些网站的流量来源主要还是靠搜索引擎，所以网站的 SEO 还是很重要的，而 SPA 模式对搜索引擎不够友好，要想彻底解决这个问题只能采用服务端直出。

---

II）服务端渲染的优缺点

1）服务端渲染的优点

• 前端渲染时间。因为后端拼接htm，浏览器只需直接渲染出来。
• 有利于SEO。服务端有完整的html页面，所以爬虫更容易获得信息，更利于seo
• 无需占用客户端资源，模板解析由后端完成，客户端只需解析标准的html页面，这样对客户端的资源占用更少，尤其是移动端，可以更加省电。
• 后端生成静态化文件。即生成缓存片段，这样就可以减少数据库查询浪费的时间了，且对于数据变化不大的页面非常高效 等。

2）服务端渲染缺点

• 不利于前后端分离，开发效率很低。
• 占用服务器端资源。请求过多对服务器压力很大。
• 即使局部页面发生变化也需要重新请求整个页面，费流量等。

---

III ）客户端渲染的优缺点

1）客户端渲染的优点

• 节省后端资源
• 多端渲染
• 前后端分离，大大提升开发效率
• 局部刷新等

2）客户端渲染的缺点

• 首屏性能差
• 白屏时间过长
• 无法（很艰难）进行seo优化等
  
  

---

IV）Next/nust.js是完全属于服务端渲染吗？

对比一下就会发现一个很有意思的事，服务端渲染的优点就是客户端渲染的缺点，服务端渲染的缺点同时也是客户端渲染的优点，反之亦然。看之前不是很理解，由于服务端渲染的各种缺点我们已经告别了服务端渲染的时代，进入了前后端分离的客户端渲染时代，又为什么重新回到了服务端渲染？

了解发现，其实把Next/nust.js成为SSR不是很准确，应该是Isomorphic render（同构渲染），那么什么是同构渲染？

---

V）什么是同构渲染

前后端同构是指在前后端维护同一份代码。它是在SPA的基础上，利用服务端渲染（SSR）直出首屏，解除单页面应用（SPA）在首屏渲染上面临的窘境。明确地说，同构是将传统的纯服务端直出的首屏优势和SPA的站内体验优势结合起来，以取得最优解的解决方案。

同构渲染就是实现了ssr和spa两种技术的结合，同时可以最大限度的重用代码（同构），减少开发维护成本，采用 react 或者 vue 等前端框架相结合 node (ssr) 来实现。

---

二）Next初探

I ）next.js 的渲染流程

---

II）next.js的优点

• 完善的React项目架构，搭建轻松。
• 自带数据同步策略，解决服务端渲染最大难点.
• 配置灵活
• 丰富的插件帮开发人员增加各种功能。

---

III）快速创建Next.js项目

1 ）Setup

要创建 Next.js 应用，请打开你的终端窗口，cd 进入您要在其中创建应用程序的目录，然后运行以下命令：

npm init next-app nextjs-blog --example "https://github.com/vercel/next-learn-starter/tree/master/learn-starter"

其背后的工作是通过调用 create-next-app 工具完成的，该工具为你创建了一个 Next.js 应用程序。

到这里项目就创建成功了

2）运行开发服务

cd nextjs-blog
yarn dev

运行成功ing…

---

III）页面间导航

在