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