Very large ESI are truncated

[julienlary-dkt]

Hello,

First thanks for you work and in particular this implementation of ESI with React (and Next.js in my case).

I am currently facing an issue with contents that have very large size (about 2mb), generated HTML from ESI is missing some ending tags.
I have a Content component that is used to create the HOC (ContentESI). This component calls an API to get its data in getInitialProps. The return of API is complete, the props in window.__REACT_ESI__ are complete. Content component is using many others components to render parts of the API response.
When I render Content without ESI, generated HTML is complete. But when I use the HOC, generated HTML is missing data at the end (so in my case, closing tags).

My knowledge in Node.js & React are very limited, I don't know where to start. I think that it is an issue with Stream, Transform or renderToNodeStream (based on my reading of server.tsx).

I have done tests with:

• Node.JS 12.x, React 16.x, Next.js 9.5, React ESI 0.3
• Node.JS 12.x, React 17.x, Next.js 9.5, React ESI 0.3
• Node.JS 14.x, React 16.x, Next.js 9.5, React ESI 0.3
• Node.JS 12.x, React 17.x, Next.js 9.5, React ESI 0.3
• Node.JS 12.x, React 16.x, Next.js 9.5, React ESI 0.2

[dunglas]

Hi,

Thanks for reporting! Could you, if possible, provide a reproducer? This would help a lot (a failing test would be the best).

[MaximeMenotti]

Hi,
Thank you for your attention to this issue! We managed to reproduce the problem on this repository.

Initially (on our personal project) no error was thrown but the behavior was the same, the end of the content was missing.

I hope this repository will be enough.

[dunglas]

Thank you for the reproducer! I'll take a look, but I cannot provide an ETA for a fix yet. (Any help on this would be very welcome of course.)

[jamyouss]

Hi,

First of all, @dunglas nice work and thank you to share this with the community.

I have the same kind of issue. When the initial props return a big array of object (around 100 object), the component is not rendered.
If i comment the line where the script is written:

res.write(
    `<script>window.__REACT_ESI__ = window.__REACT_ESI__ || {}; window.__REACT_ESI__['${fragmentID}'] = ${encodedProps};document.currentScript.remove();</script>`
  );

then the component is rendered.

Any update on the problem ? Have an idea ?
How can i help you to fix the issue

[jamyouss]

@dunglas may be the script part should be streamed in case of huge props. What do you think ?

[jamyouss]

making a PR to fix it => #21