Fix vica hydration bug

[adriangohjw]

Problem

VICA widget sometimes loading sometimes not

Error log shows https://react.dev/errors/418?args%5B%5D=

Suspected it's due to it being rendered SSG and causing incocrrect hydration error

Solution

Breaking Changes

• Yes - this PR contains breaking changes
  • Details ...
• No - this PR is backwards compatible

Bug Fixes:

tested on STG site and works

• explicitly declare use client
• explicitly declare for it not to be rendered during SSG

Tests

1. rebuild a site with VICA (https://test-isomer-vica-staging.isomer.gov.sg/)
2. try spamming reloading multiple times (soft reload, hard reload, hard reload with empty cache etc.) - the VICA widget should show up in the bottom right consistently EVERY time

[datadog-opengovsg]

Datadog Report

Branch report: fix-vica-hydration-bug
Commit report: a5fc4ae
Test service: isomer-studio

✅ 0 Failed, 257 Passed, 36 Skipped, 44.9s Total Time
➡️ Test Sessions change in coverage: 1 no change

[seaerchin]

lgtm! jsut to double check why this bug occurs and how this fixes:

1. previously, we rendered both VicaStylesheet + VicaWidget on the server
2. when we sent it to the client side, chat.js altered some portions of the html? (hence causing the bug)
3. how, we mark Widget as use client so that on the server, it doesn't do anything
4. on client side now, it's initially null (so matches server)
5. fetches VicaWidget since window is defined (technically this is the rsc script which then re-renders)
6. VicaWidget loads in properly

if this isnt true, please dismiss the review!

[seaerchin]

nit: prefer !window

[adriangohjw]

lgtm! jsut to double check why this bug occurs and how this fixes:

1. previously, we rendered both VicaStylesheet + VicaWidget on the server
2. when we sent it to the client side, chat.js altered some portions of the html? (hence causing the bug)
3. how, we mark Widget as use client so that on the server, it doesn't do anything
4. on client side now, it's initially null (so matches server)
5. fetches VicaWidget since window is defined (technically this is the rsc script which then re-renders)
6. VicaWidget loads in properly

if this isnt true, please dismiss the review!

im not exactly very sure why this is happening because the integration doc for VICA seems to differ for each agency 😢

my observation is that on staging site, VICA widgets actually rendered before disappearing.

my suspicion is that during SSG, VicaWidget was indeed rendered during SSG and modifed the DOM after the initial render, leading to differences between the server-rendered HTML and the client-side DOM during hydration.