\n","I want to leave the note that inline script tags might be a bit unpleasant for CSP. Maybe the runtime could use ","MutationObserver"," (will polling fallback) instead to detect new chunks added and move them to the correct location.","Also why using ","
"," instead of ",""," tags?","RoyalIcing reacted with thumbs up emoji","@sokra The actual implementation actually embeds the runtime in the first inline script too. Our primary goal is to support cases where you’ve never visited the site before at all. In that case, referring to an external runtime with a second request/round trip can leave a lot of cycles on the floor when it could’ve been inserted earlier. Ofc, you probably do a secondary round trip for CSS anyway but the scripting is slower.","We could play with an optional CSP friendly mode using an external script too, as an option, but I don’t think it’ll be the primary one. Unless there’s a CSP friendly way of setting up the MutationObserver in a single request.","Regarding “div hidden” instead of “fragment”. The original plan was to use fragment but we’ve actually used this strategy at FB for a long time already and ran experiments on each approach. Turns out that hidden divs perform better in these scenarios. Something about preparing as much as possible of those internal nodes as early as possible but not triggering layout. We can always reevaluate if the calculus changes though.","5","bvaughn, bboydflo, itsdouges, Daniel15, and salazarm reacted with thumbs up emoji","5 reactions","We should however have the script nonce be configurable for CSP purposes.","We could possibly use an inline mutation observer script to avoid the overhead of multiple script tags. It's a bit tricky because we have to figure out where in the document we are and such and avoid listening to everything in the doc. The have some convention in the IDs for picking up react things.","2","Ephem and mormahr reacted with thumbs up emoji","2 reactions","Therefore the system is carefully designed to yield deterministic output regardless of when I/O.","Can you show a few pointers of how it comes up in the code? Where does this decision show up?","\n\n reviewed\n\n\n ","View reviewed changes","\n packages/react-server/src/ReactDOMServerFormatConfig.js\n\n \n Outdated\n ","}","// This object is used to lazily reuse the ID of the first generated node, or assign one.","// This is very specific to DOM where we can't assign an ID to.","There was a problem hiding this comment.","Choose a reason for hiding this comment","\n The reason will be displayed to describe this comment to others. Learn more.\n ","\n Choose a reason\n ","Spam","Abuse","Off Topic","Outdated","Duplicate","Resolved","Hide comment","What do you mean we can't assign an ID?","I probably had a meeting interrupt finishing the sentence.","This part isn't implemented yet but the gist is that I plan to reuse the id if the user rendered a DOM node like ","
",". We can't override it since the user provided it and expects it to be there.","We could insert a hidden node but this is deep in the tree. We try hard not to mess with the DOM structure so that css pseudo selectors can keep working etc. That's a little fragile with suspense anyway since it can be either fallback or content and both can exist at the same time. So maybe that's not such a big concern.","In fact, I don't know how to do it if there are zero DOM nodes. Eg ","",". In that case we'll need to inject a dummy dom node anyway.","There's no efficient api for querying a comment.","The ideal would be if Suspense was a reified fragment or ",""," custom tag. It would make everything much simpler but then we have the issue with css and display: contents et al not working properly in browsers.","gaearon reacted with thumbs up emoji","packages/react-server/src/ReactFizzServer.js","type Segment = {"," status: 0 | 1 | 2 | 3,"," parentFlushed: boolean, // typically a segment will be flushed by its parent, except if its parent was already flushed","Do I understand correctly that \"parent flushed\" is when we've already emitted the fallback for the content of this segment?","Not quite. If you have a large tree we can emit the parent tree without all the leaves. We can leave holes in there.","In that case the parent has already been flushed.","Normally a child gets flushed by its parent being flushed but in this case that can't happen so we need to schedule it to be emitted later.","packages/react-server/src/ReactDOMServerFormatConfig.js","\n Comment on lines\n\n \n +99\n to \n +100\n \n\n "," // TODO: This needs to be contextually aware and switch tag since not all parents allow for spans like"," //