Try   HackMD

#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 →

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

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 →

  • 產生 CSR Chunk + SSR file

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
    • react-router
  • 不會把 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

  • page/api 就可以放 API 喔

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

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

適合當全端框架嗎?

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 route 資源較少
    • 框架比較新
  • 有原有的後端服務,不需要 migrate 到 Next.js
  • 適合中小型專案
    • Nest.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