摘要：而更多的应用采用的是简单的同构实现。请使用动态路由进行处理。后来用布署频繁调试，发现自定义在上并不能用，看建议使用动态路由。如果要取消这种行为可以使用方法。利用动态实现代码块切片。如果使用的话，建议使用动态路由去做布署啦。
使用next.js结合GITHUB ISSUE实现博客。 起因
。。。。起因是因为在某网站看到有一些类似实现。打算自己也做个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刷新页面的时候再重复这个过程。
步骤首先厘清实现流程步骤。
最简单的步骤：
获取数据源
构建前端页面
部署
其实就是简单的三步。
数据源获取首先是数据源的获取。
找到github.com api地址。
依照步骤
申请user token
找到对应的api
(直接用api 前端query)(得到所有数据 自身根据数据做query)
这里选择了后者，因为考虑到文件内容量一般不会特别大。
动手能力强的人，一般第一步不用跟步骤。
所以第二步开始。
我们这里选用的是v4 版本的graphql api。
我挺喜欢graphql的。
查询定义方便。
前后端可以用一套query 模版。
反正都是初次接触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地址demo 地址
github 地址
本文只是提供操作思路。具体实现还请翻看代码。
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/106806.html
摘要：为什么不选择其他方案在文章的开头我有提到，我曾经尝试过用，，自行搭建服务等途径去尝试维护博客。但这些尝试的结果均不合我意，最后无疾而终。我们使用作为博客平台，也就是相当于管理后端。 showImg(https://segmentfault.com/img/remote/1460000019265125?w=700&h=420); 对于爱写东西的人来说，挑一个合适的博客平台是非常重要的。...
摘要：什么是先贴官网英文中文。所有的操作必须指明到最底层的，并且返回值为标量，以确保响应结果的结构明白无误。对于前端来说，在查询的时候基本都要了解上面说的这几个概念，具体应用可参见我的这篇文章如何利用开发个人博客。 本文主要结合GitHub GraphQL API，从前端使用者的角度来谈GraphQL，没有GraphQL项目的同学可以拿GitHub GraphQL API练手，具体代码可参见...
摘要：使用的搜索功能进行搜索。搜寻好的开源项目有两种途径的搜索功能如果你对学习的内容有明确的方法，使用这种。的每日趋势如果你对最新的技术热点感兴趣的话，使用这种。丰富的使用案例。这点要求可能比较高了，一般个人开源者很少会去收集项目的使用案例。 github作为全球最大的开源软件托管平台，自2008年上线以来，一直吸引了无数的程序开发者在上面开源分享自己的项目代码。尤其是在微软收购github...
摘要：为什么不选择其他方案在文章的开头我有提到，我曾经尝试过用，，自行搭建服务等途径去尝试维护博客。但这些尝试的结果均不合我意，最后无疾而终。我们使用作为博客平台，也就是相当于管理后端。showImg(https://user-gold-cdn.xitu.io/2019/5/22/16adf79473dbdf59); 对于爱写东西的人来说，挑一个合适的博客平台是非常重要的。而作为一个 Web 开发...
摘要：获取标签及相关通常，我们会在博客首页设计一个有分类的文章列表，这就要求在发布时需要选择对应的。这里我用的是的和的库，核心代码如下结合开发个人博客的核心内容基本就这么多了，具体代码欢迎查看，一起踩坑。 作为一个程序员，搭建一个个人博客几乎是所有人的需求，一来比较酷，二来也可以记录自己的学习和生活总结。但如果你不是全栈工程师，实现这个需求还是有点麻烦。后端搭建一套现有的前端框架及前端写AP...
阅读 1850·2019-08-29 16:44
阅读 2153·2019-08-29 16:30
阅读 765·2019-08-29 15:12
阅读 3508·2019-08-26 10:48
阅读 2644·2019-08-23 18:33
阅读 3759·2019-08-23 17:01
阅读 1917·2019-08-23 15:54
阅读 1283·2019-08-23 15:05
