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

Last changed by 
 
JSDC.tw
0
1
3369

Read more

#Session 1 窮途末路的 SPA，堅持 CSR 到放棄

從這開始 可以直接打字做共筆囉 :point_down: KK 徐凱 Web 實驗室 早期用 CSR 寫 SPA 名詞解釋

Jun 29, 2023
#Session 4 JS在生成式、演算藝術與NFT的應用

{%hackmd 2YoCBdBPTjmHXDr9lEpWuQ %} &#x5F9E;&#x9019;&#x958B;&#x59CB; &#x53EF;&#x4EE5;&#x76F4;&#x63A5;&#x6253;&#x5B57;&#x505A;&#x5171;&#x7B46;&#x56C9; :point_down: https://hackmd.io/V_HFtUJDQ8un2QVb5ti8jA# Processing - p5.js p5.js three.js pixi.js

Sep 15, 2022
#Session 2 JavaScript 模組進化論 - 模組化的演進與實戰

{%hackmd 2YoCBdBPTjmHXDr9lEpWuQ %} &#x5F9E;&#x9019;&#x958B;&#x59CB; &#x53EF;&#x4EE5;&#x76F4;&#x63A5;&#x6253;&#x5B57;&#x505A;&#x5171;&#x7B46;&#x56C9; :point_down: Mujing JavaScript &#x6982;&#x5FF5;&#x4E09;&#x660E;&#x6CBB; Outline

Mar 5, 2022
#Session 3 前端工程師也能搞得懂的區塊鏈

{%hackmd 2YoCBdBPTjmHXDr9lEpWuQ %} &#x5F9E;&#x9019;&#x958B;&#x59CB; &#x53EF;&#x4EE5;&#x76F4;&#x63A5;&#x6253;&#x5B57;&#x505A;&#x5171;&#x7B46;&#x56C9; :point_down: &#x6F14;&#x8B1B;&#x9023;&#x7D50;&#xFF1A;https://vimeo.com/641650302 Lucien Lee Agenda

Jan 22, 2022
Read more from JSDC.tw
Published on HackMD