Test article for hydration issue FAB-43747
Description of Bug
New logic has been introduced to insert ad placeholders based on character counts. This logic also has certain "blocking elements" which will not get placeholders put right before them. Some of these elements are html elements, e.g. ol, ul and some are React Components, e.g. Brightcove, MediaPlayer or AdSlot. Because of minification: a process which makes our code smaller with tricks like renaming variables to have shorter names e.g. Brightcove to f . However, minification is intelligent and will not rewrite inside strings. So something like or Brightcove.name will always get updated, but const x = 'Brightcove'; will be left unchanged.
The minified bundle is only served to the client. The server runs 'un-minified' code. When the code then runs on the client, it will count things differently, because it won't find any of the blocking elements which were specified as full names of React Components. But the client still needs to 'hydrate' the server-generated HTML with the client-side functionality. You can imagine the server generating a partially completed jigsaw puzzle and then sending down the remaining pieces for the user's browser to fill in, with some instructions. For speed, Hydration instructions use simple references like "the tenth div inside the article" rather than more complex selectors like "the image with this url". Therefore, when the mismatched ad placeholders run on the client side, and divs get inserted at different places than they would have been on the server, this throws off the hydration logic and it starts putting its jigsaw back together with the pieces in the wrong place. In this case, we're seeing bits of the brightcove component getting placed inside the image component.
Replication Conditions
It should be replicable anywhere that you have a few React components inside an article, but only when the character counts line up right. I'm adding some filler text to push the brightcove and image below into the 2nd half of the piano area.
2. Prepare for slow cooking the night before
If you're short on time in the morning, prepare everything you need for your slow-cooked meal the night before, put it into the slow-cooker dish, cover and store in the fridge overnight. Ideally the dish should be as close to room temperature as possible, so get it out of the fridge when you wake up and leave it for 20 minutes before turning the cooker on. If you need to heat your dish beforehand, then put the ingredients in a different container and transfer them in the morning.
2. Prepare for slow cooking the night before
If you're short on time in the morning, prepare everything you need for your slow-cooked meal the night before, put it into the slow-cooker dish, cover and store in the fridge overnight. Ideally the dish should be as close to room temperature as possible, so get it out of the fridge when you wake up and leave it for 20 minutes before turning the cooker on. If you need to heat your dish beforehand, then put the ingredients in a different container and transfer them in the morning.
For example here where we have a brightcove video nearby to an image.
2. Prepare for slow cooking the night before
If you're short on time in the morning, prepare everything you need for your slow-cooked meal the night before, put it into the slow-cooker dish, cover and store in the fridge overnight. Ideally the dish should be as close to room temperature as possible, so get it out of the fridge when you wake up and leave it for 20 minutes before turning the cooker on. If you need to heat your dish beforehand, then put the ingredients in a different container and transfer them in the morning.
2. Prepare for slow cooking the night before
If you're short on time in the morning, prepare everything you need for your slow-cooked meal the night before, put it into the slow-cooker dish, cover and store in the fridge overnight. Ideally the dish should be as close to room temperature as possible, so get it out of the fridge when you wake up and leave it for 20 minutes before turning the cooker on. If you need to heat your dish beforehand, then put the ingredients in a different container and transfer them in the morning.
Authors
bio biobiobio
