simonallen 技術部落格

Sign in Subscribe

JavaScript

淺談 Jamstack 架構

前言前陣子寫 Next.js 筆記時和朋友們討論 Gatsby.js「The static dynamic site generator for dynamic web developers」部分時提到了 Jamstack，其中一位夥伴說了：那 Jamstack 跟我們寫框架的 SPA 網站不是一樣嗎？提問者後續在其他人的解釋下才理解差異。之後想想，我在Next.js 筆記中 Jamstack 也只是草草帶過，確實有必要整理一下我的認知，大家教學相長，若此篇有什麼錯誤也歡迎指證。什麼是 stack 架構？有時我們會聽到 ${Something}stack 之類的名詞，開頭的字母即為技術的縮寫組合，例如： * LAMPstack：一般稱 LAMP，包含由 L(Linux)、A(

Next.js 入門：由 CRA 至 Gatsby 與 Next.js

此文不會講解為什麼 SSR 對 SEO 和 LCP 有幫助的原因如果不懂 LCP 是什麼，可見 Google 關於 LCP 指標的說明如果連 SPA 和 SSR 是什麼都不太懂，可以參考 Huli 大大寫的跟著小明一起搞懂技術名詞：MVC、SPA 與 SSR 前言前陣子的 React 生態圈可謂是振奮人心，官方在今年 6 月初公布了 18 版的計畫，其中基於 Suspense 的 Server Side Rendering 架構另許多開發者眼睛一亮，畢竟從 Client Side Rendering (以下簡稱 CSR)跨到

Next.js 入門：使用 next export 輸出 static file

此篇以 Next.js 11.0.1 版為主，內容僅供參考。若要使用 Next.js SSG 額外輸出 static HTML，不打算把 SSG 的內容置於 Next.js 的 Node.js Server 上的話，光靠目前 package.json 的 scripts 指令是不夠的，我們需要使用 next export。修改 package.json scripts 使用 create-next-app 建立好預設 Next 專案後，到 package.json 修改 scripts，在 "

Next.js 入門：Error: Image Optimization using Next.js' default loader is not compatible with next export.

前陣子使用 Next.js SSG 靜態頁面遇到問題，記錄一下： SSG build time 時報錯 log 如下： Error: Image Optimization using Next.js' default loader is not compatible with `next export`. Possible solutions: - Use `next start` to run a server, which includes the Image Optimization API. - Use any provider which supports Image

Next.js 入門：建立專案與專案結構

建立專案系統要求 MacOS、Windows 和 Linux 都沒差只要有 Node.js 12.0 或更高版本即可安裝與建立 create-next-app 專案打開 terminal 輸入 npx create-next-app ${專案名稱} 等 terminal 跑完即可。 npx 指令會先檢查本地端 Node.js 是否有安裝 create-next-app，有就執行 create-next-app。沒有就下載 create-next-app 裝入當前局部執行環境，不會裝進本機電腦 Node.js 全域環境，這麼做可以避免全域被汙染。若使用者想全域安裝也可以先下 npm install create-next-app -g，自行斟酌。專案結構打開建立好的專案可以看到如下檔案階層 |--

用 HTML br 替換 ↵ 換行前先想一想

這篇算是一個隨手紀錄，不要輕易用 <br/> 替換換行 ↵，先想想有沒有其他的方式。起因前陣子在處理前人的 Legacy code，有個情境是使用者在後台頁面輸入文章，前端把其 show 在前台頁面上。當然後端會在需顯示的前台頁面 API 將其(字串)發過來，這個字串不包含 HTML 標籤，可能包含換行符號，為了處理這個狀況，前人寫了個共用 function 來將換行符號替換成 HTML <br/> 標籤，例如： const setTextLineFeed = text => text.replace(/\n/g,'<br/>'); 將後端傳來包含換行符號的字串，先丟進這個 function

自幹 React Img LazyLoad 元件

為什麼要使用圖片 LazyLoad？ 1. 減少頻寬浪費圖片與影片是網站中最吃資源的元素之一，尤其在行動網路環境下，過度 PreLoad 預載會導致頻寬浪費。LazyLoad 可延遲非可視範圍內的圖片載入，只在使用者滑動到該區域時才載入圖片。 2. 提升首次載入速度圖片載入不只是下載，還會耗用瀏覽器 CPU 解析與渲染時間。 LazyLoad 可避免瀏覽器在首次載入時就忙著處理整頁圖片，提升 First Paint 時間，讓內容更快顯示。 3. 強化使用者體驗使用者更快看到畫面上可見的內容，自然會覺得「這網頁好快」。反之，如果等圖卡住了頁面，體驗就會大打折扣。各大網站 LazyLoad 的應用範例 PChome 先顯示灰底圖片，等圖片載入後才替換。 ETtoday 有 loading 動畫的底圖，載入圖片後再替換。 Medium 的高級做法：漸進式圖片置換 Medium 的做法分成三階段： 1.