https://www.youtube.com/watch?v=F77RUjHZEAc&list=PLX8Rsrpnn3IUGEyanrHYGjY1WOzNe7Jd-
https://qiita.com/thesugar/items/01896c1faa8241e6b1bc
Next.jsのチュートリアルをやりながら、Next.jsがどんなものなのかを理解していけたらと思います。
以上のような特徴を持ったReactのフレームワーク。
今回は主にNext.jsのパフォーマンスを効率化する仕組みについて理解していけたらと思います。
とりあえずnpxでNext.jsのプロジェクトを作成します。
npx create-next-app nextjs-blog --use-npm --example "https://github.com/vercel/next-learn-starter/tree/master/navigate-between-pages-starter"
Next.jsでは、pagesディレクトリ内のファイルからエクスポートされたReact Componentがページとなります。
ページは、そのファイル名に基づいてルートに関連付けられます。例えば、開発では、pages/index.jsは、' / 'ルートに関連付けられます。pages/posts/first-post.jsは、' /posts/first-post 'ルートに関連付けられています。
つまりNext.jsでは、pagesというディレクトリの構造がそのままそのページにアクセスする為のurlになるっぽいです。
スゲェでやんすね。
pages/postsに、first-post.jsというファイル( ページ )を作成したので、ここに遷移するためのロジックを作っていきたいと思います。
export default function FirstPost() {
return <h1>First Post</h1>;
}
通常Webサイトのページ間をリンクするときには、<a>というHTMLタグを使いますが、Next.jsでは、next/linkのLink Componentを使って、<a>タグをラップします。<Link>を使うと、クライアントサイドでアプリケーション内の別のページへのナビゲーションを行うことができます。
Linkコンポーネントは、以下のようにaタグをラッピングして使用します。
pages/index.js
<Link href="/posts/first-post"><a>this page!</a></Link>
pages/posts/first-post.jsにもホームに戻って来られるボタンを作成します。
import Link from "next/link";
export default function FirstPost() {
return (
<>
<h1>First Post</h1>
<h2>
<Link href="/">
<a>Back to home</a>
</Link>
</h2>
</>
);
}
爆速で遷移します。
クライアントサイド・ナビゲーションとは、JavaScriptを使ってページの遷移を行うことで、ブラウザが行うデフォルトのナビゲーションよりも高速に行うことができます。
Linkコンポーネントは、同じNext.jsアプリ内の2つのページ間のクライアントサイドナビゲーションを可能にします。
つまり、ユーザーのリクエスト(トップーページ見せて!とか、ニュース一覧見せて!とか )ごとに、それに対応したHTMLをファイルを返すのではなく、
javascriptによってHTMLを書き換えることでページ遷移しているように見せているようです。(クライアントサイドナビゲーション)
Next.jsは自動的にコード分割を行い、各ページはそのページに必要なものだけを読み込むようになっています。つまり、ホームページがレンダリングされるときに、他のページのコードが最初に提供されることはないのです。
これにより、何百ページものページがある場合でも、ホームページの読み込みが速くなります
これは気になっていましたが、画面描画に必要なコードだけを取り込んでくれるんですね。
さらに、本番環境のNext.jsでは、ブラウザのビューポートにリンクコンポーネントが表示されると、Next.jsはバックグラウンドでリンク先のページのコードを自動的にプリフェッチします。ユーザーがリンクをクリックしたときには、リンク先のページのコードはすでにバックグラウンドで読み込まれており、ページの遷移はほぼ瞬時に行われます。
Linkコンポーネント内の要素から必要になるページのコードを予測して、それをあらかじめ裏側で読み込んでおくから、ボタンを押したら瞬時ページ遷移が行われるようです。夢のような機能ですね。
Linkコンポーネントを使わないと該当のページをprefetchingしてくれないようなのでボタンはLinkコンポーネントで作っておくのが吉ですね。
Next.jsで画像ファイルを追加する際は、publicディレクトリ直下に画像ファイルを配置します。
パスはpublicをルートとしたルートパスで記述します。
例えば、publicディレクトリ直下にimgのディレクトリを作成して、その中にLogo.svg(画像ファイル)を配置したならば、以下のような書き方になります。
<img src="/img/logo.svg"/>
Next.jsではHeadタグが用意されており、これをnext/headからインポートすることでメタデータを編集することができるようになります。
ページごとにメタデータを設定するとSEO的にいい感じらしいです。
import Head from 'next/head'
よく使う項目としては以下のような感じです。
<Head>
#サイト/ページタイトル
<title>Create Next App</title>
#CSSやCDNの読み込み
<link rel="icon" href="/favicon.ico" />
<meta description="サイトページの説明(120時程度がOK)"/>
<meta property="SNSシェア時にサイト/ページ情報を表示するOGPタグ"/>
</Head>
tailwindでしょ。
Pre-renderingとは、事前にHTMLを生成することです。Next.jsはデフォルトで全ページをPre-renderしています。
通常のReactアプリケーション(create-react-appで作ったようなアプリケーション)はクライアントサイドレンダリングという方式になっています。
これは、ユーザーがwebページにアクセスして、今まさにwebページを表示しようとしているときに、ブラウザ側でHTMLを組み立てるという方式です。
対してPre-renderingは、ユーザーがwebページにアクセスする以前にHTMLを組み立ておく方式のことです。
なので結果的にブラウザの負荷を下げることに繋がり、表示を高速化することができるます。
この方式だと検索エンジンのクローラーにコンテンツを見せられるので、SEO的にも良いとされています。
クローラーとは、検索エンジンが検索の順位を決めるための要素を、サイトから収集してくるロボットのこと
クローラーはそのサイトが現在データーの読み込みをしているしていないにかかわらず、画面のキャプチャみたいなの撮って判断するので、読み込みが遅いサイトだとコンテンツが何もないと判断されてSEO的に良くなかったりするみたいです。
Next.jsniには、Static Generation と Server-side Renderingという2種類のPre-renderingが用意されています。
両者の違いは、HTMLファイルを生成するタイミングです。
・Static Generationは、ビルドした段階でHTMLを生成
・Server-side Renderingは、ユーザーがサイトにアクセスした時々で毎回HTMLを生成
Next.jsでは、この両者の方式をページごとに選択することができます。
基本的には、Static Generationを使用することが推奨されています。
なぜならこの方式が最も表示速度が速くSEO的にも良いからです。
最適なページは、更新頻度が低いページです。具体的には以下のようなページです。
・ブログ
・ECサイト
・LP
・お問い合わせ
更新頻度が高いページを作成するときは、Server-Side Renderingが最適です。
なぜなら、ユーザーがアクセスする度に毎回最新のHTMLファイルが生成されるからです。
表示速度はStatic Generationの方が早いですが、ユーザーが常に最新の情報が見れるのはServer-side Renderingです。
具体的には以下のようなページです。
・SNS
・チャット
・動画配信
おまけ的にですが、クライアントサイドレンダリング(JavaScriptによってクライアントサイドでHTMLを書き換えていく方式)だと、SEO的にあまり良くないみたいです。なぜならこの方式は、Static GenerationやServer-Side RenderingのようにサーバーサイドでHTMLを構成するのではなく、クライアントサイドでHTMLを構成していくからです。クローラーにコンテンツを見せることができないので、コンテンツの少ないページであると判断されてしまいます。
create-react-appで作ったサイトは最初だけHTMLファイルが返されますが、それ以降はJavaScriptによるクライアントサイトレンダリングを行うので、差分描画によって高速には動作しますが、コンテンツが少ないとみなされ、SEO的にはあまりよろしくないということです。
Static Generationは以下静的ジェネレーションと略します。
静的ジェネレーションは、外部データが有るか無いかによって挙動が変わってきます。
ビルド時にレンダリングを行います。
ビルド時にDBや外部APIからデータを取得してきて、その取得してきたデータを使用して、HTMLをレンダリングします。
このときに「getStaticProps()」を使用します。
getStaticPropsの特徴
本番環境でビルド時ではなくリクエストごとにデータを持ってきたい場合は、getServerSidePropsを使用する。
getServerSidePropsの特徴
内容が頻繁に変更されるデータはリクエストごとにデータが更新された方が良いので、そのようなときは、getStaticPropsではなく、getServersSidePropsを使用する。
今回は主にNext.jsのパフォーマンスを効率化する仕組みについて学習していきました。
理解を深めるために簡単にまとめていきたいと思います。
以上がNext.jsのパフォーマンスを効率化する仕組みです。
まぁなんとなくいい感じにわかったと思います。
最後までご覧いただきありがとうございました!