用自己不熟悉的工具架一個部落格並不難，甚至跟TodoList一樣常常被拿來當作練習新的框架或語言的一個題目，導致現在CodeBase有成千上萬個todolist跟blog XD，但大部份教學都是教從後端fetch API顯示在前端而已沒有任何的變化，不然就是連資料庫都沒建，一個真正的網頁其實還有非常多方向可延伸，如:基本的CRUD,Pagination,Search Filter,會員系統或自己打造CMS等...，這些都是很好自行延伸的方向，只單純顯示plain text很簡單當然也會沒有成就感！

本來是想在IT幫邦忙或是Medium.com那寫個鐵人賽，但礙於平時時間的關係可能也沒辦法每天穩定生產一篇文，而身為工程師當然就該直接從頭架一個網站然後部屬到自己的主機增加挑戰性，其實這樣很容易被說為了喝牛奶而養牛，但我認為如果可以在養牛的過程中學到更多額外的技術那豈不是賺爛嗎!然後在將現在這個網站的建立過程經過消化後再分享給大家，也能加快學習速度XD。

原本大約3個禮拜左右就該完成了，但礙於最近時間真的不夠用只能每天花個2~3小時邊學邊實作(理由伯)，也因為我前端真的不強，個人比較喜歡花時間在後端邏輯演算部分，不喜歡刻版QQ，而這個為時大約一個月的Next.js SSG網站也是我首次公開的Source Code，以往的Side Project跟大部份的Code都深埋在我的private repo或Nas XD。

而這個網站除了分享架站過程也會分享一些自己平時寫Code的筆記，當然都會分享非常的基本的為主，太難或是太抽象的方法其實我放上來也沒什麼意義，大概也只會有自己看得懂，畢竟小弟文筆及表達能力不好XD

此部落格跟其他部落格有啥不同

最大的不同其實就是切換頁面的等待時間幾乎是0，這也是SSG的優勢，可以看我程式碼的其中一個片段，SSG 就是將所有的內容都在 bulid 的時候都打包進入檔案中，所以每當使用者landed到index時，就拿到完整的HTML 檔案。這在SEO上是佔了優勢，，還有下次在同個電腦開也會快很多，因為HTML已被 cache 在 CDN 上，向Server request的次數也會變少，對 Server loading負擔減少。SSG與其他渲染模式的不同可以參考另一篇

這是這個網站分類的其中一段程式碼，SSG 靜態生成 build 整個專案的時候產生 HTML 檔案，這些 HTML 檔案已經包含所需要顯示的資料。這渲染模式是預渲染 (pre-rendering) 的一種。

export async function getStaticProps({params}){
    const categoryPosts = await (getCategoryPost(params.slug) || []); 
    return{
        props: {categoryPosts},
    }}
export async function getStaticPaths(){
    const categories = await getCategories();
    return {
        paths: categories.map(({slug})=>({params:{slug}})),
        fallback:true,
    }
}

用Next.js開發事前所需的基本知識

我在寫Next.js前也用單純React開發過，而React與另外兩大家Angular、Vue多半是以CSR或SSR的方式渲染達到SPA效果

上面能看到將原本傳統開發一堆的HTML檔案改為放入一個JS的容器，而在使用者去瀏覽網頁時會將所有JS下載到本機開始執行React的各個組件後才開始做渲染，而CSR routing 的過程也不再像以往ㄧ樣要重新去 server request 後不斷重整頁面，讓瀏覽體驗大幅提升。

csrVSssr.png

 CSR 的渲染步驟是Browser載入 JS 後再去執行它，最後靠 JS 才能渲染出要顯示的元件與交互，因此對於搜尋引擎 (大型爬蟲)來說非常不有利，因為它一開始在還沒load完js前所擷取到的只會是一堆空的<tag>而已，導致不易被搜尋。

直接先給大家開發完React的dependencies的數量

如果JS 隨著專案的擴充變得非常肥大，瀏覽器在下載 JS 與執行 JS 上所花的時間都會因此增加，導致第一次進入網站的效能變差，要知道這已經是小型專案的狀況了，儘管有一堆dependecies並不是壞事，畢竟在開發的重點原則之一就是"

但其實不管思考再怎麼縝密周到，終究還是會有管理上的問題，如果你對你的專案的 dependecies不理解，就是一個風險，這代表未來的 maintain 都需要去挖每個dependecies的source code，那這時間成本就剛好補上了你最開始省下的造輪子的時間了，尤其是升級 package 的版本時，每個版本是否會有相容問題，都是一種不確定因素，造成版本停滯。而很多企業嘗試導入Next.js不外乎就是因為他能同時支援 SSR與 SSG 兩種方法。

Young

你可能還會想看..

文章分類