NextJS

Difference between

getStaticProps

and

getServerSideProps

The main difference between them is when they are ran.

getServerSideProps is ran when every new request is made to the page.

export const getServerSideProps = async (context) => {
    const {postId} = context.params
    const post = await getPosts(postId)

    return {
        props: {
           post
        }
    }

}

export const Post = ({ post }) => {
    return (
        <div>
            <h1>{post.title}</h1>
        </div>
    )
}

getStaticProps is ran at build time.

export const getStaticProps = async () => {
    const blogPosts = await getBlogPosts()

    return {
        props: {
            blogPosts
        }
    }
}

export const Home = ({ blogPosts }) => {
    return (
        <div>
            {blogPosts.map(post => (
                <h1>{post.name}</h1>
            ))}
        </div>
    )
}