xxxxxxxxxx
import type { InferGetServerSidePropsType, GetServerSideProps } from 'next'
type Repo = {
name: string
stargazers_count: number
}
export const getServerSideProps: GetServerSideProps<{
repo: Repo
}> = async () => {
const res = await fetch('https://api.github.com/repos/vercel/next.js')
const repo = await res.json()
return { props: { repo } }
}
export default function Page({
repo,
}: InferGetServerSidePropsType<typeof getServerSideProps>) {
return repo.stargazers_count
}
xxxxxxxxxx
import { GetStaticProps, GetStaticPaths, GetServerSideProps } from 'next'
export const getStaticProps: GetStaticProps = async (context) => {
// ...
}
export const getStaticPaths: GetStaticPaths = async () => {
// ...
}
export const getServerSideProps: GetServerSideProps = async (context) => {
// ...
}
xxxxxxxxxx
export async function getServerSideProps(context) {
return {
props: {}, // will be passed to the page component as props
}
}
xxxxxxxxxx
use getServersideProps when data will change after time like wordpress post
which will be changing when new we add new post.
Use getStaticProps when it is static content using it make it cache in.nextjs
so it will load fast.
//Note if you use getStaticProps in dynamic content section then content which
//is added after deployment will not shown cause it also shown content from cache.
xxxxxxxxxx
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
xxxxxxxxxx
export async function getStaticPaths() {
const res = await fetch(`${baseUrl}/wp-json/wp/v2/posts`)
const posts = await res.json()
//paths is array of objects which is contains one params property with id or slug
const paths = posts.map(({ slug }) => ({ params: { slug: `${slug}` } }))
return {
paths,
//fallback true mean there is no slug in build time then it will not shown 404 error
// and fetch data from server and show it
fallback: true,
}
}