資訊專欄INFORMATION COLUMN
摘要：而更多的應用采用的是簡單的同構實現。請使用動態路由進行處理。后來用布署頻繁調試，發現自定義在上并不能用，看建議使用動態路由。如果要取消這種行為可以使用方法。利用動態實現代碼塊切片。如果使用的話，建議使用動態路由去做布署啦。
使用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 地址
本文只是提供操作思路。具體實現還請翻看代碼。
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/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...
閱讀 1867·2019-08-29 16:44
閱讀 2172·2019-08-29 16:30
閱讀 780·2019-08-29 15:12
閱讀 3531·2019-08-26 10:48
閱讀 2659·2019-08-23 18:33
閱讀 3778·2019-08-23 17:01
閱讀 1943·2019-08-23 15:54
閱讀 1302·2019-08-23 15:05
