Data Fetching
i18n
Nov 2021
Data fetching
`getStaticProps`
`getStaticPaths`
`getServerSideProps`
`getInitialProps` ⚠️
props during build time
paths for dynamic routes
props for each request
getServerSideProps
Client-side navigation
makes one fetch request to retrieve `props`
only runs on the server
Server Request
returns the necessary `props` so the page re-renders
getStaticProps
Seriealized data
generates a JSON with the result for client-side navigation
only runs on build
revalidate
when provided, page will rebuild without needing to deploy everything again
getStaticPaths
Dynamic routes
page components for non-predefined paths
e.g.: `[slug].tsx`
for dynamic routes
fallback
false: unmatched route returns `404`
blocking: will SSR unmatched paths on-demand
true: serves fallback version for unmatched paths
Static Paths combo
`getStaticPaths` returns a list of paths and calls `getStaticProps`
needs to use getStaticProps
Rendering Strategies
SSPR
Server-Side Pre-Rendered
export const Post = ({ title, content }) => (
<main>
<h1>{post.title}</h1>
<article>{content}</article>
</main>
)
export async function getStaticProps(context) {
const res = await getPost('post-slug')
const { title, content } = await res.json()
return {
props: {
title,
content
},
}
}ISR
Incrementally Statically Regenerated
export const Post = ({ title, content }) => (
<main>
<h1>{post.title}</h1>
<article>{content}</article>
</main>
)
export async function getStaticProps(context) {
const res = await getPost('post-slug')
const { title, content } = await res.json()
return {
props: {
title,
content
},
revalidate: 6 * 60 // time in seconds
}
}SSR
Server-Side Rendered
export const Post = ({ title, content }) => (
<main>
<h1>{post.title}</h1>
<article>{content}</article>
</main>
)
export async function getServerSideProps(context) {
const res = await getPost('post-slug')
const { title, content } = await res.json()
return {
props: {
title,
content
},
}
}Dynamic routes
export async function getStaticProps(context) {
const res = await getPostInfo(context.params.id)
const { title, content } = await res.json()
return {
props: {
title,
content
},
}
}
export async function getStaticPaths() {
const postPaths = await getAllPostsFromDir(path.join(process.cwd, 'posts'))
return {
paths: postPaths,
fallback: false
}
}Lazy-Rendering
