#Fetch on Server

84 messages · Page 1 of 1 (latest)

whole stirrup
#

Nuxt has started to send fetches on my client even though I specifically configured it to send on server. Any reason why this could start happening? Or am I missing some settings/option?

blazing hornet
#

if so, that option doesn't prevent fetches on the client side, it just enables fetching during SSR rendering of pages

whole stirrup
#

i have that set to true

#

is there a way to fetch on server only?

blazing hornet
#

you might want to check out server components and keepalive, though i'm not sure if you'll get the effect you are looking for (you might, i can't remember if it worked for me or not)
https://nuxt.com/docs/guide/directory-structure/components#server-components
https://vuejs.org/guide/built-ins/keep-alive.html#keepalive

KeepAlive | Vue.js

Vue.js - The Progressive JavaScript Framework

Nuxt
components/ · Nuxt Directory Structure

The components/ directory is where you put all your Vue components.

whole stirrup
#

server doesnt work

#

i added an if statemet for testing that checks if process.server and it returns false

blazing hornet
#

hm?

#

i use server components so i know they work

whole stirrup
#

even as a server component it sends on client

#

wait

#

it worked

#

poggers

#

nvm

#

still caches on client and it doesnt even render the <template>

tepid nebula
#

Sounds like an interesting problem. Can you link a github repo that shows what you're trying to achive?

cyan crystal
#

lol that's strange, did you tried to use ```ts
if(process.server) return await $fetch(...);

whole stirrup
#

yup i did exactly that

whole stirrup
#

nuxt.config.js

export default {
  // Global page headers: https://go.nuxtjs.dev/config-head
  head: {
    title: 'nuxt-konostats',
    htmlAttrs: {
      lang: 'en'
    },
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { hid: 'description', name: 'description', content: '' },
      { name: 'format-detection', content: 'telephone=no' }
    ],
    link: [
      { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
    ]
  },

  // Global CSS: https://go.nuxtjs.dev/config-css
  css: [
    'ant-design-vue/dist/antd.dark.css',
    '@/static/global.css'
  ],

  router: {
    base: '/home',
  },

  // Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins
  // plugins: [
  //   '@/plugins/antd-ui'
  // ],
  plugins: [
  ],

  serverMiddleware: [
    { path: "/server-middleware", handler: "~/server-middleware/rest.js" },
  ],

  // Auto import components: https://go.nuxtjs.dev/config-components
  components: true,

  // Modules for dev and build (recommended): https://go.nuxtjs.dev/config-modules
  buildModules: [
    // https://go.nuxtjs.dev/typescript
    '@nuxt/typescript-build',
    '@nuxtjs/axios',
  ],

  // Modules: https://go.nuxtjs.dev/config-modules
  modules: [
  ],

  // Build Configuration: https://go.nuxtjs.dev/config-build
  build: {
  },
  
  target: 'server'
}
#

.vue thats supposed to display data

<script lang="ts">
import { defineComponent } from 'vue';
import { Button, Table } from 'ant-design-vue';
import { Pagination } from 'ant-design-vue';
import { stat_banner_user } from '~/assets/stat_banner_user';

const base = {{backend link}}

let data: stat_banner_user[]

if (process.server) {
    data = await $fetch(`${base}/banner_user/nuts?type=pp`)
}
else {
    console.log('client')
}

const columns: any = [
    {
        name: '',
        key: 'flag'
    },
    {
        name: '',
        key: 'username'
    }
]

export default defineComponent({
    data() {
        return {
            data,
            columns
        }
    },
    fetchOnServer: true,
    components: {
        ATable: Table,
        APagination: Pagination,
        AButton: Button,
    }
})
</script>
#

i am using npx nuxi dev to run it btw

tepid nebula
#

perhaps not relevent, but why are you using nuxtjs/axios?

whole stirrup
#

i come from angular and have had not so great experience so id like to rewrite to something else, and id like to have all my api requests on the server so i dont have to filter through the requested data on backend

#

i have plans to display more data so having to filter through all that data to only send back what im fine with anyone seeing is not ideal

tepid nebula
#

Here are some examples

#

essentially, If you're only fetching data to show it on the front end it's usually not a problem for me

whole stirrup
tepid nebula
#

That being said, I've always used setup components

whole stirrup
tepid nebula
#

here is that repo above being built step by step.

#

Not just pluggin here, I think taking a look might help you see other ways of writing, which imho are much easier on the eyes and fingers

#

Here's an example:

const { data, pending } = await useFetch<topicData>(`/api/topic/${topicName}`, { key: route.fullPath })
#

If you're still having issues after taking a look I'd be happy to help

whole stirrup
#

still on client side

#

(i may just be dumb and it does that for development purposes and doenst do it when deployed in production)

tepid nebula
#

I'll see what I can find . . .

whole stirrup
#

🙏 thank you

tepid nebula
#

I just tried it, and it seems to fetch fine on the server . . .

#

Try converting your component to a setup component and see if that solves the problem. You'll like it better anyway. It's much cleaner looking

#

let me know how that works for you. I'm interested it know

whole stirrup
#

okay

#

it worked

tepid nebula
#

😸 super!

whole stirrup
#

aaaaaaaaaand its back

tepid nebula
#

nnooooooo! 😄

#

can you show how you're doing it now?

whole stirrup
# 
<script lang="ts" setup>
import { defineComponent } from 'vue';
import { Button, Table } from 'ant-design-vue';
import { Pagination } from 'ant-design-vue';
import { stat_banner_user } from '~/assets/stat_banner_user';

const base = {{link}}

const { data, pending } = await useFetch<stat_banner_user[]>(`${base}/banner_user/nuts?type=pp`)

console.log(data.length)
</script>
#

oh wait

#

should this be done in /pages or /components ?

tepid nebula
#

both

whole stirrup
#

so doing it in /pages doesnt change the situation/problem?

tepid nebula
#

I don't think so. I've noticed after clicking around a bit, some calls are also being made client side for me as well. It's not an issue for me, so I never really paid attention to it. Interesting . . . Sometimes it does, sometimes it doesn't

#

findings: when I hard refresh on a page, useFetch is called server-side

#

when I navigate to the same page from another page, useFetch() is run client-side

#

What's the end goal exactly?

whole stirrup
#

all fetches are executed on server

tepid nebula
#

Something I've found. Setting the key like so:

const {data} = await useFetch(`/api/categories`, {key: 'cats'})

prevents the page from refetching after the initial server-side render

#

Setting the key dynamically will of course not have the effect. But if the key is static like in my example, it won't fetch twice

whole stirrup
#

does setting the key static interfere with for example going onto a users page and then going onto a different users page

tepid nebula
#

Yeah, not a good idea for dynamic info

#

not that you owe me an answer, but why do you want every call to be made on the server?

whole stirrup
#

so some of the data can change ie either user changes a setting or new data gets added from backend

tepid nebula
#

That happens all the time in my app, but it doesn't seem to matter whether it fetches from the server or not.

#

Can you give me concrete example where fetching from the client would prevent something you're trying to achieve?

whole stirrup
#

i guess i dont

#

just an underlying anxiety of having my db scrappered

tepid nebula
#

some tips from someone who make a lot of dumb mistakes:

#

you can "pick" the data you want with useFetch

#

so only pick what you want to reach the client

#

also, you can sanitize any sensitive data in your api for example:

#

here I do exactly that. I remove the sensitive data before sending it to the client.

#

I would suggest that where you make the call isn't that security relevant, in the end, the data you expose on the client is visible regardless of where you do the fetching.

whole stirrup
#

gotcha

tepid nebula
#

I could be wrong though 😄

whole stirrup
#

ill definitely work on implementing that more

whole stirrup