Next.js でサーバー側レンダリングと静的生成を使用する場合

ページの事前レンダリングには、パフォーマンスの向上や SEO の向上など、複数のメリットがあります.しかし、ページを静的に生成するか、サーバー側でレンダリングするかの選択は、混乱を招く可能性があります.

まず、サーバー側のレンダリングを見てみましょう

getServerSideProps

getServerSideProps と getStaticProps の主な違いは、いつ実行されるかです. getServerSideProps は、ページに対して新しいリクエストが行われるたびに実行されます.

export async function getServerSideProps(context) {
    const {userId} = context.params
    const user = await getUser(userId)

    return {
        props: {
           user
        }
    }

}

export default function User({user}) {
    return (
        <div>
            <h1>{user.name}</h1>
        </div>
    )
}

この例では、 dynamic route から userId を取得し、ユーザーに関する情報を取得してから、そのデータを使用してユーザー ページを作成しています.

パラメータを介してリクエストにアクセスできることに注意してください

getStaticProps を見てみましょう

getStaticProps

新しいリクエストが行われるたびに getServerSideProps が実行されることがわかったので、getStaticProps はどうでしょうか. getStaticProps はビルド時に実行されます.つまり、npm run build を実行すると、静的ページがビルドされます.

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

    return {
        props: {
            blogPosts
        }
    }
}

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

この関数は、ブログ投稿のリストを取得し、それらをページにレンダリングしています.私たちは事前に何を望んでいるかを知っているので、ページを静的にレンダリングできますが、サーバー側のレンダリングの例では、ユーザーが何を望んでいるかはリクエストが行われる前にはわかりません.


では、いつ getServerSideProps を使用するのでしょうか?

ユーザーが要求を行う前に、ユーザーが何を望んでいるかがわからない場合に適しています

それでも良い SEO が欲しい

getStaticProps をいつ使用するか?

ビルド時にユーザーが何を望んでいるかがわかっている場合

本当に高速なパフォーマンスと SEO

これは、静的な生成とサーバー側の生成を簡単に説明しただけです.詳細を知りたい場合は、お知らせください.

いつも読んでいただきありがとうございます.