Next.js の Dynamic Import

react

要するに、lazy loading みたいに、あとから読み込む機能らしいです。

ページの初期表示速度を早くできるようです。

あと window.document とか window.alert とかブラウザに関するオブジェクトに SSR 中にアクセスしないようにするために使うとか。

動的インポート
https://nextjs-ja-translation-docs.vercel.app/docs/advanced-features/dynamic-import

Dynamic Import
https://nextjs.org/docs/advanced-features/dynamic-import

Next.jsでのDynamic Importの使い所
https://tech.012grp.co.jp/entry/next_dynamicImport

SSR

SSR(サーバーサイドレンダリング)

Next.js 9.3で以下の3つのAPIが追加されました。

・getStaticProps – SSG用
・getStaticPaths – SSG用(Dynamic Routes使用時)
・getServerSideProps – SSR用

とりあえず getServerSideProps を使えば良さそうです。

Next.js 9.3新API getStaticProps と getStaticPaths と getServerSideProps の概要解説
https://qiita.com/matamatanot/items/1735984f40540b8bdf91%E3%80%80

RailsエンジニアのためのNext.js入門 – 20211023
https://hokaccha.hatenablog.com/entry/2021/10/23/135532

SSRはおまいらには早すぎた 〜Next.jsのgetServerSidePropsの登場が何を意味するか〜 – 2020年11月14日
https://qiita.com/ryokkkke/items/1bd858a5d6f261a9342a

Next.jsにおけるSSG(静的サイト生成)とISRについて(自分の)限界まで丁寧に説明する – 2020年11月14日
https://qiita.com/thesugar/items/47ec3d243d00ddd0b4ed

Next.jsでリダイレクトを行う方法をまとめてみた – 2021.10.11
https://zenn.dev/uttk/articles/4649e49f1e6628

getServerSideProps – next.js
https://nextjs.org/docs/basic-features/data-fetching/get-server-side-props

getStaticProps – next.js
https://nextjs.org/docs/basic-features/data-fetching/get-static-props

Redirects – next.js
https://nextjs.org/docs/api-reference/next.config.js/redirects

Next.jsのgetServerSidePropsでリダイレクトをする – 2020.9.3
https://www.yuyagishita.com/tech/javascript/nextjs-getserversideprops-redirect

Next.jsのgetServerSidePropsでJWT認証処理を行う – 2021年9月6日
https://qiita.com/uttk/items/1887c14bcfa3a695862b

Next.jsとFirebaseでCookieを使った認証処理を実装する – 2021.10.11
https://zenn.dev/uttk/articles/f48fc75120f018

Server Side Renderingについて知るべきこと。Server Side Renderingとは何か? – 2017年6月19日
https://www.publickey1.jp/blog/17/server_side_renderingserver_side_rendering_ng-japan_2017.html

コメント

タイトルとURLをコピーしました