#Session 2 為什麼許多公司都願意導入 Next.js
歡迎來到 JSDC 2021 共筆
Image Not Showing
Possible Reasons
- The image file may be corrupted
- The server hosting the image is unavailable
- The image path is incorrect
- The image format is not supported
Learn More →
共筆入口:https://hackmd.io/@JSDC-tw/2021conference
手機版請點選上方 按鈕展開議程列表。
共筆協作,共享知識,打造開放社群。
Image Not Showing
Possible Reasons
- The image file may be corrupted
- The server hosting the image is unavailable
- The image path is incorrect
- The image format is not supported
Learn More →
Welcome to JSDC 2021 Collaborative Writing
Image Not Showing
Possible Reasons
- The image file may be corrupted
- The server hosting the image is unavailable
- The image path is incorrect
- The image format is not supported
Learn More →
Collaborative Writing Workplace:https://hackmd.io/@JSDC-tw/2021conference
Using mobile please tap to unfold the agenda.
Build a community with open collaboration.
Image Not Showing
Possible Reasons
- The image file may be corrupted
- The server hosting the image is unavailable
- The image path is incorrect
- The image format is not supported
Learn More →
從這開始
可以直接打字做共筆囉
Image Not Showing
Possible Reasons
- The image file may be corrupted
- The server hosting the image is unavailable
- The image path is incorrect
- The image format is not supported
Learn More →
Leo 邱柏鈞 Hahow
B2B 前端工程師
Medium | Airwaves
StarBugs
Image Not Showing
Possible Reasons
- The image file may be corrupted
- The server hosting the image is unavailable
- The image path is incorrect
- The image format is not supported
Learn More →
React 的問題
Image Not Showing
Possible Reasons
- The image file may be corrupted
- The server hosting the image is unavailable
- The image path is incorrect
- The image format is not supported
Learn More →
網站內容變化快,需要用 SSR!
實作 SSR 會需要注意的問題:
- React Hydrate / Dehydrate
- renderToString
- Page Routing
- 整合 redux: 必須讓 server-side 知道 redux 的 state 狀態
- 以及 styled-components 的載入時機
Image Not Showing
Possible Reasons
- The image file may be corrupted
- The server hosting the image is unavailable
- The image path is incorrect
- The image format is not supported
Learn More →
圖片優化問題
- 過大,浪費流量
- 新格式 WebP + AVIF,支援性問題
- 圖片預先載入
- 延遲載入
- 不載入不在 viewport 的圖片
- 設定圖片的 width 與 height
Code Splitting by route
Image Not Showing
Possible Reasons
- The image file may be corrupted
- The server hosting the image is unavailable
- The image path is incorrect
- The image format is not supported
Learn More →
- 只載入每個頁面需要的資源
- 實作
- Webpack SplitChunkPlugin
- Dynamic import
How Next.js Resolve
Image Not Showing
Possible Reasons
- The image file may be corrupted
- The server hosting the image is unavailable
- The image path is incorrect
- The image format is not supported
Learn More →
混合SSR, SSG, CSR
Case: 電商平台可能有 N 個動態頁面需要產生
Image Not Showing
Possible Reasons
- The image file may be corrupted
- The server hosting the image is unavailable
- The image path is incorrect
- The image format is not supported
Learn More →
Solution: SSGd
Image Not Showing
Possible Reasons
- The image file may be corrupted
- The server hosting the image is unavailable
- The image path is incorrect
- The image format is not supported
Learn More →
Solution: <Image>
component
Image Not Showing
Possible Reasons
- The image file may be corrupted
- The server hosting the image is unavailable
- The image path is incorrect
- The image format is not supported
Learn More →
預設 code-splitting by per page
Image Not Showing
Possible Reasons
- The image file may be corrupted
- The server hosting the image is unavailable
- The image path is incorrect
- The image format is not supported
Learn More →
More Features
File-based routing
Image Not Showing
Possible Reasons
- The image file may be corrupted
- The server hosting the image is unavailable
- The image path is incorrect
- The image format is not supported
Learn More →
Advantage
- 一般 React app 使用的是 code-based routing
- 不會把 code 跟 routing 的邏輯混在一起
Image Not Showing
Possible Reasons
- The image file may be corrupted
- The server hosting the image is unavailable
- The image path is incorrect
- The image format is not supported
Learn More →
API routes
Concerns
Image Not Showing
Possible Reasons
- The image file may be corrupted
- The server hosting the image is unavailable
- The image path is incorrect
- The image format is not supported
Learn More →
會不會不維護
- 不會
- 目前是由 Vercel 的 core team 維護
- 是公司運作,而且金流正常
- Star 破 7W,下載量破 200W
Learning Curve
Image Not Showing
Possible Reasons
- The image file may be corrupted
- The server hosting the image is unavailable
- The image path is incorrect
- The image format is not supported
Learn More →
Next.js w/ TypeScript
適合當全端框架嗎?
Image Not Showing
Possible Reasons
- The image file may be corrupted
- The server hosting the image is unavailable
- The image path is incorrect
- The image format is not supported
Learn More →
- 有風險
- 有原有的後端服務,不需要 migrate 到 Next.js
- 適合中小型專案
風險
Enginning
Image Not Showing
Possible Reasons
- The image file may be corrupted
- The server hosting the image is unavailable
- The image path is incorrect
- The image format is not supported
Learn More →
- 多一個需要維護的伺服器
- 補:Vercel 等 Serverless 可以幫你
- React.js -> Next.js 的 T 與 L 成本
SEO 不夠用了嗎?
Image Not Showing
Possible Reasons
- The image file may be corrupted
- The server hosting the image is unavailable
- The image path is incorrect
- The image format is not supported
Learn More →
- 原本的 SEO 不夠用嗎?
- 沒有 SSR 的話,PR 是否已經足夠?
- 會不會影響原有服務 -> 影響商業 (SEO)
該導入 Next.js 的場景
Image Not Showing
Possible Reasons
- The image file may be corrupted
- The server hosting the image is unavailable
- The image path is incorrect
- The image format is not supported
Learn More →
- 還是有不一樣的方式來撰寫
- DX = Developer Experience
總結
Image Not Showing
Possible Reasons
- The image file may be corrupted
- The server hosting the image is unavailable
- The image path is incorrect
- The image format is not supported
Learn More →
Ending
