feat: content/2.concepts/5.rendering-mode (#36)

* feat: content/2.concepts/5.rendering-mode

* chore: lint config

Author: ubugeeei

content/2.concepts/5.rendering-modes/.template/files/app.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+const count = ref(0)
+function increment() {
+  count.value++
+}
+
+console.log('count.value:', count.value)
+</script>
+
+<template>
+  <button type="button" @click="increment">
+    count is: {{ count }}
+  </button>
+</template>

content/2.concepts/5.rendering-modes/.template/index.ts

@@ -0,0 +1,9 @@
+import type { GuideMeta } from '~/types/guides'
+
+export const meta: GuideMeta = {
+  startingFile: 'pages/index.vue',
+  features: {
+    fileTree: true,
+    terminal: true,
+  },
+}

content/2.concepts/5.rendering-modes/.template/solutions/app.vue

@@ -0,0 +1,3 @@
+<template>
+  <NuxtPage />
+</template>

content/2.concepts/5.rendering-modes/.template/solutions/nuxt.config.ts

@@ -0,0 +1,5 @@
+export default defineNuxtConfig({
+  routeRules: {
+    '/foo': { ssr: false },
+  },
+})

content/2.concepts/5.rendering-modes/.template/solutions/pages/foo.vue

@@ -0,0 +1,13 @@
+<script setup lang="ts">
+console.log('pages/foo.vue')
+</script>
+
+<template>
+  <h1>Rendering Modes</h1>
+  <p>Foo</p>
+  <p>
+    <NuxtLink to="/">
+      Index
+    </NuxtLink>
+  </p>
+</template>

content/2.concepts/5.rendering-modes/.template/solutions/pages/index.vue

@@ -0,0 +1,13 @@
+<script setup lang="ts">
+console.log('pages/index.vue')
+</script>
+
+<template>
+  <h1>Rendering Modes</h1>
+  <p>Index</p>
+  <p>
+    <NuxtLink to="/foo">
+      Foo
+    </NuxtLink>
+  </p>
+</template>

content/2.concepts/5.rendering-modes/index.md

@@ -2,11 +2,136 @@
 ogImage: true
 ---
 
-# Rendering Modes
+# レンダリングモード
 
 <!-- TODO:
   - Universal Rendering (as default)
   - Client-side Rendering
   - Hybrid Rendering
   - Edge-Side Rendering?
 -->
+
+Nuxt は様々なレンダリングモードをサポートしています。\
+具体的には、ユニバーサルレンダリング、クライアントサイドレンダリング、ハイブリッドレンダリングがあります。
+
+デフォルトでは、ユニバーサルレンダリングが選択されています。\
+また、これらは `nuxt.config` で簡単に切り替えることができます。
+
+## ユニバーサルレンダリング
+
+ユニバーサルレンダリングでは、サーバーが完全にレンダリングされた HTML を返します。\
+これにより、ユーザーはアプリケーションのコンテンツをすぐに取得することができます。
+
+また、ブラウザ上で HTML を読み込んだ後、インタラクションを必要とする動的な UI を構築するためにブラウザ上で JavaScript コードを読み込みます。\
+このことを「ハイドレーション」と呼びます。
+
+この例では `app.vue` で `count` と言うステートをコンソールに出力しています。\
+このページにアクセスした際にターミナル(サーバー)とブラウザのコンソールの両方でこの出力を確認することができます。
+
+これはつまり、Nuxt が HTML をサーバー上で生成するために Vue.js のコードをサーバー上で実行し、その後ブラウザでも同じコードが実行されていることを意味します。\
+これゆえに「ユニバーサルレンダリング」と呼ばれています。
+
+ユニバーサルレンダリングの利点と欠点は主に以下の通りです。
+
+### 利点
+
+- パフォーマンス\
+  サーバーサイドで HTML を生成し、それをブラウザが読み込むため、ブラウザ上で JavaScript によってコンテンツを生成するよりも高速です。
+- 検索エンジン最適化 (SEO)\
+  Webクローラはページのコンテンツを直接インデックスできるため、SEO に有利です。
+
+### 欠点
+
+- 開発の制約\
+  サーバーサイドとクライアントサイドでシームレスに動作するコードを書くためにいくつかの制約があります。
+- コスト
+  サーバーを必要とするため、サーバーの稼働コストがかかります。
+
+より詳細な説明については [公式ドキュメント](https://nuxt.com/docs/guide/concepts/rendering#universal-rendering) を参照してください。
+
+## クライアントサイドレンダリング
+
+`nuxt.config` で `ssr: false` を設定することで、クライアントサイドレンダリングを有効にすることができます。
+
+```ts
+// nuxt.config.ts
+export default defineNuxtConfig({
+  ssr: false
+})
+```
+
+クライアントサイドレンダリングでは、アプリケーションをブラウザ上でレンダリングします。\
+ブラウザが現在のインターフェイスを作成するための命令を含むすべてのJavaScriptコードをダウンロードして解析した後、HTML要素を生成します。
+
+クライアントサイドレンダリングの利点と欠点は主に以下の通りです。
+
+### 利点
+
+- 開発スピード\
+  サーバーサイドとのシームレスな動作を要求しないため、ブラウザで動作することだけを考慮して開発することができます。
+- 安価\
+  サーバーを必要としないため、インフラストラクチャのコストがかかりません。
+- オフライン\
+  コードはすべてブラウザで実行されるため、インターネットが利用できない状態でもうまく動作し続けることができます。
+
+### 欠点
+
+- パフォーマンス\
+  ユーザーはブラウザがJavaScriptファイルをダウンロード、解析、実行するのを待たなければなりません。それらに時間がかかり、ユーザーの体験に影響を与える可能性があります。
+- 検索エンジン最適化 (SEO)\
+  クライアントサイドレンダリングで配信されたコンテンツのインデックス化と更新には時間がかかるため、サーバーレンダリングのHTMLドキュメントと比べ SEO に不利です。
+
+## ハイブリッドレンダリング
+
+Nuxt ではルートのルールを設定することにより、ルートごとに異なるキャッシュ ルールとレンダリングモードを選択することができます。
+
+設定は `nuxt.config` の `routeRules` オプションで行います。
+
+詳細は [公式ドキュメント](https://nuxt.com/docs/guide/concepts/rendering#hybrid-rendering) を参照してください。
+
+```ts
+export default defineNuxtConfig({
+  routeRules: {
+    // Homepage pre-rendered at build time
+    '/': { prerender: true },
+    // Blog posts page generated on demand, revalidates in background, cached on CDN for 1 hour (3600 seconds)
+    '/blog': { isr: 3600 },
+    // Blog post page generated on demand once until next deployment, cached on CDN
+    '/blog/**': { isr: true },
+    // Admin dashboard renders only on client-side
+    '/admin/**': { ssr: false },
+  }
+})
+```
+
+## チャレンジ
+
+クライアントサイドレンダリングを設定し、Vue.js のコードがブラウザ上のみで実行されることを確認してみましょう。
+
+そのためには:
+
+1. `nuxt.config` に `ssr: false` を設定します。
+2. `app.vue` で `count` と言うステートをコンソールに出力します。
+3. ターミナルでコンソールの出力が行われていないことを確認します。
+4. ブラウザの開発者ツールを開き、コンソールの出力を確認します。
+
+次に、ハイブリッドレンダリングを設定し、ルートごとに異なるキャッシュ ルールとレンダリングモードを選択することができることを確認してみましょう。
+
+そのためには:
+
+1. `app.vue` で `NuxtPage` コンポーネントを使って、ページをレンダリングします。
+2. `/pages/index.vue` と `/pages/foo.vue` を作成し、`script setup` 内コンソールの出力を行います。(内容は任意のもので構いません。)
+3. `nuxt.config` に `routeRules` を設定し、`/` と `/foo` に対して異なるキャッシュ ルールとレンダリングモードを設定します。\
+   今回は、`/foo` に `ssr: false` を設定してみましょう。
+4. `/` にアクセスし、コンソールの出力がサーバーとクライアントの両方で行われていることを確認します。
+5. `/foo` にアクセスし、コンソールの出力がブラウザのみで行われていることを確認します。
+
+:ButtonShowSolution{.bg-faded.px4.py2.mb3.rounded.border.border-base.hover:bg-active.hover:text-primary.hover:border-primary:50}
+
+:::note
+レンダリングモードの動作の確認は、実際には console の出力場所だけではなく、開発者ツールのネットワークタブなどを使って、
+リクエストの挙動を確認することも重要です。
+
+ユニバーサルレンダリングの場合はサーバーが HTML を生成するため、ネットワークダブを確認してみるとコンテンツ内容 (主に `<div id="__nuxt">` 内)が完全なものになっているのに対し、クライアントサイドレンダリングの場合は、HTML が空の状態で JavaScript によってコンテンツが生成されていることが確認できます。\
+(ダウンロードした JavaScript も別のリクエストとして観測することができます。)
+:::

eslint.config.js

@@ -7,4 +7,10 @@ export default antfu(
     formatters: true,
   },
   nuxt,
+  {
+    files: ['**/.template/**'],
+    rules: {
+      'no-console': 'off',
+    },
+  },
 )