使用next.js結(jié)合GITHUB ISSUE實(shí)現(xiàn)博客。

SillyMonkey 發(fā)布于2019-08-26 10:48 / 3549人閱讀

摘要：而更多的應(yīng)用采用的是簡單的同構(gòu)實(shí)現(xiàn)。請(qǐng)使用動(dòng)態(tài)路由進(jìn)行處理。后來用布署頻繁調(diào)試，發(fā)現(xiàn)自定義在上并不能用，看建議使用動(dòng)態(tài)路由。如果要取消這種行為可以使用方法。利用動(dòng)態(tài)實(shí)現(xiàn)代碼塊切片。如果使用的話，建議使用動(dòng)態(tài)路由去做布署啦。

使用next.js結(jié)合GITHUB ISSUE實(shí)現(xiàn)博客。 起因

。。。。起因是因?yàn)樵谀尘W(wǎng)站看到有一些類似實(shí)現(xiàn)。打算自己也做個(gè)side-project。

習(xí)慣性的對(duì)自己做的side-project 做一些描述性的語句，不做具體，而提供思路。

next 簡單的快速上手很快，基本沒有什么曲線可能只是需要了解服務(wù)端常見知識(shí)即可。

渲染。

我們常說SSR也就是服務(wù)端渲染。那對(duì)應(yīng)的服務(wù)端渲染，自然有客戶端渲染。

類似SPA就是客戶端渲染。

首先從router來講起。我們知道前端router 自從有了HTML5 API以后也可以進(jìn)行router功能。

hash 模式 OR history模式。

兩種模式的不同也只是在于 hash mode 對(duì)于服務(wù)端hashchange 也是一個(gè)path
而history mode 對(duì)于服務(wù)端 history push 可能對(duì)應(yīng)的是另一個(gè)asset path

所以一般需要對(duì)服務(wù)器做路徑的匹配以導(dǎo)向?qū)?yīng)資源。

而更多的應(yīng)用采用的是簡單的同構(gòu)實(shí)現(xiàn)。

server render做首屏或者seo 優(yōu)化，然后生命周期數(shù)據(jù)都繼續(xù)在前端處理。refresh刷新頁面的時(shí)候再重復(fù)這個(gè)過程。

步驟

首先厘清實(shí)現(xiàn)流程步驟。

最簡單的步驟：

獲取數(shù)據(jù)源

構(gòu)建前端頁面

部署

其實(shí)就是簡單的三步。

數(shù)據(jù)源獲取

首先是數(shù)據(jù)源的獲取。

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

申請(qǐng)user token

找到對(duì)應(yīng)的api

(直接用api 前端query)(得到所有數(shù)據(jù) 自身根據(jù)數(shù)據(jù)做query)
這里選擇了后者，因?yàn)榭紤]到文件內(nèi)容量一般不會(huì)特別大。

動(dòng)手能力強(qiáng)的人，一般第一步不用跟步驟。

所以第二步開始。

我們這里選用的是v4 版本的graphql api。

我挺喜歡graphql的。

查詢定義方便。

前后端可以用一套query 模版。

反正都是初次接觸next了，也不妨初次再接觸github 的v4 api。

首先 REST API是需要數(shù)據(jù)對(duì)應(yīng)接口，http方法決定操作，query決定結(jié)果。操作冪等。

這里用GraphQL 第一步，我們是需要找到endpoint 入口節(jié)點(diǎn)。
用來接受并解析驗(yàn)證執(zhí)行查詢。

我們找到repositoryConnection 利用這個(gè)連接找到所有nodes 相關(guān)聯(lián)信息即可。

學(xué)習(xí)GraphQL 需要了解nodes, connection, edge基本概念

首先我們要獲取所有total的數(shù)據(jù)源。

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

拿到totalCount以后用來去換取所有的issue Data源。

issues data query 可以自己試著寫一下。

拿到以后就寫入文件啦。

當(dāng)然你也可以對(duì)數(shù)據(jù)源做一遍篩選。你喜歡都可以。

構(gòu)建前端頁面。

這里next 其實(shí)我也不是用的很深。

以下列舉一些我遇到的問題：

1. 自定義server

首先是server端的server start

你可以選擇自定義得去處理請(qǐng)求，然后精確得控制路由

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

thenable里面你甚至可以使用現(xiàn)有類庫進(jìn)行router操作。

2. 注意部署運(yùn)行環(huán)境

要注意部署環(huán)境是node端還是no server 端。

如果是no server 端，例如now publish 這些靜態(tài)文件服務(wù)器。請(qǐng)使用動(dòng)態(tài)路由進(jìn)行處理。

