Help us understand the problem. What is going on with this article?

Next.jsをつかってSPAをSSRしてみた感想

こちらは Next.js Advent Calendar 2019 3日目の記事です。


ReactのSPAをNext.jsでSSRしてみて気づいたことをまとめてみました。

まだNext.jsやNuxt.jsでSSRやったことない人や、これからやろうか検討している人への情報共有的位置づけです。

目次

  • SPAをSSRするとは?
  • どのような構成になったか?
  • どのような実装をおこなったか?
  • SPAをSSRしてどうなったか?
  • 気づいたこと
  • まとめ

SPAをSSRするとは?

SPAの弱点である初回アクセス時の読み込み時間を短縮するために、サーバサイドでレンダリングを行いブラウザ上に素早く画面を表示させる手法。
初回表示後の画面遷移やアクションは通常のSPAと同じように機能する。

クライアントにおける初回表示のフローは、通常のSPAとSSRした場合とで以下のようになる。

通常のSPA

  1. サーバからバンドルされたJSファイルを取得
  2. Reactコンポーネントの初期化
  3. ローディング表示
  4. APIリクエスト&レスポンス
  5. 表示

SSRした場合

  1. サーバからデータが挿入されたDOMとバンドルされたJSファイルを取得
  2. 表示 (裏側で初期化がはしる)

通常のSPAではバンドルファイル取得後に順を追って初期化していくが、SSRすると取得したものをそのまま表示できるので、SPAなのにパッと画面が表示される。

どのような構成になったか?

通常のSPAではバンドルJSファイルをS3やFirebaseHostingなんかに置いてサーバレス構成にもできたが、SSRを行う場合はNode.jsのWebサーバをたてることになる。自分の場合は以下のような感じ。

  • Next.jsで実装したアプリをExpressと組み合わせてWebサーバを構築
  • GAEとかGKEのコンテナ上でサーバを立ち上げる
  • サーバのルーティングもクライアントのルーティングもNext.jsが内部でやってくれる

どのような実装を行ったか?

基本的にNext.jsの作法に乗っかっていく感じ。公式リポジトリのexamplesがかなり充実しているので、主なケースは参考にしつつ実装できる。

ReactアプリをSSRする場合は具体的に以下のような改修を行っていく。

  • componentDidMountやuseEffect(マウント時)で宣言していた処理をgetInitialPropsという関数で宣言する
  • クライアントとサーバで違う処理を行う必要があるときはpropsのisServerを参照して処理を分ける
  • Next.jsのルーティングシステムに合わせた構造にする(pagesディレクトリ配下にコンポーネント整備)
  • サーバサイドからのAPIリクエストに使用する認証token(Cookie)をreqから取得する
  • サーバにはwindowやdocumentがないので、ライブラリの初期化等で必要な場合は動的インポートを使用してSSRをエスケープする
  • などなど……

SPAをSSRしてどうなったか?

初回表示がかなり速くなり、思わず「おおおぉ〜」と声がでた。

  • ロード完了まで5秒ほどかかっていた画面が、1秒かからなくなった
  • APIアクセスもサーバ同士なのでなんか速そう
  • Next.jsのコード分割 & 動的インポートの機能をさらに活用していけばもっと速くなりそう

気づいたこと

通常のSPAでは(サーバレス構成にすれば特に)Webサーバについて気にする必要がなかったので、フロントエンドパワーがあればそれだけで完結する話が多かったように思う。

SSR構成にすればサーバ内の処理やリソースについても思いを巡らせる必要があるので、難易度も必要な工数も増すが、ある程度SPA開発に慣れていてサーバサイドに対しても明るいエンジニアであれば楽しんでいける領域だと思う。

Next.jsはSSRだけでなく静的ジェネレートやAMP、PWAについてもサポートしているので、Webアプリの理想郷を追求していける面白いフレームワークだと思う。

まとめ

  • SSRはやっぱり速かった
  • フレームワークの恩恵により、実装は意外と簡単だった
  • サーバサイドをいかに攻略していけるかがポイント
  • 技術力さえあれば最高のWebアプリケーションが作れると思う!

以上です。ここまで読んでいただき、ありがとうございました。


2019年のアドベントカレンダーは3つ参加してます。よかったら他の記事も見てください。

P.S. @tkdnさん: カレンダーへご招待いただきありがとうございました。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした