Vue/Nuxtアプリケーションにおけるレンダリングの仕組みについて CSRとSSRって何？

<!-- index.html -->
<div id="app">
  <!-- 最初は空っぽ -->
</div>
<script src="vue.js"></script>
<script src="app.js"></script>

// app.js
new Vue({
  el: '#app',
  data: {
    message: 'こんにちは！'
  },
  mounted() {
    // ブラウザで実行される
    console.log('ページが表示されました！')
  }
})

// server.js
const app = new Vue({
  data: {
    message: 'こんにちは！'
  },
  template: '<div>{{ message }}</div>'
});

// サーバーでHTMLを生成
const renderer = require('vue-server-renderer').createRenderer();
renderer.renderToString(app).then(html => {
  console.log(html); // '<div>こんにちは！</div>'
});

// pages/index.vue
export default {
  data() {
    return {
      message: 'こんにちは！'
    }
  },
  
  // サーバーサイドで実行される
  async asyncData() {
    const data = await fetch('https://api.example.com/data');
    return { apiData: data }
  },
  
  // クライアントサイドで実行される
  mounted() {
    console.log('ブラウザで表示されました！');
  }
}

export default {
  beforeCreate() {
    // インスタンス作成前
  },
  created() {
    // インスタンス作成後
  },
  beforeMount() {
    // DOM追加前
  },
  mounted() {
    // DOM追加後
  },
  beforeUpdate() {
    // 再描画前
  },
  updated() {
    // 再描画後
  },
  beforeDestroy() {
    // 破棄前
  },
  destroyed() {
    // 破棄後
  }
}

export default {
  // サーバーサイドのみ
  asyncData() {
    // データ取得
  },
  
  // サーバーサイド＆クライアントサイド
  fetch() {
    // ストア更新用データ取得
  },
  
  // サーバーサイドのみ
  middleware() {
    // ページ遷移前の処理
  },
  
  // サーバーサイドのみ
  validate() {
    // パラメータ検証
  }
}

// BlogList.vue
export default {
  data() {
    return {
      posts: []
    }
  },
  mounted() {
    // ページ表示後にデータ取得
    this.fetchPosts();
  },
  methods: {
    async fetchPosts() {
      const response = await fetch('/api/posts');
      this.posts = await response.json();
    }
  }
}

// pages/blog/index.vue
export default {
  async asyncData({ $axios }) {
    // サーバーサイドでデータを取得
    const posts = await $axios.$get('/api/posts');
    return { posts }
  },
  
  mounted() {
    // クライアントサイドでの追加処理
    console.log('ページが表示されました');
  }
}

// 例：リアルタイムチャット
export default {
  data() {
    return {
      messages: []
    }
  },
  mounted() {
    this.connectWebSocket();
  },
  methods: {
    connectWebSocket() {
      this.socket = new WebSocket('ws://...');
      this.socket.onmessage = this.handleMessage;
    }
  }
}

// pages/blog/_id.vue
export default {
  async asyncData({ params, $axios }) {
    const post = await $axios.$get(`/api/posts/${params.id}`);
    return { post }
  },
  head() {
    return {
      title: this.post.title,
      meta: [
        { hid: 'description', content: this.post.summary }
      ]
    }
  }
}

// middleware/auth.js
export default function ({ store, redirect }) {
  // ユーザーが未ログインの場合、ログインページにリダイレクト
  if (!store.state.isAuthenticated) {
    return redirect('/login')
  }
}

// pages/secret.vue
export default {
  middleware: 'auth',  // このページにミドルウェアを適用
}

// pages/posts/_id.vue
export default {
  async asyncData({ params, $axios }) {
    try {
      // 記事データの取得
      const post = await $axios.$get(`/api/posts/${params.id}`)
      return { post }  // コンポーネントのdataにマージされます
    } catch (error) {
      console.error(error)
    }
  },
  // データが取得できなかった場合のフォールバック
  data() {
    return {
      post: null
    }
  }
}

// pages/users.vue
export default {
  async fetch({ store }) {
    try {
      // ユーザーリストを取得してストアに保存
      await store.dispatch('users/fetchUsers')
    } catch (error) {
      console.error(error)
    }
  }
}

// pages/posts/_id.vue
export default {
  validate({ params }) {
    // IDが数値であることを確認
    return /^\d+$/.test(params.id)
  }
}

// pages/posts/_id.vue
export default {
  // 1. まずミドルウェアでの認証チェック
  middleware: 'auth',
  
  // 2. パラメータの検証
  validate({ params }) {
    return /^\d+$/.test(params.id)
  },
  
  // 3. データの取得
  async asyncData({ params, $axios }) {
    const post = await $axios.$get(`/api/posts/${params.id}`)
    return { post }
  },
  
  // 4. Vueのライフサイクルフック
  data() {
    return {
      comments: []
    }
  },
  
  async created() {
    // コメントの取得
    await this.fetchComments()
  },
  
  mounted() {
    // ビューポートの監視を開始
    this.setupIntersectionObserver()
  },
  
  beforeDestroy() {
    // クリーンアップ
    this.observer.disconnect()
  },
  
  methods: {
    async fetchComments() {
      const response = await this.$axios.$get(`/api/posts/${this.post.id}/comments`)
      this.comments = response.data
    },
    
    setupIntersectionObserver() {
      this.observer = new IntersectionObserver(/* ... */)
    }
  }
}