🚀 𝗨𝗻𝗹𝗼𝗰𝗸𝗶𝗻𝗴 𝗟𝗶𝗴𝗵𝘁𝗻𝗶𝗻𝗴-𝗙𝗮𝘀𝘁 𝗜𝗻𝘁𝗲𝗿𝗮𝗰𝘁𝗶𝘃𝗶𝘁𝘆: 𝗥𝗲𝘃𝗼𝗹𝘂𝘁𝗶𝗼𝗻𝗶𝘇𝗲 𝗬𝗼𝘂𝗿 𝗨𝘀𝗲𝗿 𝗘𝘅𝗽𝗲𝗿𝗶𝗲𝗻𝗰𝗲 𝘄𝗶𝘁𝗵 𝗦𝗺𝗮𝗿𝘁 𝗛𝘆𝗱𝗿𝗮𝘁𝗶𝗼𝗻✨

magine you have a server-rendered application that builds the HTML for what you see when you navigate around. Once the server is done creating that HTML, which also packs in the needed CSS and JSON data for a smooth experience, it sends everything down to your device. Because the server has already done the heavy lifting, your device can quickly read the HTML and show it on the screen, giving you a fast First Contentful Paint!

𝗕𝘂𝘁 𝗵𝗲𝗿𝗲’𝘀 𝘁𝗵𝗲 𝗰𝗮𝘁𝗰𝗵: while server rendering speeds up how quickly you see the content, it doesn’t always make the website interactive right away. The JavaScript needed for those interactive features hasn’t loaded yet. So, even though buttons and links look clickable, they can’t be interacted with until that JavaScript is ready. This moment of waiting is called 𝗵𝘆𝗱𝗿𝗮𝘁𝗶𝗼𝗻. It’s when React goes through the existing elements in the DOM (the structure of the webpage) and connects the right JavaScript to them.

During this waiting period, users might feel stuck in what’s known as the “𝘂𝗻𝗰𝗮𝗻𝗻𝘆 𝘃𝗮𝗹𝗹𝗲𝘆.” The UI looks alive and ready for action, but it’s not functional yet, which can be pretty frustrating. It’s like seeing a busy store but finding the doors locked!

Getting those elements fully ready for interaction can take some time because the JavaScript needs to be loaded and processed first. A smarter approach is to 𝗵𝘆𝗱𝗿𝗮𝘁𝗲 𝘁𝗵𝗲 𝗽𝗮𝗴𝗲 𝗽𝗿𝗼𝗴𝗿𝗲𝘀𝘀𝗶𝘃𝗲𝗹𝘆, meaning we can hydrate individual parts of the UI as they’re needed instead of doing it all at once. This way, the application can only request the essential JavaScript required for immediate actions, making everything feel smoother and quicker for the user.

𝗥𝗲𝘀𝗼𝘂𝗿𝗰𝗲: https://www.patterns.dev