SSGやSSRと多言語の組み合わせについて ~ PythonでSSG,SSR①
皆さんSSG、SSRしてますか？
CSRで描画しているサイトなど、描画スピード対策やSEO対策で苦慮した方は大勢いらっしゃると思います。
そういった場合、SSG（Static Site Generator）やSSR（Server Side Rendering） を適用したサイトを考えることになるというのは多いかなと感じます。
ところが、SSGやSSRはnext.jsなどのフレームワークを用いた場合のみ適用できている例しかほぼでてきません。
バックエンドでPythonを扱っている私のような人間からすると、使いたくても使えないみたいな状況が結構でてくるわけですね。
ということで、バックエンドはPython、クライアントサイドはreactでなんとかできないか？
というのを、連載形式でなんとか頑張ってみます。
CSR（Client Side Rendering）
こちらはそのまま、クライアントサイドで情報を受け取って描画するという話です。
乱暴に表現すると、真っ白なサイトの上でreactなどを走らせて情報をAPIで取得してパズルのようにオブジェクトを配置していくといった手法ですね。
CSRを適用する部分は基本はレンダリング前は無の状態です。
SSR（Server Side Rendering）
こちらは、CSRするにしても情報が多い場合は最初真っ白な画面がでてきてUX的に問題なのではないかな？からでてきた手法です。
最初の描画を真っ白ではなく、サーバ側でHTMLを生成して描画する方法ですね。
その後は、CSRと同じ方法で描画が遷移していきます。
要するに、最初は何かしらが描画されている手法です。
SSG（Static Site Generator）
急になんか名詞になりましたね。こちらは、SSRにしても毎回データベースアクセスをするのは無駄なページがあるのでは？みたいな話から発生した手法のようです。
単純に、事前にHTMLファイルのような静的ファイルを定期的に作成しておいて、ユーザからは静的ファイルを見るだけでOKにするといった手法です。
情報の更新が頻繁ではないページに対して適用すると効果的な方法ですね。
つまりどういうこと？
最近流行りのreactやVueなどのフレームワークは基本的にはCSRのフレームワークです。
VirtualDOMを用いた描画更新といった非常に優れた状態管理を実現していますが、考えずに使うと初回描画時に弊害が起こる可能性がそれなりにあるということですね。
初回描画時の状態というのはUXやSEOでとても重要な要素です。GoogleBotは比較的最新のブラウザの描画と同条件とGoogleは話していますが、インデックス時に果たしてどこまで描画されてるかは名言されていません。
じゃあSSRやSSGを使いたいなって思いますよね。
。。。でもこれは冒頭に記載したとおりnext.jsなどの選ばれしフレームワークでしかサクッと実現できる話ではないというのが僕の知ってる現状です。
そこをなんとかPython使いの僕でもなんとかしたいねというのがこの連載のモチベです。
今回はここまで、次の回は具体的な計画をしてみます。
