Installing the Freshpaint Javascript SDK with Server-Side Rendering (SSR) + React

Installing the Freshpaint Javascript SDK with the use of server-side rendering framework, such as Remix JS, + React hydration

Due to the way server-side rendering with React and the Freshpaint SDK work, you may see console errors when attempting to install Freshpaint to your app. In order to avoid this error, the loading of the script must be delayed as such that React has time to hydrate fully first. This can be achieved by loading the script in a useEffect() hook.

Normally, React takes the component representing the app and a DOM node indicating where in the page the app will exist and attaches a running app to that empty node.

In server-side rendering, the server returns a ready-to-render html page and Javascript scripts required to make the page interactive. React then hydrates, meaning that it works in a virtual DOM to match the existing content returned from the server with what the application renders. This increases efficiency by supplanting the need to manipulate the DOM unnecessarily.

The Freshpaint SDK may load a number of additional scripts subsequently after installation depending on factors such as destination integrations. Due to this, you will see console errors in your Remix or other server-side rendering app as the scripts are being loaded prior to full React hydration. This means the expected content returned from the server will not match the virtual content React works in which results in the error.