next.js - SSR
SSR, server side rendering.
CSR vs SSR vs SSG
getServerSideProps
getServerSideProps重點整理
getServerSideProps重點整理程式碼紀錄
沒圖沒真象
Last updated
SSR, server side rendering.
getServerSideProps重點整理Last updated
import type { NextPage } from 'next'
import type { Commodity } from './interfaces'
import Head from 'next/head'
import AppForm from './AppForm'
import { qryCommodityList } from './bizLogic'
const DM0010Page: NextPage<{
commodityList: Commodity[] // 商品目錄將從 props 送進來。
}> = (props) => {
return (
<>
<Head>
<title>DM0010</title>
<link rel="icon" href="/favicon.ico" />
</Head>
{/* 將商品目錄往子層送進去 */}
<AppForm {...props} />
</>
)
}
export default DM0010Page
/// SSR with dynamic parameters
/// 此函式只在 page 進入點有效。
export async function getServerSideProps(context) {
// 解析URL Query參數：http://localhost:3000/demo/dm0010?category=運動
const { query: { category } } = context
// 查詢商品目錄
const commodityList = qryCommodityList(category)
// 商品目錄將從 props 送進去。
return {
props: {
commodityList
}
}
}import type { Commodity } from './interfaces'
import { useState } from 'react'
import { qryCommodityList } from './bizLogic'
export default (props: {
commodityList: Commodity[] // 初始商品目錄將從props送進來。
}) => {
// 初始商品目錄來自SSR模式，從props送進來。
const [commodityList, setCommodityList] = useState<Commodity[]>(props.commodityList)
// 之後操作查詢商品目錄來自CSR模式。
function handleQuery() {
const commodityList = qryCommodityList('other')
setCommodityList(commodityList)
}
return (
<div>
<h1>DM0010: SSR 練習</h1>
<button onClick={handleQuery}>查詢</button>
<h2>模擬商品清單</h2>
<ul>
{Array.isArray(commodityList) && commodityList.map((item, index) => (
<li key={index}>
{`${item.cid}-${item.cname} 數量 ${item.amount} | ${item.category}`}
</li>
))}
</ul>
</div>
)
}
import type { Commodity } from './interfaces'
import db from './db.json'
/// 模擬自DB主機取值
export function qryCommodityList(category: string): Commodity[] {
return db.commodityList.filter(c => !category || c.category === category)
}texport interface Commodity {
cid: string,
cname: string,
amount: number,
category: string,
}// 模擬商品目錄
{"commodityList":[
{"cid":"C00","cname":"商品0號","category":"運動","amount":1000},
{"cid":"C01","cname":"商品1號","category":"運動","amount":17},
{"cid":"C02","cname":"商品2號","category":"文書","amount":21},
{"cid":"C03","cname":"商品3號","category":"文書","amount":390},
{"cid":"C04","cname":"商品4號","category":"文書","amount":434},
{"cid":"C05","cname":"商品5號","category":"文書","amount":5},
{"cid":"C06","cname":"商品6號","category":"文書","amount":6},
{"cid":"C07","cname":"商品7號","category":"運動","amount":7},
{"cid":"C08","cname":"商品8號","category":"other","amount":87},
{"cid":"C09","cname":"商品9號","category":"運動","amount":93},
{"cid":"C10","cname":"商品10號","category":"運動","amount":102}
]}