整自己blog #5 Next.js + Tailwind

Programming

導覽

正文

正式整個blog
砌左個最底層既Layout 先
簡單div 砌一砌

同時砌哂Desktop 同Mobile 版

Desktop 版:

紅色 Sidebar
藍色 Topbar
黃色 Content
綠色 Footer

Mobile 版:

紅色 Header
藍色 Content
黃色 Footer

變做Code就會咁樣:

入面用左tailwind 既responsive design pattern黎control返兩個唔同layout
Sidebar 同Topbar既 h-0 同埋sm:h-screen 就代表個screen size細過"sm'時會隱藏

之後遂個遂個砌返每個component 係呢度Sidebar Header Footer 都係hard code既所以就唔著墨啦
主要想講既係Content呢part

正如上一篇所講Home, About, 同埋Blog呢3部分都會係strapi度query返黎
講到api query 既話nextjs 有個滿分功能去幫developer
如果對比返react既話寫一些dynamic content既話
一般做法就係用一個叫client rendering既方式
即係user 係server拎左個layout之後會再係client side 去call api
然後update client 果邊既output

而nextjs 就support server side rendering
即係user 去request 時server 果邊已經做埋client sider rendering既動作
user 一拎返黎既資料已經係處理完既
所以對serach engine 會更加friendly
因為一crawl返黎個page已經preload左內容

至於nextjs 入面點做? 十分簡單
係./ 度開一個utils/fetch.tsx

然後係./About/page.tsx
咁樣既話nextjs就會係send 個response俾client之前pre render左個內容先

同步加映client side rendering 點寫
react 既client side rendering 一般就會用到useState同useEffect
又或者再方便既用坊間既library useSWR

去到呢度心水清既朋友就會問咁係咪加重左server負擔呢?
因為本來rendering既動作係分散左係client果邊度做
nextjs 就有係呢方面做cache 既動作啦
即係developer可以set 一個頁面個cache可以last幾耐
幾時先真係會要server去做rendering
從而最大限度utilise 所有resources
而呢樣野點寫留返下一篇真係query api再講

Back to Programming