【React】管理画面を作りながらReactを学ぶ(ビルド)

まえがき

シリーズ形式の記事となります。今回は３つめ。
1. 【React】管理画面を作りながらReactを学ぶ(ChakraUI/コンポーネント化/react rooter v6)
2. 【React】管理画面を作りながらReactを学ぶ(props/ライフサイクル関数/API呼び出し)
3. 【React】管理画面を作りながらReactを学ぶ(ビルド)

3つのビルド方法

1. 素の「npm run build」(CSR)
2. Next.jsでビルド(CSRとSSRとSSG)
3. Gatsby.jsでビルド(SSG)

ビルド方法1：素の「npm run build」(CSR)

・ビルド結果をWEBサーバ上でホスティングする。
　... ビルド実行時のログにある通り。You may serve it with a static server:

ビルドしてみる

C:\Users\daisu\Desktop\workspace\chakra-react-practice>yarn build
yarn run v1.22.5
$ react-scripts build
Creating an optimized production build...
Compiled successfully.

File sizes after gzip:

  104.36 kB  build\static\js\main.d178c20b.js
  1.44 kB    build\static\js\377.c839c0c5.chunk.js

The project was built assuming it is hosted at /.
You can control this with the homepage field in your package.json.

The build folder is ready to be deployed.
You may serve it with a static server:

  yarn global add serve
  serve -s build

Find out more about deployment here:

  https://cra.link/deployment

Done in 68.40s

ビルド結果の中身

・ビルド結果はbuildフォルダに出力される。
・中身の構成としては
　- index.html
　- index.htmlをいじって画面生成するためのstatic/js配下のjsファイル
　- data配下 ... HTTPリクエストで取得できる静的ファイル
・SPAという名の通り「１つのページ/index.html(Single Page)」を元に画面を構築していく。

WEBサーバにホスティングしてみる

・http-serverで簡易WEBサーバをたてる

cd build/
npx http-server

C:\Users\daisu\Desktop\workspace\chakra-react-practice\build>npx http-server
Need to install the following packages:
  http-server
Ok to proceed? (y)
Starting up http-server, serving ./

http-server settings:
CORS: disabled
Cache: 3600 seconds
Connection Timeout: 120 seconds
Directory Listings: visible
AutoIndex: visible
Serve GZIP Files: false
Serve Brotli Files: false
Default File Extension: none

Available on:
  http://192.168.11.4:8080
  http://127.0.0.1:8080
  http://172.27.208.1:8080
Hit CTRL-C to stop the server

・http://localhost:8080 で公開されているのでアクセス

ビルド方法2：Next.jsでビルド

・Next.jsはReactのフレームワークの1つ。
・Next.jsが行うビルドの特徴について、公式の説明が分かりやすかった。

By default, Next.js pre-renders every page. 
This means that Next.js generates HTML for each page in advance, instead of having it all done by client-side JavaScript. 
Pre-rendering can result in better performance and SEO.

Next.js has two forms of pre-rendering: Static Generation and Server-side Rendering.
 The difference is in when it generates the HTML for a page.

Static Generation (Recommended)
: The HTML is generated at build time and will be reused on each request.

Server-side Rendering
: The HTML is generated on each request.

・Next.jsはデフォルトのビルド方法として、各ページをプリレンダリングする。
・プリレンダリングとは、ビルド時にレンダリングしてHTMLファイルを先に生成しておくことである。
・HTMLファイルを先に生成しておくことで、SEOの最適化に繋がる。
　- Not Pre-render：ブラウザでレンダリングされる想定の雛型index.htmlは、SEO対策的に×
　- Yes Pre-render：プリレンダリングで既に完成されたHTMLファイルは、SEO対策的に〇

・Next.jsは、プリレンダリングの手段として①Static Generation(SSG)と②Server-side Rendering(SSR) の２つを提供している。
　　① Static Generation
　　・ビルド時にHTMLファイルを生成する
　　・HTTPリクエストの度に同じHTMLファイルを返す。
　　② Server-side Rendering
　　・HTTPリクエスト時にHTMLファイルを生成する。
　　・HTTPリクエストの度にサーバ側でHTMLファイルを生成して返す
　　　→ 同じような結果を毎回生成するのはもったいないのでキャッシュサーバを経由するのが〇

・プリレンダリングの手段としてSSGとSSRを提供しているだけで、CSRも利用できる。
・「ページ単位」で、プリレンダリングの方法を適用することができる。

Static Generation(SSG)とServer-side Rendering(SSR) どっち使えばいいの？

・公式さんはパフォーマンス的により良いStatic Generationの利用を推奨している。
・CDNでキャッシュする場合に、生成されるファイルが変化するSSRに対して、SSGはビルド時に生成済みのファイルを常に返し続けるので、こちらの方がキャッシュ管理しやすい👍

We recommend using Static Generation over Server-side Rendering for performance reasons.
Statically generated pages can be cached by CDN with no extra configuration to boost performance. 
However, in some cases, Server-side Rendering might be the only option.

別記事でNext.jsプロジェクト作成＆ビルドを行う。

ビルド方法3：Gatsby.jsでビルド

CSR/SSR/SSGの３つの方法でビルドできるNext.jsに対して、Gatsby.jsは「SSG」のみ対応している。

Next.jsとGatsby.jsどっち使うの問題については、ぐぐると色んな記事がでてくるが
↓の記事の内容が一番しっくりきた。

まとめるとNext.jsの方がコード書きやすいけどGatsby.jsの方がパフォーマンスは出しやすい。みたいな感じになると思います。
しかし、そもそもNext.jsは静的サイトジェネレーターではないので、サービスを作るならNext.js、静的なサイトでいいならGatsby.jsを使うのがベストだと思います。