使用next.js结合GITHUB ISSUE实现博客。

2019-08-15 admin

起因

。。。。起因是因为在某网站看到有一些类似实现。打算自己也做个side-project。

习惯性的对自己做的side-project 做一些描述性的语句,不做具体,而提供思路。


next 简单的快速上手很快,基本没有什么曲线

可能只是需要了解服务端常见知识即可。


渲染。

我们常说SSR也就是服务端渲染。那对应的服务端渲染,自然有客户端渲染。

类似SPA就是客户端渲染。

首先从router来讲起。我们知道前端router 自从有了HTML5 API以后也可以进行router功能。

hash 模式 OR history模式。

两种模式的不同也只是在于 hash mode 对于 服务端hashchange 也是一个path 而history mode 对于服务端 history push 可能对应的是另一个asset path

所以一般需要对服务器做路径的匹配以导向对应资源。

而更多的应用采用的是简单的同构实现。

server render做首屏或者seo 优化,然后生命周期数据都继续在前端处理。refresh刷新页面的时候再重复这个过程。


步骤

首先厘清实现流程步骤。

最简单的步骤:

  1. 获取数据源
  2. 构建前端页面
  3. 部署

其实就是简单的三步。


数据源获取

首先是数据源的获取。

找到github.com api地址。 依照步骤

  1. 申请user token
  2. 找到对应的api
  3. (直接用api 前端query)(得到所有数据 自身根据数据做query) 这里选择了后者,因为考虑到文件内容量一般不会特别大。

动手能力强的人,一般第一步不用跟步骤。

所以第二步开始。

我们这里选用的是v4 版本的graphql api。

我挺喜欢graphql的。

  1. 查询定义方便。
  2. 前后端可以用一套query 模版。
  3. 反正都是初次接触next了,也不妨初次再接触github 的v4 api。

首先 REST API是需要数据对应接口,http方法决定操作,query决定结果。操作幂等。

这里用GraphQL 第一步,我们是需要找到endpoint 入口节点。 用来接受并解析验证执行查询。

我们找到repositoryConnection 利用这个连接找到所有nodes 相关联信息即可。

学习GraphQL 需要了解nodes, connection, edge基本概念

首先我们要获取所有total的数据源。

query { 
    repository(owner:"ZWkang", name: "Start-Learning-React") {
    issues(orderBy: {
      direction: DESC,
      field: CREATED_AT
    }, first:1){
      totalCount
    }}
}

拿到totalCount以后用来去换取所有的issue Data源。

issues data query 可以自己试着写一下。

拿到以后就写入文件啦。

当然你也可以对数据源做一遍筛选。 你喜欢都可以。


构建前端页面。

这里next 其实我也不是用的很深。

以下列举一些我遇到的问题:

1. 自定义server

首先是server端的server start

你可以选择自定义得去处理请求,然后精确得控制路由

app.prepare().then(() => {})

thenable里面你甚至可以使用现有类库进行router操作。

2. 注意部署运行环境

要注意部署环境是node端还是no server 端。

如果是no server 端,例如now publish 这些静态文件服务器。请使用动态路由进行处理。

原理是根据router 在build的时候即进行处理。

3. 运行预处理css/sass等的话需要在next.config.js中自行配置环境

配置方式与webpack配置大同小异。

4. 可以利用next/head自定义生成html文档head部分内容

5. next/link的使用。

link是更强大的router,处理封装了as属性,prefetch方法等。

prefetch默认行为是在mouseover的时候进行prefetch操作。prefetch是在生产模式对资源的获取。

next/link 组件可以进行的具体操作参见文档内容

6. router的问题。

之前我是用server => page, 在page内处理query的。

后来用now布署频繁调试,发现自定义server path在now server上并不能用,看issue建议使用动态路由。

详情请看这篇文档

还有router会进行两次render,在最后也是在上面文档发现了一个注意点。

Note: Pages that are statically optimized by automatic prerendering will be hydrated without their route parameters provided (query will be empty, i.e. {}). After hydration, Next.js will trigger an update to your application to provide the route parameters in the query object. If your application cannot tolerate this behavior, you can opt-out of static optimization by capturing the query parameter in getInitialProps.

next 会对页面组件进行一次路由的预渲染处理,所以query 会为空。如果要取消这种行为可以使用getInitialProps方法。

后来在组件加 getInitialProps 果然就disabled 这种情况了。

