简介

好久没有水文章了，主要工作日上班，周末只想打游戏，一点自主学习的事情都不想干。这里直接摘抄我在说说里说过的话

上班的东西你也不能记录吧。技术栈的东西也都是一些公司的架构，你只用学会用就行了，也不需要怎么样怎么样。我们公司app是基于react native再封装的，然后直接看代码照猫画虎就行了，逻辑也都是一些js东西。不是说没有什么学习心得，而是那些心得都是和公司的业务、架构高度绑定的，并非是单纯技术上的东西，这些东西我都放在了公司的博客里面。

我现在是负责APP的开发，只用到了公司封装的react native。而h5和online是用封装的next.js，于是有一天闲下来，觉得react native没什么好学的，不如去看看nextjs，就把入门教程看了一遍，没有动手实操。现在也已经忘得一干二净了，哈哈哈。

nextjs我就稍微看了看，觉得挺有意思的，虽然我之前一直听说过这种，还有nuxt.js（vue用的），我以为是直接对标express和koa这种nodejs服务框架的，没想到是全栈框架。我摘抄一下官网的介绍：

Next.js is a React framework for building full-stack web applications. You use React Components to build user interfaces, and Next.js for additional features and optimizations.

咱们写的react/vue都是纯前端的内容，是CSR模式（客户端渲染），而后端服务是分开来的另一套，可以用java/nodejs来写。而nextjs是一个全栈框架，直接把你写react和后端服务都一起写，可以做到SSR（服务端渲染）或者SSG（静态网页生成）。给我最大的体会就是有些第三方库不需要安装了，比如说router，不需要安装什么插件了，在next里面直接是以文件夹的层级来代表url的目录，就很方便。总之就是把服务端和客户端的代码放在一块写，在同一个框架下处理。

看文档的时候发现一个很有趣的东西，当时没有懂，查了查才知道这种叫 headless CMS，翻译应该叫无显示内容管理网站，其中包含用wordpress来实现的。这么抽象的名称是什么意思呢，简单来说，就是只用wordpress来管理数据，但是网站界面用nextjs来实现。

安装例子

github链接：next.js/examples/cms-wordpress at canary · vercel/next.js · GitHub

跟着步骤做就行了，需要安装graphQL，这是一种查询数据库的方法，我也是之前看Fullstack学习react的时候了解到的，主要不同于RESTFUL接口，他就是只用一个接口，但是post不同的查询语句来获取结果，我理解为js版本的sql语句。所以nextjs就可以根据这个地址，按照查询语句去查找数据库的东西，就能够检索内容了。

简单安装配置一下，启动！真的可以看到一个新的界面（他界面整个比例比较大，我缩放了）。

整体样式可以看出来还是比较简单的，没有什么花里胡哨的东西，文章详情也是正常的。当然这只是一个非常简单的demo，只有十几篇文章，没有页面列表，评论也没有，什么都没有，空白一张纸罢了。而且这个头像感觉取得也不对，不是我主题的头像，是后台管理员的头像。

这个示例也不是一无是处，对于想要两面人生的，可以搞两个域名，一个是对于wordpress原来的界面，可以搞得花里胡哨，极度二次元，另一个就是这种网站，对外展示，比如面试的时候给hr看，或者应付网站检查？或者有一种我觉得我可能会用到的，就是在nginx层区分手机端还是PC端用户，PC端就可以转到原来的界面，一是他的渲染性能比较好，二是PC的网速一般快一点，加载速度可以接受。而手机端可以转到这个，一是界面简单，文件小，加载快，渲染快，而且手机版的排布其实不用像电脑一样，简单一点其实比较好。像我现在的网站，用手机流量打开，一个是慢，另一个是有点卡卡的，很不爽，虽然主题具有响应式布局，但是效果就是不太好。另起一套新的主题其实是非常合适的。

这个demo用的是Incremental Static Regeneration (ISR) 构建的，简而言之，引用这篇掘金：

传统的静态网站生成方式需要每次完全重新生成全部页面，这在网站内容变化频繁的情况下可能会导致生成时间较长，同时也可能会降低网站的性能。

ISR 的思想是只 重新生成需要更新部分页面。这样可以显著减少生成时间和资源占用，并且能够提高网站的响应速度。当用户请求一个需要更新的页面时，ISR 会在后台自动重新生成该页面，然后将其缓存，以便下一次请求时可以快速响应。

相比wordpress这种由php动态生成的网页信息的，next可以做到直接生成静态网页，这样子快的一匹，同时也只会在访问的时候，重新生成网站，当然这个重新生成的时间间隔需要你自己设置。

经过实测，yarn build就是一次性生成所有的文章静态内容，yarn start就启动服务了。之后我把这篇文章推上去了，刷新第一次，还是老的，应该是先返回之前的内容，然后比对了一下数据库，发现有新的数据，再重新生成静态文件。刷新第二次就出来新的文章列表了，是真的ISR，有点东西啊。

好，就水到这里，只是非常浅的试了一下这个demo，至于会不会针对这个demo进一步做出需求，这目前不好说。下一步应该是试试它里面说的预览模式，也就是文章编辑的时候，也能够直接看到预览内容。之后就是对整个文件做一个简单的剖析吧，看看具体是怎么写的。