Differences in DOM insertion results depending on whether SPA mode is used

[wonu]

I created a simple repo with following steps:

1. npx create-remix@latest --template remix-run/remix/templates/spa
2. added DOM insertion code in entry.client.tsx:

function thirdPartyFunction() {
  const div = document.createElement('div');
  div.innerHTML = 'HELLO';
  document.body.insertAdjacentElement('beforeend', div);
}

thirdPartyFunction();

In SPA mode, a div element is briefly inserted into the body but disappears after hydration.
In contrast, switching to unstable_ssr: true makes the div element persist.

What causes this discrepancy?
Additionally, should a solution like remix-hydration-fix be implemented to ensure stable DOM insertion in SPA mode?

[kiliman]

Interesting. In SPA mode, it appears that hydration completely blows out the inner HTML of body.

I was able to get the div to show up by adding the function to startTransitions with a setTimeout so it runs after hydration.

startTransition(() => {
  hydrateRoot(
    document,
    <StrictMode>
      <RemixBrowser />
    </StrictMode>
  );  
  // wait for hydration to finish, then add the div
  setTimeout(thirdPartyFunction, 10);
});

https://stackblitz.com/edit/stackblitz-starters-qa5ubk?file=app%2Fentry.client.tsx

[wonu]

Can I do this before or regardless of hydration?

[cliffordfajardo]

I haven't played around much with modifying our adding custom logic to entry.client.tsx file

@kiliman @wonu - is entry.client.tsx file a place to add custom DOM logic like this?
Or is it recommended to do it elsewhere in the app like at the component level & make use of useRef to manipulate the DOM
https://react.dev/reference/react/useRef#manipulating-the-dom-with-a-ref

I haven't seen many custom entry.client.tsx files floating around or too much discussions about it

[kiliman]

entry.client.tsx executes before Remix hydrates, so you can do pretty much anything you want. If you're manipulating the DOM, you'll want to wait until hydration finishes. But if you're just adding global event handlers, initializing client libraries, etc., you should be able to do that at any time.

[wonu]

In my case, I had a requirement that the third-party function must be called outside of the React component.
It seems that a similar approach may be required for GA. The conventional method of using dangerouslySetInnerHTML is no longer functional in SPA mode.

[wonu]

New Layout Export in v2.7.0 elegantly solves above mentioned DOM insertion and inline script issues.