# 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 (`useEffect`) or a client-side callback (`onClick`, `onChange`, etc).

When calling methods from the [`useCroct`](/reference/sdk/react/api/hooks/use-croct), the operations must be performed within the [`useEffect`](https://react.dev/reference/react/useEffect) hook or client-side callbacks, such as `onClick` or `onChange`.

For example, if you want to [track a goal](/reference/sdk/react/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.jsx**

```jsx
import {useCroct} from '@croct/plug-react';

export function PricingPage() {
const croct = useCroct();

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

return (
  <div>
    <h1>Pricing</h1>
    ...
  </div>
);
}
```

To fix this, refactor the tracking operation to run inside a `useEffect` hook:

**PricingPage.jsx**

```diff
+import {useEffect} from 'react';
import {useCroct} from '@croct/plug-react';

export function PricingPage() {
const croct = useCroct();

-  croct.track('goalCompleted', {goalId: 'pricing-page-view'});
+  useEffect(() => {
+    croct.track('goalCompleted', {goalId: 'pricing-page-view'});
+  }, [croct]);

return (
  <div>
    <h1>Pricing</h1>
    ...
  </div>
);
}
```