Vue.js: What is the difference between SSR and CSR in Vue?

1<!-- SSR - Nuxt 3 default -->
2<script setup>
3const { data } = await useFetch("/api/posts")
4// Rendered on server
5</script>
6
7<!-- CSR - disable SSR -->
8<script setup>
9definePageMeta({ ssr: false })
10const { data } = await useFetch("/api/posts")
11// Rendered on client only
12</script>