# Client logic in SSR

Learn how to use client-side methods in SSR environments.

The methods exposed by the [`Plug`](/reference/sdk/javascript/api/plug) only work on the client side. If you try to call them on the server side, you will get the following error:

> **Error**
>
> Property `croct.someMethod` is not supported on server-side (SSR). Consider refactoring the logic as a side-effect (`onMounted`) or a client-side callback (`onClick`, `onChange`, etc).

When calling methods from the [`useCroct`](/reference/sdk/vue/api/composables/use-croct) composable, the operations must be performed within the [`onMounted`](https://vuejs.org/api/composition-api-lifecycle#onmounted) hook or client-side callbacks, such as `@click` or `@change`.

For example, if you want to [track a goal](/reference/sdk/vue/event-tracking#goal-completion) when a user visits a pricing page, the following code will throw an error if executed on the server side:

**PricingPage.vue**

```vue
<script setup>
import {useCroct} from '@croct/plug-vue';

const croct = useCroct();

croct.track('goalCompleted', {goalId: 'pricing-page-view'});
</script>

<template>
<div>
  <h1>Pricing</h1>
  ...
</div>
</template>
```

To fix this, refactor the tracking operation to run inside an `onMounted` hook:

**PricingPage.vue**

```diff
<script setup>
+import {onMounted} from 'vue';
import {useCroct} from '@croct/plug-vue';

const croct = useCroct();

-croct.track('goalCompleted', {goalId: 'pricing-page-view'});
+onMounted(() => {
+  croct.track('goalCompleted', {goalId: 'pricing-page-view'});
+});
</script>

<template>
<div>
  <h1>Pricing</h1>
  ...
</div>
</template>
```