<h1 id="%E3%81%AF%E3%81%98%E3%82%81%E3%81%AB">
<a class="header-anchor-link" href="#%E3%81%AF%E3%81%98%E3%82%81%E3%81%AB" aria-hidden="true"></a> はじめに</h1>
<p>この記事の内容は、以下の動画でも解説しているので是非見てみてください！（動画の方が多分わかりやすいです！）</p>
<p><span class="embed-block embed-youtube"><iframe src="https://www.youtube-nocookie.com/embed/PyXbb8YqaNg" allow="accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen loading="lazy"></iframe></span><a href="https://youtu.be/PyXbb8YqaNg?si=tu3MPODwvaQjKe9-" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://youtu.be/PyXbb8YqaNg?si=tu3MPODwvaQjKe9-</a></p>
<h1 id="hydration%E3%81%A8%E3%81%AF%EF%BC%9F">
<a class="header-anchor-link" href="#hydration%E3%81%A8%E3%81%AF%EF%BC%9F" aria-hidden="true"></a> Hydrationとは？</h1>
<p>Hydration（ハイドレーション）とは、直訳すると「水分補給」という意味です。<br>
フロントエンドの世界では、静的な HTML に JavaScript を結び付けてインタラクティブにするプロセスのことを指します。</p>
<p>例えば、React で SSR する場合を考えてみましょう。</p>
<p><img src="https://storage.googleapis.com/zenn-user-upload/4f408e8a4caa-20240616.gif" loading="lazy" class="md-img"></p>
<p>SSR では、まずブラウザはサーバーに対して、リクエストを送信します。リクエストを受けたサーバーは、JavaScript を実行して、HTML を作り出します。そして、完成したこの HTML をブラウザに送り返します。</p>
<p><img src="https://storage.googleapis.com/zenn-user-upload/d9a72128546a-20240616.gif" loading="lazy" class="md-img"></p>
<p>このとき重要なのは、受け取った HTML が "あくまでも見た目しかない" ということです。つまり、このままだと Web ページは静的で、クリックしても何も起きません。</p>
<p>そこで必要になるのが「Hydration」です。</p>
<p><img src="https://storage.googleapis.com/zenn-user-upload/0ecab242ff1a-20240616.gif" loading="lazy" class="md-img"></p>
<p>Hydration とは、先ほど述べたとおり水分補給という意味で、まるで乾いた HTML に、インタラクティブ性という「水」を与えるようなものです。</p>
<p>つまり、先ほどの SSR の例で言うと、HTML を表示した後に、JavaScript をダウンロードして実行するという、このプロセスのことを Hydration と呼びます。</p>
<p><img src="https://storage.googleapis.com/zenn-user-upload/4cba60341d6d-20240616.gif" loading="lazy" class="md-img"><br>
このように、Hydration を行うことで、静的な HTML をインタラクティブな Web ページに変えることが可能になります。</p>
<h1 id="%E3%81%8A%E3%82%8F%E3%82%8A%E3%81%AB">
<a class="header-anchor-link" href="#%E3%81%8A%E3%82%8F%E3%82%8A%E3%81%AB" aria-hidden="true"></a> おわりに</h1>
<p>この記事の他にも、「100秒で理解する」というシリーズを書いています。</p>
<ul>
<li><a href="https://zenn.dev/ak/articles/225832b7889281" target="_blank">100秒で理解するHTTP Cookie</a></li>
<li><a href="https://zenn.dev/ak/articles/e98737d6156441" target="_blank">100秒で理解するCDN</a></li>
<li><a href="https://zenn.dev/ak/articles/00616eb99523c2" target="_blank">100秒で理解する仮想DOM</a></li>
<li><a href="https://zenn.dev/ak/articles/c21609fd3b0fdc" target="_blank">100秒で理解するBun</a></li>
<li><a href="https://zenn.dev/ak/articles/dc23436b241a84" target="_blank">100秒で理解するPromise</a></li>
<li><a href="https://zenn.dev/ak/articles/ba4c9ace66865e" target="_blank">100秒で理解するESM（ESModules）</a></li>
</ul>
<h1 id="%E5%8F%82%E8%80%83%E6%96%87%E7%8C%AE">
<a class="header-anchor-link" href="#%E5%8F%82%E8%80%83%E6%96%87%E7%8C%AE" aria-hidden="true"></a> 参考文献</h1>
<ul>
<li><a href="https://www.publickey1.jp/blog/23/webssrdenoisomorphic_javascriptuniversal_javascript.html" target="_blank" rel="nofollow noopener noreferrer">Publickey - Webの将来はサーバサイドレンダリング（SSR）に回帰していく。Denoが主張するIsomorphic JavaScript（もしくはUniversal JavaScript）とは何か？</a></li>
<li><a href="https://zenn.dev/luvmini511/articles/71f65df05716ca" target="_blank">Next.js で Hydration Error が起きる理由と解決方法</a></li>
</ul>


一瞬で理解するHydration

Discussion