React Nativeを触っていたらWebの方も触りたくなってきた。
これまでCreate React Appを使っていましたが、SSR（Server Side Rendering）したかったのでNext.jsを使ってみます。
キャッシュ設定もしたかったのでExpress併用も考えます。
なんでサイバーサイドレンダリングしたいか
Reactでサイトを作るときの基本はSPA（Single Page Application）だと思います。
静的ファイルにするメリットは少ないし、SSRは上級者向けっぽい雰囲気があるし、なによりCerate React Appで簡単に作れる。
SPAのいくつかある問題点の根本的な原因として、最初のアクセスで得られるファイルが多数のjsファイルを読み込んでいる空HTMLだという部分があります。
SEOは考慮されるようですがメタタグ（ogpやツイッターカード設定など）を動的に設定しようとしてもクローラーはjsを実行しないため特別な処理※1が必要になります。
※1：SSRでの埋め込みやUserAgentごとにファイルの配信切り替えなど
React in Express
SSRだけなら適当なWEBサーバでレンダリングすればいい気もする。
javascript（node.js）の web framework ならとりあえず Express。
テンプレートエンジンによって動的にHTMLファイルを提供できる。
Wikiのエンジン一覧見てみるとReactがあります。
view engineにexpress-react-viewsを設定することでjsxレンダリングが可能。
ただこれはReactをレンダリングして静的ファイルとして返すため、React機能の大半が使えない点は注意が必要です。propsとrender()だけ使えるReactみたいな感覚。
Reactもちゃんと使いたいのでこれはやめておきます。
Next.js
nowというPaaSでお世話になったzeitの提供するReactフレームワークです。
１から作っても簡単ですが、専用のコマンドが用意されているので使います。
|
1 2 3 4 5 |
npx create-next-app project-name # npxがない場合はnpmをアップデートするかグローバルインスト―ルする npm i -g create-next-app create-next-app project-name |
プロジェクトフォルダに移動してnpm run dev|build|startで動きます。
静的ファイル書き出しはデフォルトにないので必要ならnext exportを追加します。
Routerの設定をしなくてもpagesフォルダの階層に合わせてルーティングされるのは非常に便利です。
next.jsを使う理由として static async getInitialProps() が大きいです。
前にやった非同期処理の結果を初期値にするというのも簡単にできます。
Next with Express
Nextはv9になるまでDynamic Routing（/xxx/:idのようなパスによるクエリ）が使えなかった。
パスクエリも含めて色々と簡単に設定できるようにExpressを併用できます。
この辺はExpressに関数next()があるため少し検索しにくい(nowほどじゃないけど)。
またNext単体でもキャッシュの設定ができますが開発限定なので、Expressを使ったサンプルを見て併用してみるのがいいと思います。
せっかく自動でダイナミックルーティングできるのにキャッシュ設定するとExpressで設定しないといけないのは残念ですが、そこまで手間にはならないです。