Next.jsを学ぶ1
以下を参考に。
- 【動画付き】Next.js の Server Side Rendering (SSR) を理解する。create-react-app と比べてみた。
- Next.js と Gatsby の比較
- Comparison of Gatsby vs Next.js
- BFF（Backends For Frontends）の5つの便利なユースケース
- Universal / Isomorphic JavaScript について
- Reactで実現するUniversal JavaScript
- Node.js, SPA, PWA, Universal JSあたりについてのメモ
作業時間：1.5時間 経過時間：21時間
SSRとSSG
SSRとSSGを混同していた節があった。 自分がやっていたのはあくまで、SSGに過ぎなかった。 SSRの場合、稼働させるサーバーがいるっぽいのだがあっているか。 Netlifyで出来るのか...?
Node.jsのログが表示できたので、サーバーサイドレンダリングは出来ていることは体感できた。 理屈も分かるが、理論は怪しい。
Gatsby.jsはReactのフレームワークで静的サイトジェネレーター。(SSG) Next.jsもReactのフレームワークでサイバーサイドレンダリングも静的サイトジェネレーターとしても使用できる。 時代の潮流としては、SSGっぽい。
SSRとは
そもそもの歴史的な流れは以下。
Isomorphic JavaScript
SPAが盛り上がってきた時のSEO対策やロード時間の問題が浮上した。 そこで、サーバー側でもコンテンツをレンダリングするというアプローチが生まれた。 しかしそのアイデアは、クライアントとサーバーで異なる言語で同じロジックのコードをメンテナンスしないといけないコストも示していた。 そこで、クライアントとサーバーを同じ言語で管理しようとするアイデアが生まれた。 それが「Isomorphic JavaScript」
Universal JavaScript (Universal Application)
そもそもisomorphicとは、「同相性、対応しているか、形や関係性が似ている」という意味合いになるらしい。 例えば、Underscoreとlodashの関係を説明する際には、「isomorphic」は適している。哲学や思想、アプローチは異なるが、同じ問題を解決している。表現だけ少し異なる。 SSRでは、クライアントとサーバーで同じコードを実行しているので、「似ている」というのは適していない。 そこで「Universal JavaScript」という名前になった。
SSRとは、サーバーサイドでコンテンツのレンダリングを行おうとする手段を指す。 Universal JavaScriptとは、サーバーサイドとクライアントサイドで同じJSを実行する手法を指す。