原理是根據(jù)router 在build的時(shí)候即進(jìn)行處理。

3. 運(yùn)行預(yù)處理css/sass等的話需要在next.config.js中自行配置環(huán)境

配置方式與webpack配置大同小異。

4. 可以利用next/head自定義生成html文檔head部分內(nèi)容 5. next/link的使用。

link是更強(qiáng)大的router，處理封裝了as屬性，prefetch方法等。

prefetch默認(rèn)行為是在mouseover的時(shí)候進(jìn)行prefetch操作。prefetch是在生產(chǎn)模式對(duì)資源的獲取。

next/link 組件可以進(jìn)行的具體操作參見文檔內(nèi)容

6. router的問題。

之前我是用server => page, 在page內(nèi)處理query的。

后來用now布署頻繁調(diào)試，發(fā)現(xiàn)自定義server path在now server上并不能用，看issue建議使用動(dòng)態(tài)路由。

詳情請(qǐng)看這篇文檔

還有router會(huì)進(jìn)行兩次render，在最后也是在上面文檔發(fā)現(xiàn)了一個(gè)注意點(diǎn)。

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 會(huì)對(duì)頁面組件進(jìn)行一次路由的預(yù)渲染處理，所以query 會(huì)為空。如果要取消這種行為可以使用getInitialProps方法。

后來在組件加 getInitialProps 果然就disabled 這種情況了。

7. 利用動(dòng)態(tài)import 實(shí)現(xiàn)代碼塊切片。

服務(wù)端渲染可以讓我們有一個(gè)好處就是可以更顆粒化地處理某個(gè)頁面實(shí)際需要的內(nèi)容塊，從而優(yōu)化加載速度。

利用next/dynamic

由于我們這里使用的是一次性抓取的數(shù)據(jù)塊。（其實(shí)可以區(qū)分多個(gè)數(shù)據(jù)塊，對(duì)應(yīng)頁面獲取對(duì)應(yīng)數(shù)據(jù)塊其實(shí)也可以，體積也較少。）

但是這里考慮到我的數(shù)據(jù)量還是很小的緣故，所以直接對(duì)原來的代碼做切分。

articleList 組件與Article組件分別用來做獲取數(shù)據(jù)的異步塊。

這樣以來，首文件的大小就從100K 降低到了20K。WOW 真的是太棒了

布署

布署可以使用node 端布署，自行架設(shè)服務(wù)器，用pm2等之類的進(jìn)程管理run server.js即可。

如果使用now的話，建議使用動(dòng)態(tài)路由去做布署啦。

now cli地址

完整布署后的demo地址

demo 地址

github 地址

本文只是提供操作思路。具體實(shí)現(xiàn)還請(qǐng)翻看代碼。

GPU云服務(wù)器云服務(wù)器 next.js next.js 樣式結(jié)合使用 Next.js 12 正式發(fā)布、Yarn

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/106806.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

SillyMonkey

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

前端進(jìn)階（8） - 前端開發(fā)需要了解的工具集合：webpack, eslint, prettier,

閱讀 1901·2019-08-29 16:44
HTML與CSS中的定位個(gè)人分享

閱讀 2200·2019-08-29 16:30
Z-index 層疊上下文和層疊水平

閱讀 812·2019-08-29 15:12
使用next.js結(jié)合GITHUB ISSUE實(shí)現(xiàn)博客。

閱讀 3550·2019-08-26 10:48
Vue數(shù)據(jù)響應(yīng)式原理筆記就幾行沒啥可看的

閱讀 2684·2019-08-23 18:33
避免CDN引用資源被webpack打包進(jìn)出口bundle.js文件

閱讀 3817·2019-08-23 17:01
scheduler 源碼

閱讀 1967·2019-08-23 15:54
前端路由跳轉(zhuǎn)基本原理

閱讀 1328·2019-08-23 15:05

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長期優(yōu)惠，快來選購！

使用next.js結(jié)合GITHUB ISSUE實(shí)現(xiàn)博客。

相關(guān)文章

**為什么我選擇用 Github issues 來寫博客**

前端應(yīng)該知道的GraphQL

**你真的會(huì)使用github嗎？**

**為什么我選擇用 Github issues 來寫博客**

**如何利用GitHub GraphQL API開發(fā)個(gè)人博客？**

發(fā)表評(píng)論

0條評(píng)論

SillyMonkey

男|高級(jí)講師

TA的文章

前端進(jìn)階（8） - 前端開發(fā)需要了解的工具集合：webpack, eslint, prettier,

HTML與CSS中的定位個(gè)人分享

Z-index 層疊上下文和層疊水平