成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

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

SillyMonkey / 3613人閱讀

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

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

。。。。起因是因為在某網(wǎng)站看到有一些類似實現(xiàn)。打算自己也做個side-project。

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

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

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

類似SPA就是客戶端渲染。

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

hash 模式 OR history模式。

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

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

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

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

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

最簡單的步驟：

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

構(gòu)建前端頁面

部署

其實就是簡單的三步。

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

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

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

申請user token

找到對應(yīng)的api

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

動手能力強的人，一般第一步不用跟步驟。

所以第二步開始。

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

我挺喜歡graphql的。

查詢定義方便。

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

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

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

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

我們找到repositoryConnection 利用這個連接找到所有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)然你也可以對數(shù)據(jù)源做一遍篩選。 你喜歡都可以。

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

這里next 其實我也不是用的很深。

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

1. 自定義server

首先是server端的server start

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

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

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

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

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

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

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

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

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

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

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

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

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

6. router的問題。

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

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

詳情請看這篇文檔

還有router會進行兩次render，在最后也是在上面文檔發(fā)現(xià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 會對頁面組件進行一次路由的預(yù)渲染處理，所以query 會為空。如果要取消這種行為可以使用getInitialProps方法。

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

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

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

利用next/dynamic

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

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

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

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

布署

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

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

now cli地址

完整布署后的demo地址

demo 地址

github 地址

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

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

轉(zhuǎn)載請注明本文地址：http://m.hztianpu.com/yun/106806.html

相關(guān)文章

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

    摘要：為什么不選擇其他方案在文章的開頭我有提到，我曾經(jīng)嘗試過用，，自行搭建服務(wù)等途徑去嘗試維護博客。但這些嘗試的結(jié)果均不合我意，最后無疾而終。我們使用作為博客平臺，也就是相當(dāng)于管理后端。 showImg(https://segmentfault.com/img/remote/1460000019265125?w=700&h=420); 對于愛寫東西的人來說，挑一個合適的博客平臺是非常重要的。...

    Scliang 評論0 收藏0

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

    摘要：什么是先貼官網(wǎng)英文中文。所有的操作必須指明到最底層的，并且返回值為標(biāo)量，以確保響應(yīng)結(jié)果的結(jié)構(gòu)明白無誤。對于前端來說，在查詢的時候基本都要了解上面說的這幾個概念，具體應(yīng)用可參見我的這篇文章如何利用開發(fā)個人博客。 本文主要結(jié)合GitHub GraphQL API，從前端使用者的角度來談GraphQL，沒有GraphQL項目的同學(xué)可以拿GitHub GraphQL API練手，具體代碼可參見...

    lansheng228 評論0 收藏0

  • 你真的會使用github嗎？

    摘要：使用的搜索功能進行搜索。搜尋好的開源項目有兩種途徑的搜索功能如果你對學(xué)習(xí)的內(nèi)容有明確的方法，使用這種。的每日趨勢如果你對最新的技術(shù)熱點感興趣的話，使用這種。豐富的使用案例。這點要求可能比較高了，一般個人開源者很少會去收集項目的使用案例。 github作為全球最大的開源軟件托管平臺，自2008年上線以來，一直吸引了無數(shù)的程序開發(fā)者在上面開源分享自己的項目代碼。尤其是在微軟收購github...

    forrest23 評論0 收藏0

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

    摘要：為什么不選擇其他方案在文章的開頭我有提到，我曾經(jīng)嘗試過用，，自行搭建服務(wù)等途徑去嘗試維護博客。但這些嘗試的結(jié)果均不合我意，最后無疾而終。我們使用作為博客平臺，也就是相當(dāng)于管理后端。showImg(https://user-gold-cdn.xitu.io/2019/5/22/16adf79473dbdf59); 對于愛寫東西的人來說，挑一個合適的博客平臺是非常重要的。而作為一個 Web 開發(fā)...

    gnehc 評論0 收藏0

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

    摘要：獲取標(biāo)簽及相關(guān)通常，我們會在博客首頁設(shè)計一個有分類的文章列表，這就要求在發(fā)布時需要選擇對應(yīng)的。這里我用的是的和的庫，核心代碼如下結(jié)合開發(fā)個人博客的核心內(nèi)容基本就這么多了，具體代碼歡迎查看，一起踩坑。 作為一個程序員，搭建一個個人博客幾乎是所有人的需求，一來比較酷，二來也可以記錄自己的學(xué)習(xí)和生活總結(jié)。但如果你不是全棧工程師，實現(xiàn)這個需求還是有點麻煩。后端搭建一套現(xiàn)有的前端框架及前端寫AP...

    fireflow 評論0 收藏0

發(fā)表評論

0條評論

閱讀需要支付1元查看
<