Next13

Next13 是一個特別的版本，有人說 Next12 之於 Next13，就像 Vue2 升級 Vue3、Ag1 升級到 Ag2。個人是覺得有點略微浮誇，但也可以側面顯示 Next13 與之前的版本是有很大的不同。

底下列出我認為幾個影響較大的改動。

server component

Next13 引入了 server component，而且預設每個組件都是 server component。server component 會在服務器端執行，也就是說可以在 component 內執行 data fetching、與資料庫溝通，以及其他你想得到可以在 server 上做的事。

在沒有 server component 以前
所有組件預設都是 client component。在執行 SSR 渲染時，會在 page 層級的組件執行 getServerSideProps，把當前頁面所需要的資料全部撈完後，才會把資料傳給底下的 component 做渲染，最後再把整頁完整的 html 傳回 client。

上面這個做法會有個小問題，假設 getServerSideProps 內 call 了兩支 API，但其中一支特別慢，就會拖慢整個頁面渲染的速度，因為 getServerSideProps 必須等到所有 API 都取得資料才能接著做下一步。

有了 server compoennt 以後
這時候 server component 就派上用場了，上面提到只要是個 server component 就可以執行 data fetching 或任何 server 上的操作。這樣頁面就不用仰賴 getServerSideProps 把全部的資料跑完才渲染整個頁面，而是可以使用 server component 做 data fetching，先取得資料的 component 就先渲染，然後傳回 client 端。

所以引入 server component 後的 SSR 與之前最大的不同，是從原本以整個頁面為單位做渲染，變成以 component 為單位做渲染。

實際對頁面的影響
以 user 的視角來看，原本的方式會先看到一個空白的頁面(或 fallback page)，然後下一秒整頁 UI 就都畫好了。而使用 server component 的方式，則是會看到頁面一塊一塊的被加載出來，這樣整個使用者體驗會更好，還可以為 lighthouse score 加個分~（這個後面講到 Server Component 會再提到為什麼)

謎之音
Q: 既然 server component 這麼好用，那全部都用 server component 就好了？

A: server component 也是有一些限制的，比方說他無法使用 hooks，或是綁定事件等等，之後也會有一篇特別在講 server component 與 client component。

App Router

App Router 是 Next13 新推出的 router system，與前面幾版的 Page Router 一樣，都是 file-system based router。差別在於 App Router 有一套自己的規則，讓我們可以根據 Next 預先定義好的檔案名稱，建立相應功能的組件，還有一些是只有 App Router 才可以使用的功能，上面提到的 server component 就是其中一個。

另外，App Router 與 Page Router 是可以並存的，但也是有一些基本的限制，像是兩個目錄不能同時定義一個 router，否則會報錯。官網也有提供如何從 Page Router migrate App Router 的文章。

建立路由
App Router 資料夾內可以使用保留字建立檔案，為該 router 建立相應的功能，比方 error.tsx 可以捕捉該 router 底下的錯誤，給出一個 error 的 UI。還有更多的保留字後面會介紹到，也可以在檔案夾內建立一些資源，不需要每個檔案都要跟 router 有關，這也給了開發者一些規劃 folder 的彈性。

Page Router 就非常好理解，pages 就是一個只為 router 而生的資料夾，底下建立的全部檔案都會被當成 router，除了幾個少數幾個保留字，像是 _app.tsx, _documents.tsx。

• page router

└── pages
    ├── about.tsx // 建立 /about 路由
    ├── index.tsx // 建立 / 路由
    └── team.tsx // 建立 /team 路由

• App Router

└── app
    ├── about
    │   └── page.tsx // 建立 /about 路由
    ├── error.tsx // 保留字，用來建立 / 的 error boundary
    ├── globals.css // 對，就是普通的 css，這裡只想表達 app 資料夾內還可以放相關資源
    ├── layout.tsx // 保留字，用來建立 / 路由的 layout
    ├── login
    │   └── page.tsx // 建立 /page 路由
    ├── page.tsx  // 建立 / 路由
    └── team
        └── route.tsx // 建立 /team 路由

該選擇 Next13 嗎

我認為 Next13 目前最大的賣點就是他可以使用 server component，雖然 App Router 也很好用，但也沒有好用到會成為選擇 Next13 的主因。想要做 SSR 也不一定要選擇 Next，最近還有聽到另一個不錯的 SSR 框架 Remix可以做選擇。

explainthis的作者也提到他們的網站使用的是 Next12 開發的，目前也沒有遷徙到 Next13 的打算，因為他們目前的 lighthouse 跑分都滿分了，沒有必要為了提昇那微乎其微的效率，花時間遷徙到 Next13 上。

目前 Next13 也還沒完全穩定下來，聽了前端輕鬆聊 EP12 - Next.js App Router 開發體驗 講到他們以 Next13 開發新專案時也遇到了一些狀況。

總結來說我還是非常看好 Next13 的未來，但現在要使用的話，建議還是用在一些中小型的專案或是自己 side project 就好。

後記

現在每篇文章都會加上什麼「後面會講到」，但其實我根本不知道會不會講到，感覺要準備一個填坑list，有填坑的就打勾，不然伏筆要收不完辣～

參考資料

• Next - defining-routes
• Next.js 12 vs Next.js 13: What’s the Difference?
• 爲什麼 Next-js 13 會改變遊戲規則？
• 前端輕鬆聊 EP12 - Next.js App Router 開發體驗
• Next.js’s New App Vs. Pages Router: A Detailed Comparison