DOM events do not get attached while using SSR

[liqwid]

Hi, I have the following problem:

Links of react-router won't fire it's inner callback - handleClick.

1. setAccessor gets called
2. node.addEventListener(name, eventProxy, ...) gets called
3. After executing node.addEventListener in debug mode I check node in chrome DevTools Elements panel and it says that there are no event listeners
4. getEventListeners(node) (chrome API) displays the event listener
5. After the whole render there is no event bound to the node

My guess is that node does not get rendered, and the node rendered during SSR remains in it's place.

Here's my server config:

  match({ routes, history }, (error, redirectLocation, renderProps) => {
    if (error) {
      response.status(500).send(error.message);
    } else if (redirectLocation) {
      response.redirect(302, redirectLocation.pathname + redirectLocation.search);
    } else if (renderProps) {
      // You can check renderProps.components or renderProps.routes for
      // your "not found" component or route respectively, and send a 404 as
      // below, if you're using a catch-all route.

      const html = render(
        <Provider store={store}>
          <RouterContext {...renderProps} />
        </Provider>
      );
      response.status(200).send(html);
    } else {
      response.status(404).send('Not found');
    }
  });
}

render returns renderToString embeded into html template

If you have any idea why can such problem appear that would be great. Thanks!

[developit]

Hi @Swordsoul - what versions of Preact and preact-compat are you seeing this with? It might be a rendering bug in 6.0.2 (#297). It's currently my top priority.

[liqwid]

Used both preact 6.0.0 and 5.6.0, preact-compat 2.3.0.
I render on the client to the same container that already has a server-rendered tree.

When I render on a client to an empty container everything works correctly.

[developit]

Are you using a Higher Order Component at the root? If so that does sound a little bit like #296

6.1 will more aggressively reuse the DOM on initial render, that might solve this issue for you.

[developit]

6.1 is out if you're still seeing this issue. I have a hunch it'll fix it for you :)

[liqwid]

No luck getting it to work yet - Serverside rendering returns and epmty structure:

<div id="app-container">
  <div>
    <div>
    </div>
  </div>
</div>

Used preact 6.1.0 and preact-compat 3.4.2

I will send update if I find out anything

[developit]

Sorry to pester, just curious if this is still an issue for you!

[liqwid]

I'm sorry but I don't have enough time right now to focus on upgrading preact to 6.1. I hope I can find some time soon to resolve the issue and have client pick up server-rendered pages. If you don't mind I'd rather keep this one opened until solution is found

[developit]

Works for me! Should be a clean upgrade to 6.3.0 but I understand it's not always the right time 👍

[liqwid]

Upgraded to 6.3.0 seamlessly although the problem is still present: <Link> components that arrived with server-rendered bundle do not get rerendered/updated.

[developit]

@Swordsoul Are these the <Link> component from React Router (2.x)? Thanks!

[liqwid]

from React Router v. 3.0.0-alpha.3

[developit]

Good to know.

[developit]

Fairly certain this is fixed as of preact@7, which you can install via npm i -S preact@beta. Let me know if you have a spare minute to give it a whirl, thanks!

[developit]

Closing due to inactivity and it is very likely fixed, but please re-open if there's still an issue in 7.1!

[liqwid]

This can be closed;
Although I still experience the issue with 7.1 I don't have enough time to explore it further. If the same issue occurs again I can share some of my source code that reproduces the issue.

[developit]

Good to know. Definitely don't hesitate to reopen or recreate the issue if you come across a repro.