---
tags: jsdc2021
---

# #Session 2 為什麼許多公司都願意導入 Next.js

{%hackmd 2YoCBdBPTjmHXDr9lEpWuQ %}

> 從這開始
> 可以直接打字做共筆囉 :point_down:

Leo 邱柏鈞 Hahow
B2B 前端工程師

Medium | Airwaves
StarBugs


## React 的問題

網站內容變化快，需要用 SSR!

實作 SSR 會需要注意的問題：

- React Hydrate / Dehydrate
- renderToString
- Page Routing
- 整合 redux: 必須讓 server-side 知道 redux 的 state 狀態
- 以及 styled-components 的載入時機


## 圖片優化問題
- 過大，浪費流量
- 新格式 WebP + AVIF，支援性問題
- 圖片預先載入
- 延遲載入
- 不載入不在 viewport 的圖片
- 設定圖片的 width 與 height

## Code Splitting by route


- 只載入每個頁面需要的資源
- 實作
- Webpack SplitChunkPlugin
- Dynamic import

# How Next.js Resolve


混合SSR, SSG, CSR

### Case: 電商平台可能有 N 個動態頁面需要產生


### Solution: SSGd


- SSG
- 先產生一部分產品頁面
- 使用者瀏覽時動態產生檔案

### Solution: `<Image>` component


- 解決圖片載入效能的問題

## 預設 code-splitting by per page


- 產生 CSR Chunk + SSR file

## More Features

### File-based routing


#### Advantage

- 一般 React app 使用的是 code-based routing
- react-router
- 不會把 code 跟 routing 的邏輯混在一起

### API routes
- 在 `page/api` 就可以放 API 喔

# Concerns


## 會不會不維護

- 不會
- 目前是由 Vercel 的 core team 維護
- 是公司運作，而且金流正常
- Star 破 7W，下載量破 200W

## Learning Curve


## Next.js w/ TypeScript

- 多數情況內建的 typedef 已經足夠
- JS 61.2%
- TS 36.1%
-

## 適合當全端框架嗎？


- 有風險
- API route 資源較少
- 框架比較新
- 有原有的後端服務，不需要 migrate 到 Next.js
- 適合中小型專案
- Nest.js 不香嗎

## 風險

### Enginning


- 多一個需要維護的伺服器
- 補：Vercel 等 Serverless 可以幫你
- React.js -> Next.js 的 T 與 L 成本

### SEO 不夠用了嗎？


- 原本的 SEO 不夠用嗎？
- 沒有 SSR 的話，PR 是否已經足夠？
- 會不會影響原有服務 -> 影響商業 (SEO)

## 該導入 Next.js 的場景


- 還是有不一樣的方式來撰寫
- DX = Developer Experience

# 總結


# Ending