nextjs搭建博客记录

2021-06-06 项目开发

前言：说明搭建环境

Next.js 是一个轻量级的React服务端渲染框架。

前端渲染方式

可分为三种渲染方式，服务端渲染，客户端渲染，同构渲染。这三种渲染方式有各自的优缺点。

服务的渲染

服务端渲染可以理解成将组件或者页面经过服务器生成html字符串，发送给客户端，这种方式叫做服务端渲染。服务端渲染生成的页面包含了请求页面的数据和html内容，浏览器只需要接收到完整的html内容，这样就可以让用户更快的看到页面的内容。在服务端完成的数据请求比在浏览器中请求数据效率高很多。

服务端渲染的优点：

减少了渲染时间和数据的传输时间，因为在服务端把页面所需要的数据直接拼接成html返回给浏览器，浏览器只需要直接渲染出来。
有利于SEO。因为服务端返回了完整的html页面(一起返回了查询数据)，所以爬虫更容易获取信息，更加利于SEO的信息爬取。
对客户端而言，无需占用太多客户端资源，模板解析是由服务端完成，客户端只需要解析html页面，对于移动端而言，会更加地节省电源。

服务端渲染的缺点：

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

客户端渲染

客户端渲染和服务端渲染相比较，客户端渲染占有很大的优势。 Jquery出来后，客户端渲染就开始有了新的定义。同时一些前端的库接踵而来，客户端让选就变得越来越强大和广泛。在以前的服务端渲染，每一次交互生成和返回一个全新的页面做出相应。这样做的结果就是会减缓加载时间，耗用更多宽带，导致用户体验下降。

当页面只有一部分更改的时候，客户端渲染就不需要对整个页面的请求。 ajax的出现改变了这一现状，可以通过局部刷新来更新部分界面数据。

客户端渲染支持丰富的动画交互，转换和过度。这样大大提高用户的交互体验。

客户端渲染可以托管静态文件，js,css和图片资源可以通过cdn来做资源分发。提高了资源加载速度和降低了服务端资源和费用。

当今的现代化JavaScript框架允许你对全部三种方案用同一种UI技术。可以使用Angular，Ionic和Electron这样的Angular技术栈来完成这三端的制作。或者，对这三个平台，你可以用React，React Native和Electron这样的React技术栈。开发出来的应用程序将会在iOS，Android，Windows和macOS上运行。在支持所有这些的平台的方面，学习JavaScript比起学习Objective-C, Swift, Java, C#, WPF来说简直是完胜！

客户端渲染的优点：

节省了后端资源
可以实现多端(桌面应用，app，web)
前后端分离，大大提高了开发效率
实现局部刷新，提高用户体验

客户端渲染的缺点：

首屏性能差
首屏速度加载慢
不支持SEO和搜索引擎优化

同构渲染

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

同构渲染实现了服务端渲染和客户端渲染两种技术的结合，同时可以最大限度的重用代码。减少开发与维护成本。采用react或vue等前端框架相结合实现node来实现。

Nextjs

nextjs是react进行服务端渲染的一个框架，默认以根目录下的pages为渲染路由。

nextjs的渲染流程如下：

浏览器发起请求
服务器接受到请求，转发给nextjs
nextjs根据路由开始渲染
调用App的getInitialProps获取数据
调用页面组件的getInitialProps获取数据
得到要返回给浏览器i的html
浏览器渲染html
浏览器执行脚本，创建并渲染App
合并服务器已经初始化好的数据
渲染完成

客户端点击路由跳转
异步加载页面的模块diamagnetic
nextjs根据路由开始渲染
调用App的getInitialProps获取数据
调用页面组件的getInitalProps获取数据
渲染型的页面组件

Nextjs默认支持服务端渲染，会自动根据页面进行代码分割，同时也是基于Webpack的开发环境，支持了热模块替换。Nextjs可以跟Koa或者其他的Nodejs服务器进行集成，静态文件服务publc等优势。

项目介绍

前端博客用到的技术栈有nextjs、react、redux、immutable、express、redux-persist、react-markdown、highlight、marked等。部署通过pm2进程守护。

目录结构

.babelrc 
.gitignore
.next
app.js
<DIR> components 组件文件夹
config.js 配置文件
<DIR> css 样式文件夹
ecosystem.config.js pm2部署配置
next.config.js next的配置
package.json 
<DIR> pages 页面
<DIR> public  静态资源文件夹
README.md
<DIR> redux 状态管理
store.js
<DIR> utils 工具

.babelrc 
.gitignore
.next
app.js
<DIR> components 组件文件夹
config.js 配置文件
<DIR> css 样式文件夹
ecosystem.config.js pm2部署配置
next.config.js next的配置
package.json 
<DIR> pages 页面
<DIR> public  静态资源文件夹
README.md
<DIR> redux 状态管理
store.js
<DIR> utils 工具

版权属于: vincent

本文链接:

转载时须注明出处及本声明

Tags:# blog开发 # NextJs

···

前端渲染方式 #

服务的渲染 #

客户端渲染 #

同构渲染 #

Nextjs #

项目介绍 #

目录结构 #