Weird: wrong images get loaded

[elbotho]

In this table the colors are different from the same table in the old design:
https://de.serlo.org/community/hilfe-bearbeitung/richtlinien-inhalten/bilder-grafiken#SerloFarben

[inyono]

Seems like SSR is okay, but something is wrong on the client side (or caching, who knows): If I make a hard reload, I notice that the correct colors are shown shortly and then change to the wrong colors.

[inyono]

Yep, deactivating JS has the same effect.

[Entkenntnis]

Interestingly, this does not happen when you open the page directly in the frontend.

correct: https://frontend.serlo.now.sh/community/hilfe-bearbeitung/richtlinien-inhalten/bilder-grafiken#SerloFarben

wrong (frontend enabled): https://de.serlo.org/community/hilfe-bearbeitung/richtlinien-inhalten/bilder-grafiken#SerloFarben

That's quite weird ...

[inyono]

You need to check https://frontend.serlo.org/community/hilfe-bearbeitung/richtlinien-inhalten/bilder-grafiken#SerloFarben since that is the production domain (frontend.serlo.now.sh uses staging). But still the same behavior ^^. Probably should to check the table renderer if we do anything that might trip React up (key handling, I don't know)

[elbotho]

I think it's curious that it's the only render function in article-renderer.tsx that explicitly sets the key:

export function renderTable({ attributes = {}, children = null }: any) {
  const { key, ...otherAttribs } = attributes
  return (
    <TableWrapper key={key}>
      <StyledTable>
        <tbody {...otherAttribs}>{children}</tbody>
      </StyledTable>
    </TableWrapper>
  )
}

@Entkenntnis do you think this would make sense to test?
I don't see what attributes would need to go to tbody anyway.
(currently attributes only contains the key)

export function renderTable({ attributes = {}, children = null }: any) {
  // const { key, ...otherAttribs } = attributes
  return (
    <TableWrapper {...attributes}>
      <StyledTable>
        <tbody>{children}</tbody>
      </StyledTable>
    </TableWrapper>
  )
}

[elbotho]

PR here: #272

[elbotho]

Okay, so strange. I'm out out of ideas.

[inyono]

Mh... for one thing: we don't let React handle stuff but rather do it ourselves (e.g. we create JSX nodes ourselves instead of rendering react components; also passing down keys ourselves). This looks like an anti-pattern to me...

[Entkenntnis]

I found a possible cause: Diffing the HTML obtained from frontend.serlo.org and de.serlo.org reveals that Cloudflare cleans up the HTML and especially removes all comments.

These comments are there to help react to hydrate the page (see facebook/react#14725 (comment)), because the comments are missing, the hydrating leads to dom mutations (which it shouldn't!) and a corrupt dom.

On the left is the cloudflare result, you can see the comments missing from the table:

@inyono Do we have "minify html" activated? This could cause this issue.

[inyono]

Nice catch! This seems to be the problem, indeed. I deactivated the Minifier from Cloudflare and purged the cache for that page. Seems to work now.

[elbotho]

nice!