Upgrade to Pro — share decks privately, control downloads, hide ads and more …

選ばれたのは Next.jsでした - Next.jsによるServer Side OGP ⽣成 / Next.js was chosen - Server Side OGP generation with Next.js

選ばれたのは Next.jsでした - Next.jsによるServer Side OGP ⽣成 / Next.js was chosen - Server Side OGP generation with Next.js

isoken26 (LINE株式会社)
UIT meetup vol.11『フロントエンド紅白LT合戦』での発表資料です
https://uit.connpass.com/event/197740/

LINE Developers

December 18, 2020
Tweet

More Decks by LINE Developers

Other Decks in Technology

Transcript

  1. 選ばれたのは
    Next.jsでした
    Isomura Kenjiro
    2020.12.18
    UIT meetup vol.11 「フロントエンド紅⽩LT合戦」
    〜 Next.jsによるServer Side OGP ⽣成 〜

    View full-size slide

  2. ۀ຿
    ࣾ಺޻਺؅ཧγεςϜ
    ϑϩϯτΤϯυ։ൃ
    +4ϓϩδΣΫτͷ54Խ
    &&ςετ؀ڥͷߏங
    会社:LINE Growth Technology 株式会社
    所属:開発室 / UITチーム(GT)
    -*/&%&7&-01&3%":
    ϑϩϯτΤϯυ։ൃ
    役職:フロントエンドエンジニア
    名前:Isomura Kenjiro
    好きな技術:TypeScript, React
    @isoken26

    View full-size slide

  3. -*/&%&7&-01&3%":ͱ͸
    • LINEが11⽉25⽇〜27⽇の3⽇間に渡って開催したオンライン技術カンファレンス
    • 9900+ Registered
    • 150+Sessions
    • 200+Speakers

    View full-size slide

  4. -*/&%&7%":Ͱ͸ηογϣϯຖʹ0(1ͷੜ੒Λߦ͍ͬͯͨ

    View full-size slide

  5. 150+セッション x (ja + en)
    300+パーターン対応
    -*/&%&7%":Ͱ͸ηογϣϯຖʹ0(1ͷੜ੒Λߦ͍ͬͯͨ

    View full-size slide

  6. 0(1Λಈతʹੜ੒͍ͯͨ͠
    なぜこれほど多くのパターンに対応できたか

    View full-size slide

  7. 0(1ͷಈతੜ੒ͱ͸
    0(1ͷಈతੜ੒
    • OGPの画像とかをページ毎に切り替えたい
    • OGP画像の動的⾃動⽣成

    View full-size slide

  8. 0(1ͷಈతੜ੒ͱ͸
    0(1ͷಈతੜ੒
    • OGPの画像とかをページ毎に切り替える
    https://example.com/items/1 https:// example.com/items/2
    https ://example.com https://example.com
    EXAMPLE SHOP
    EXAMPLE EXAMPLE EXAMPLE EXAMPLE
    EXAMPLE EXAMPLE EXAMPLE EXAMPLE
    EXAMPLE SHOP
    EXAMPLE EXAMPLE EXAMPLE EXAMPLE
    EXAMPLE EXAMPLE EXAMPLE EXAMPLE

    View full-size slide

  9. Ͳ͏΍ͬͯ΍Δͷ͔
    0(1ͷಈతੜ੒

    View full-size slide

  10. /FYUKTͷ443
    ʢ͋Εɺ44(͸ɻɻɻʣ
    0(1ͷಈతੜ੒

    View full-size slide

  11. https://expamle.com/item/3
    https://expamle.com/item/2
    https://expamle.com/item/1
    0(1ͷදࣔͷ࢓૊Έ͓͞Β͍
    • サーバ側へリクエストが⾏った時にOGP⽤のタグを含む
    htmlが⽣成されている状態
    0(1ͷಈతੜ੒
    OGP対応しているアプリ
    ②URLクロール
    ③response
    https://expamle.com/item/3
    https ://example.com
    EXAMPLE SHOP
    EXAMPLE EXAMPLE
    EXAMPLE EXAMPLE
    https://expamle.com/item/2
    https ://example.com
    EXAMPLE SHOP
    EXAMPLE EXAMPLE
    EXAMPLE EXAMPLE
    https://expamle.com/item/1
    https ://example.com
    EXAMPLE SHOP
    EXAMPLE EXAMPLE
    EXAMPLE EXAMPLE
    ①URLが⼊⼒される
    ④OGPカードの⽣成

    View full-size slide

  12. ಈత0(1ͷੜ੒
    /FYUKTʹ͓͚Δ44( 443ͷ࣮૷

    View full-size slide

  13. /FYUKTʹ͓͚Δ44( 443
    ಈత0(1ͷੜ੒
    • Next.jsではFile-System Routing
    • pagesディクトリ配下の構成(file名など)に基づいてroutingが構成
    前提知識として
    • 各ページのdefault exportされているReactコンポネントがページコンポネントとして
    renderingされる
    // pages/users/index.tsx
    const Users = () => {
    return (
    Users
    )
    }
    export default Users

    View full-size slide

  14. 44(͢Δʹ͸
    ಈత0(1ͷੜ੒
    そのままでいい

    View full-size slide

  15. 44(͢Δʹ͸
    ಈత0(1ͷੜ੒
    Next.jsはデフォルトでpages配下のページコンポネントをSSGによってpre-renderingします。

    View full-size slide

  16. // pages/users/index.tsx
    export default function Users({ users }) {
    return (

    {users.map((user) => (
    {user.name}
    ))}

    )
    }
    // SSG with Data
    export const getStaticProps = async () => {
    const res = await fetch('/users’)
    const users = await res.json()
    return {
    props: {
    users,
    },
    }
    }
    σʔλ෇͖ͷ44(
    ಈత0(1ͷੜ੒
    • getStaticPropsという⾮同期関数をexportすること
    でデータをpropsに紐づけてbuildすることも
    • getStaticPropsはサーバーサイドでのみ実⾏され
    • getStaticPropsはブラウザからアクセスできない
    • getStaticPropsはビルド時のみ実⾏される

    View full-size slide

  17. 44(ͷܽ఺
    ಈత0(1ͷੜ੒
    • ビルド時のみにデータの取得を⾏うため、頻繁に変化のある
    データには向かない
    SSRという選択肢
    LINE DEV DAYもデータが頻繁に更新される可能性があったため
    SSGは要件に合わなかった。。

    View full-size slide

  18. 443͢Δʹ͸
    ಈత0(1ͷੜ੒
    getStaticProps
    getServerSideProps
    リクエストごとに実⾏される
    ビルド時に実⾏される
    // pages/users/index.tsx
    export default function Users({ users }) {
    return (

    {users.map((user) => (
    {user.name}
    ))}

    )
    }
    // export const getStaticProps = async () => {
    export const getServerSideProps = async () => {
    const res = await fetch('/users’)
    const users = await res.json()
    return {
    props: {
    users,
    },
    }
    }

    View full-size slide

  19. 0QUJPOBMͳ࿩
    ಈత0(1ͷੜ੒
    getStaticPropsとgetServerSidePropsが宣⾔的に定義できる
    Next.jsではpage毎にCode Splittingが⾏われている
    要件やシチュエーションによってSSG, SSRを完全に使い分ける事ができる
    Hybridなアプリケーションの構築が可能

    View full-size slide

  20. 443Ͱ0(1Λಈతʹੜ੒͢Δ
    ಈత0(1ͷੜ੒

    View full-size slide

  21. 443Ͱ0(1Λಈతʹੜ੒͢Δ
    ಈత0(1ͷੜ੒
    セッション詳細画⾯のrouting
    pages/sessions/[id].tsx
    /pages/sessions/0000
    /pages/sessions/2222
    /pages/sessions/1111
    [id].tsx
    以下のようなroutingが可能になる
    (Dynamic Routes)

    View full-size slide

  22. 443Ͱ0(1Λಈతʹੜ੒͢Δ
    ಈత0(1ͷੜ੒
    getServerSidePropsの実装
    export async const getServerSideProps = (context) => {
    // id === "0000"
    const { id } = context.query
    const res = await fetch(`/sessions/${id}`)
    const session = await res.json()
    return { props: { session }}
    }
    ①context.queryから[id]にあたるidを取得
    ②idを元にセッションの詳細情報を取得
    ②取得したセッション詳細情報をページコンポネントにpropsとして渡す

    View full-size slide

  23. 443Ͱ0(1Λಈతʹੜ੒͢Δ
    ಈత0(1ͷੜ੒
    ページコンポネントSessionの実装
    ①渡されたsession詳細データからogpImageUrlを`og:imageにセットする`
    ②渡されたsession詳細データからogpUrlを`og:url`にセットする
    ②データが紐付いたらDOMをrenderingする
    // pages/sessions/[id].tsx
    cosnt Session = ({ session }) => (






    )
    ApplicationLayoutというラッパーコ
    ンポネントを省略している

    View full-size slide

  24. 443Ͱ0(1Λಈతʹੜ੒͢Δ
    ಈత0(1ͷੜ੒
    // pages/sessions/[id].tsx
    cosnt Session = ({ session }) => (





    )
    export async const getServerSideProps = (context) => {
    // id === "0000"
    const { id } = context.query
    const res = await fetch(`/sessions/${id}`)
    const session = await res.json()
    return { props: { session }}
    }
    export default Session;
    全体

    View full-size slide

  25. ·ͱΊ
    Next.jsではSSGやSSRをとても簡単に実装できるためOGPの動
    的⽣成も簡単にできる
    なんでもかんでもSSGすればいいのではなくてシチュエーショ
    ン、要件によってSSR,SSGを使い分けると良さそう
    ISR(Incremental Static Regeneration)など今回は触れなかった
    Next.jsの魅⼒的な機能がまだまだあるので今までNext.jsやっ
    たことない⼈の興味を持つきっかけになれたら嬉しいです。

    View full-size slide