SSR -> CSR

[VortexExpansion]

Fixes #14
https://github.com/diverta/front_kuroco_document_site/issues/957

Reviewer

@yabe-diverta san

Key changes

• SSR=false in nuxt config
• UseFetch -> $fetch and server=false in all API params
• <ClientOnly> tag for default.vue

Progress check

• Set SSR to false
• Company
• Contact
• Login
• ltd-news
• mypage
• news
• preview
• privacy
• service
• composables
• index and layout

[VortexExpansion]

@yabe-diverta san
Please review

[yabe-diverta]

Would you provide general loader for fallback?

If you do use ssr: false, you should also place an HTML file in ~/app/spa-loading-template.html with some HTML you would like to use to render a loading screen that will be rendered until your app is hydrated.

see https://nuxt.com/docs/guide/concepts/rendering

[yabe-diverta]

set request changes

[VortexExpansion]

@yabe-diverta san

Since most of the reviews are related to $fetch v/s useFetch, I will address it here.

I agree behaviour-wise while generating there would be no difference between $fetch and useFetch but my understanding is that $fetch is a basic fetch request whereas useFetch has an added layer of complexity that even though performs the same task, but has no advantage of being used here.

I prefer using $fetch everywhere because

• maintaining consistency in all fetch calls across all requests
• it is recommended by nuxt3 documentation to use $fetch if fetch is client side only
• useFetch is preferred in SSR and its only use is to prevent data fetching twice in case of SSR. Since we don't plan on using SSR, we get no benefit of using useFetch which is almost equivalent to useAsyncData(url, () => $fetch(url))

References :
https://nuxt.com/docs/api/utils/dollarfetch
https://nuxt.com/docs/getting-started/data-fetching
https://nuxt.com/docs/api/composables/use-fetch

[yabe-diverta]

@VortexExpansion

I thought:

• Yes sure there is no advantages while we select CSR, if we keep useFetch(), users could freely switch to SSG when they want.
• Plus for me, some event handler fns we have added are using $fetch().
  This is explicitly labeling those functions are supposed only used in client-side, not server-side.

Although,

it is recommended by nuxt3 documentation to use $fetch...

I could not find that sentence out in doc site, could you share me?
I will agree with setting $fetch() instead of useFetch() if true.

[VortexExpansion]

@yabe-diverta san
I agree with both your points.

it is recommended by nuxt3 documentation to use $fetch if fetch is client side only

Reference
https://diverta.gyazo.com/13ea0ce1378ced7302d481ef5cd182c0
https://diverta.gyazo.com/d6a5a436123a0750a9b84b103f8bdc17

[yabe-diverta]

@VortexExpansion
Thank you for clarification 🙇
Hmm for me it sounds they don't recommend using $fetch over navigations & initializations (general use-cases) but over client-side event handler.

[VortexExpansion]

@yabe-diverta san
Understood. So, in conclusion, I will stick to this. Please confirm.

• Yes sure there is no advantages while we select CSR, if we keep useFetch(), users could freely switch to SSG when they want.
• Plus for me, some event handler fns we have added are using $fetch(). This is explicitly labeling those functions are supposed only used in client-side, not server-side.

[VortexExpansion]

@yabe-diverta san
Reflected all requested changes
Please confirm

[yabe-diverta]

reviewed, pleas check 🙇

[takel-shiba]

@yabe-diverta
修正確認お願いします

[yabe-diverta]

reviewed again, no issues found 🙇