Remix入門② - RemixのSSRってなんでええんや？ #JavaScript

おっす！前回はRemixの基本をちょっと触れたけど、今日はRemixのSSR（サーバーサイドレンダリング）について話してみよか。
SSRってなんやろう？って思うかもしれんけど、ここではゆる～く、分かりやすく解説するで！

SSR（サーバーサイドレンダリング）ってなんやねん？

SSR、これは「サーバーサイドレンダリング」の略やで。WEBページのコンテンツをサーバー側で先に作ってしまって、それをユーザーに送る技術のことや。従来の方法やと、ブラウザがJavaScriptをダウンロードしてからページを作り始めるから、表示までちょっと時間がかかるんやけど、SSRを使うとサーバー側でほぼ完成品を送れるから、表示がサクサク早くなるんやで。

なんでRemixのSSRがええんや？

めちゃくちゃ早いページロード: RemixのSSRは初回訪問時のページロードをめっちゃ早くしてくれるんや。ユーザーは待ち時間ほぼゼロでサイトにアクセスできるんやで。
SEOが強化される: SSRやと、検索エンジンがページのコンテンツをインデックスしやすくなるんや。だから、Remixで作ったサイトはGoogleにも好かれるってわけや。
ユーザーエクスペリエンスの向上: ページがサクサク表示されるってことは、ユーザーが快適に過ごせるってことや。これが結果的に、サイトの評価を上げることにもつながるんやで。

例えばどんなサイトでSSRが活躍するん？

例えばやけど、ニュースサイトやブログ、EコマースのサイトとかでSSRの力を発揮できるで。サーバー側でページがあらかじめ生成されてるから、ユーザーがサイトにアクセスした瞬間に記事や商品がサッと表示されるわけや。これによって、ユーザーの満足度がグッと上がって、サイトへの滞在時間も伸びるんやで。

サンプルコード: RemixでのSSRの基本

// app/routes/index.js
export default function Index() {
  return (
    <div>
      <h1>RemixでSSRを体験しよう！</h1>
      <p>このページはサーバーサイドでレンダリングされてるで。</p>
    </div>
  );
}

// app/routes/about.js
export default function About() {
  return (
    <div>
      <h1>アバウトページやで</h1>
      <p>ここもサーバーサイドでレンダリングされてるんや。</p>
    </div>
  );
}

このサンプルでは、Remixを使って2つのシンプルなページ（ホームとアバウト）を作成しているんや。各ページはサーバーサイドでレンダリングされてるから、初回のページロードが速いんやで。

まとめ

というわけで、RemixのSSRについて色々と話してみたけど、どやったかな？SSRは単にページの速度を上げるだけやなくて、ユーザーエクスペリエンスを向上させたり、SEOを強化したりする重要な技術やで。次回の「Remix入門③」では、Remixのルーティングシステムについてもっと掘り下げていくから、そっちも楽しみにしててな！