Understanding the server/client boundary in react-router

🚀 Dive into the essential concepts of client and server boundaries in web development! Learn crucial principles about web app architecture and understand where programming logic should live. Master the boundaries between server and client-side code to build more robust applications. 👨‍💻 👍 Don't forget to like, comment, and subscribe for more episodes in this series! Join our coding community and let's build something amazing together. https://github.com/forge42dev/base-stack 📌 Stay Connected: Twitter: https://twitter.com/AlemTuzlak GitHub: https://github.com/AlemTuzlak Company Github: https://github.com/forge-42 ⏱️ Timestamps: 00:00 - intro 00:38 - explaining what we're going to do 01:32 - accessing the window object 03:10 - window is not defined issue explained and how it works 05:24 - why initializing something on the window object fails 06:28 - dealing with poly-envs and accessing window and process conditionally 08:19 - Causing hydration mismatches between server/client with guards 09:26 - Side-effect imports/modules 14:57 - why understanding side-effects is important and how to do it properly 16:00 - useEffect magic 17:03 - ClientOnly component and how it works 18:14 - understanding how React hydration works 21:45 - understanding the .server/.client convention and using a .client example 24:18 - making sure that the component is 100% rendered only on the client 25:16 - .server convention 26:36 - understanding how react-router bundles server/client bundles 30:08 - DON'T USE BARREL FILES 33:59 - understanding the difference between the server and the client 36:19 - recap of all the concepts 38:53 - final thoughts 🔖 Tags: Vite, react router Vite, web development, frontend development, coding tutorial, open source, coding community, react router, react router tutorial