Nuxt•2mo ago

Request data in a plugin before sending the files to the client

Currently I get this error in my client Hydration completed but contains mismatches. My plugin:

export default defineNuxtPlugin(async nuxtApp => {
    if (!import.meta.server) {
        return;
    }
    try {
        const envsState = useEnvsStateObjectState();
        const {data} = await useFetch<EnvVars>(`api/public/envs`, {server: false});
        envsState.setData(data.value as EnvVars);
    } catch (error) {
        console.error('error fetching envs', error);
    }
});

export default defineNuxtPlugin(async nuxtApp => {
    if (!import.meta.server) {
        return;
    }
    try {
        const envsState = useEnvsStateObjectState();
        const {data} = await useFetch<EnvVars>(`api/public/envs`, {server: false});
        envsState.setData(data.value as EnvVars);
    } catch (error) {
        console.error('error fetching envs', error);
    }
});

What I basically want to achieve is that the endpoint is called before data is sent to the client. The client should not know that this endpoint is getting called upon sending the files. When removing the server check, it seems that 2 calls are getting made. Once on the server and another time on the client. Any idea how I can achieve this? Btw. My backend is a java application and I'm not using the nuxt backend server folder

1 Reply

Kérunix•2mo ago

You can suffix your file with .server to make the plugin only run on the server side during the initial SSR request. Something like my-plugin.server.ts

Gaming

Programming

Request data in a plugin before sending the files to the client