9月22日水曜日
😎 知るところ
Next.jsのページ表示方式
1. Pre-Rendering
build
時生成next build
毎回作成2. Static Generation
2-1. Without Data
2-2. With Data
request
:ページ内容依存外部データ用getStaticProps
ロ素子から支柱を得ることができるfunction Blog({ posts }) {
// Render posts...
}
// This function gets called at build time
export async function getStaticProps() {
// Call an external API endpoint to get posts
const res = await fetch('https://.../posts')
const posts = await res.json()
// By returning { props: { posts } }, the Blog component
// will receive `posts` as a prop at build time
return {
props: {
posts,
},
}
}
export default Blog
props.posts
:ページパスが外部データに依存する場合に使用(動的ルーティング) // This function gets called at build time
export async function getStaticPaths() {
// Call an external API endpoint to get posts
const res = await fetch('https://.../posts')
const posts = await res.json()
// Get the paths we want to pre-render based on posts
const paths = posts.map((post) => ({
params: { id: post.id },
}))
// We'll pre-render only these paths at build time.
// { fallback: false } means other routes should 404.
return { paths, fallback: false }
}
3. SSR
getStaticPaths
使用function Page({ data }) {
// Render data...
}
// This gets called on every request
export async function getServerSideProps() {
// Fetch data from external API
const res = await fetch(`https://.../data`)
const data = await res.json()
// Pass data to the page via props
return { props: { data } }
}
export default Page
Reference
Reference
この問題について(9月22日水曜日), 我々は、より多くの情報をここで見つけました https://velog.io/@ss20141232/9월-22일-수요일テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol