出来るだけ「動きのない」Webサイトを構築しよう~SSRを使ってみよう~
はじめに
皆さんは普段どのようにWebサイトを作成しているでしょうか。
2023年現在でもjQueryやBackbone.jsを使っている人はとても多くいると思います。
また、その他でも多くの開発者の方々はCSR(Client side rendering)の方式で例えばReactやVueなどを使って開発をしていると思います。
ですが、今回はそのようなWeb開発のスタイルとは真逆のアプローチについて紹介をしたいと思います。
動きのないWebサイト開発
普段Web上に転がっているブログなどを見ると、下に行くほどフェードしながら表示されたり、ボタンがくるくる回ったり、色々なJavaScriptアニメーションが施されているものが多くあります。
ただ、このようなWebサイトは美しく見える反面デメリットが少し大きいです。
パフォーマンスの低下
単純にJavaScriptを使いすぎるとWebサイトがロードするファイルサイズが大きくなってしまいます。
また、jQueryやReact、Vueなどのフレームワークを使うとそのフレームワークだけで結構なサイズになったりするため、これまたパフォーマンスに悪影響を及ぼしてしまいます。
セキュリティ問題
JavaScriptをクライアント側で多く使ってしまうと、本来サーバ側に記述しないといけない情報を誤って記述してしまう可能性があったり、XSS攻撃が容易になったりします。
そのためJavaScriptの利用は最小限が良いです。
SEOに悪影響
検索エンジンの中にはJavaScriptを評価しないものも多くあります。(Googleは評価するようです)
そのため、サイト内容をJavaScriptで表示させるようなものでは正しくWebサイトが評価されず、検索結果に表示されないリスクがあります。
そして結果的にアクセス数が減少する懸念があります。
メンテナンス性の悪化
単純にJavaScriptを考えなしに利用しすぎるとメンテナンス性が悪化してしまいます。
なので、出来るだけシンプルに、長期的に運用したい場合はJavaScriptを使わないのが良策なんじゃないかとおもったりします。
一部ユーザが閲覧できない
中にはブラウザでJavaScriptが制限されていたりするユーザや、制限しざるを得ないユーザも存在します。
そのようなユーザはJavaScriptありきのWebサイトを閲覧することができません（泣）
ここまでこのようにJavaScriptを利用する欠点を書きましたが、だからといってHTMLとCSSだけでWebサイトを作るのはあまりにも複雑すぎますよね。そこで、今回は「JavaScriptをゴリゴリ使いたいけど、実際には最小限にしたい」なんていう欲張りセットを実現するための技術をご紹介します。
SSRについて
SSR(Server side rendering)はその名の通りサーバサイドでレンダリングする方式です。
例えばSvelteKitというフレームワークでは、サーバサイドでSvelteを評価して、静的にデータ挿入が可能な箇所があればデータ挿入し、不可能な箇所はクライアントサイドで評価させる(JavaScriptを送信する)というやり方です。
このようなSSRのやり方を採用することで、書き心地はレベルアップしてJavaScriptの量を完全に減らす事ができるんです。
実際の例
実際に自分のブログ(kstdx.com)は、FreshというSSR可能なWebフレームワークを採用して構築しました。
見てもらえば分かるとおり、アニメーションもホバー時のものなどCSSで実装できるものに、JavaScriptも記事のハート部分にしか付けていません。
なので、MicroCMSのAPIを叩いているにも関わらず体感ではかなり早く閲覧可能なのでは無いでしょうか。
実際にPageSpeed Insightの評価ではかなりの高得点を得ることが出来ています。
日本と海外での比較
母数の多さも影響するとは思いますが、比較的日本より海外の方がSSR型のWebサイトが多いなと感じます。
逆にいえば日本ではそこまでSSRの需要がないということもわかります。
日本では今でもLaravelやDjangoやRailsなどのMVCフレームワークが流行っている傾向にあるので、アニメーションなどの動きを作成する場合はあとでJavaScriptを付ける必要があるようですね。
こう見ても今のうちにSSRの勉強をしておくと後々需要が増えた時に便利かもしれませんね。
おわりに
ということでみなさんも動きの少ないWebページを作成していきましょう！
Discussion