7. 利用动态import 实现代码块切片。

服务端渲染可以让我们有一个好处就是 可以更颗粒化地处理 某个页面实际需要的内容块,从而优化加载速度。

利用next/dynamic

由于我们这里使用的是一次性抓取的数据块。(其实可以区分多个数据块,对应页面获取对应数据块其实也可以,体积也较少。)

但是这里考虑到我的数据量还是很小的缘故,所以直接对原来的代码做切分。

articleList 组件 与Article组件分别用来做获取数据的异步块。

这样以来,首文件的大小就从100K 降低到了20K。WOW 真的是太棒了


布署

布署可以使用node 端布署,自行架设服务器,用pm2等之类的进程管理run server.js即可。

如果使用now的话,建议使用动态路由去做布署啦。

now cli地址


完整布署后的demo地址

本文只是提供操作思路。具体实现还请翻看代码。

[转载]原文链接:https://segmentfault.com/a/1190000020086402

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-72604.html

文章标题:使用next.js结合GITHUB ISSUE实现博客。

相关文章
Node.js 2014这一年发生了什么
Node.js 的 2014 年充满了不幸和争议. 这一年 Noder 们经历了太多的伤心事, 经历了漫长的等待, 经历了沉重的分裂之痛. 也许 Noder 们不想回忆14年 Node.js land 发生的事情, 但正因为痛才更有铭记的价...
2015-11-12
JavaScript实现PC手机端和嵌入式滑动拼图验证码三种效果
PC和手机端网站滑动拼图验证码效果源码,同时包涵了弹出式Demo,使用ajax形式提交二次验证码所需的验证结果值,嵌入式Demo,使用表单形式提交二次验证所需的验证结果值,移动端手动实现弹出式Demo三种效果 首先要确认前端使用页面,比如...
2017-03-17
Angular2-primeNG文件上传模块FileUpload使用详解
近期在学习使用Angular2做小项目,期间用到很多primeNG的模块。 本系列将结合实战总结angular2-primeNG各个模块的使用经验。 文件上传模块FileUploadModule 首先要在使用该组件的模块内导入文件上传模块 ...
2017-03-09
Vue.js组件tab实现选项卡切换
本文实例为大家分享了vue插件tab选项卡的具体代码,供大家参考,具体内容如下 效果图: 代码如下: <!DOCTYPE html> <html lang="en"> <head> ...
2017-03-13
React.js编程思想
JavaScript框架层出不穷,在很多程序员看来,React.js是创建大型、快速的Web应用的最好方式。这一款由Facebook出品的JS框架,无论是在Facebook还是在Instagram中,它的表现都非常出色。 使用React.j...
2015-11-12
YouTube正式默认使用HTML5视频播放器
YouTube视频网站现在默认使用HTML5播放器,这意味着更好的性能、 稳定性、 电池寿命和甚至是更好的安全性。现在用户通过Chrome、IE 11、Safari 8和Beta版本的Firefox进行浏览的时候都默认使用HTML5视频播放...
2015-11-12
从2014年的发展来展望JS的未来将会如何
<font face="寰�杞�闆呴粦, Arial, sans-serif ">2014骞达紝杞�浠惰�屼笟鍙戝睍杩呴€燂紝鍚勭�嶈��瑷€灞傚嚭涓嶇┓锛屼互婊¤冻鐢ㄦ埛涓嶆柇鍙樺寲鐨勯渶姹傘€傝繖浜涜��...
2015-11-12
jsdom 中文文档(纯翻译)
jsdom是一个纯粹由 javascript 实现的一系列 web标准,特别是 WHATWG 组织制定的DOM和 HTML 标准,用于在 nodejs 中使用。大体上来说,该项目的目标是模拟足够的Web浏览器子集,以便用于测试和挖掘真实世界...
2018-05-14
three.js实现围绕某物体旋转
话不多说,请看代码: 可以拖动右上角观察变化 <!DOCTYPE html> <html lang="en" style="width: 100%; height:100%;"&gt...
2017-02-17
JavaScript教程:JS中的原型
Keith Peters 几年前发表的一篇博文,关于学习没有“new”的世界,其中解释了使用原型继承代替构造函数。两者都是纯粹的原型编码。 标准方法(The Standard Way) 一直以来,我们学习的在 JavaScript 里创建对...
2015-11-12
回到顶部