[
  {
    "start": 0.08,
    "end": 2.969,
    "text": "React clearly has seen better days."
  },
  {
    "start": 3.02,
    "end": 5.79,
    "text": "I mean, not from a usage point of view."
  },
  {
    "start": 5.82,
    "end": 8.77,
    "text": "It's getting more usage than ever before."
  },
  {
    "start": 8.78,
    "end": 12.68,
    "text": "Of course,\nalso because it's the default JavaScript"
  },
  {
    "start": 12.74,
    "end": 16.49,
    "text": "AI. Build some project with AI\nand you'll get React and"
  },
  {
    "start": 16.49,
    "end": 19.03,
    "text": "Next.js.\nI've talked about this in another episode."
  },
  {
    "start": 19.04,
    "end": 22.92,
    "text": "But it's seen easier days with less hate"
  },
  {
    "start": 23.06,
    "end": 26.58,
    "text": "and heat. I mean,\nover the last couple of weeks,"
  },
  {
    "start": 26.64,
    "end": 30.18,
    "text": "major vulnerabilities.\nOne of them being so severe that"
  },
  {
    "start": 30.19,
    "end": 33.87,
    "text": "attackers could execute code on your\nserver if you were affected."
  },
  {
    "start": 33.88,
    "end": 37.73,
    "text": "By the way,\nmake sure you patch your React"
  },
  {
    "start": 37.76,
    "end": 41.3,
    "text": "If you're using Next.js\nor some other framework"
  },
  {
    "start": 41.34,
    "end": 43.0,
    "text": "components, you're likely affected."
  },
  {
    "start": 43.02,
    "end": 46.699,
    "text": "But the amount of hate is really a bit"
  },
  {
    "start": 46.88,
    "end": 49.82,
    "text": "staggering to me because there\nare things you can"
  },
  {
    "start": 49.86,
    "end": 53.74,
    "text": "criticize. But then there\nare also some things that are"
  },
  {
    "start": 53.78,
    "end": 57.36,
    "text": "really not that bad\nthat some people make them seem."
  },
  {
    "start": 57.38,
    "end": 60.22,
    "text": "But let's dive a bit deeper. What\nare we talking about?"
  },
  {
    "start": 60.24,
    "end": 63.94,
    "text": "It was actually in 2020, so yeah, five"
  },
  {
    "start": 64.0,
    "end": 67.9,
    "text": "years ago, uh, almost to the day, uh,\nfive years ago,"
  },
  {
    "start": 67.94,
    "end": 70.38,
    "text": "that React server components\nwere introduced."
  },
  {
    "start": 70.4,
    "end": 72.28,
    "text": "What's the idea behind React server\ncomponents?"
  },
  {
    "start": 72.3,
    "end": 75.8,
    "text": "Well, the idea back then and,\nand still today was and"
  },
  {
    "start": 75.92,
    "end": 79.78,
    "text": "is that you could render React components\non a"
  },
  {
    "start": 79.79,
    "end": 83.41,
    "text": "server,\nbut not in the sense of server-side"
  },
  {
    "start": 83.46,
    "end": 87.32,
    "text": "initially and then that's it.\nBut instead that you would also render"
  },
  {
    "start": 87.4,
    "end": 91.33,
    "text": "them for page updates.\nIf a user interacts with a page,"
  },
  {
    "start": 91.36,
    "end": 95.29,
    "text": "clicks a link,\nyou would render the new page on the"
  },
  {
    "start": 95.34,
    "end": 99.32,
    "text": "well and send that to the client,\nand also react to a couple of other"
  },
  {
    "start": 99.34,
    "end": 102.74,
    "text": "things. And at the same time, of course,\ndon't just have static"
  },
  {
    "start": 102.9,
    "end": 106.76,
    "text": "HTML,\nbut a single page application kind of"
  },
  {
    "start": 106.8,
    "end": 109.28,
    "text": "the server,\nbut then fully interactive on the client."
  },
  {
    "start": 109.32,
    "end": 113.06,
    "text": "In order to make this work,\nthey had to invent their own protocol"
  },
  {
    "start": 113.14,
    "end": 116.6,
    "text": "because the idea was not to render HTML\nand send that"
  },
  {
    "start": 116.76,
    "end": 120.74,
    "text": "HTML,\nbut instead to exchange a payload from"
  },
  {
    "start": 120.76,
    "end": 124.62,
    "text": "to client and vice versa\nthat does describe the current state of"
  },
  {
    "start": 124.66,
    "end": 128.1,
    "text": "application, the component tree, and\nthat therefore is more complex"
  },
  {
    "start": 128.16,
    "end": 131.8,
    "text": "than just raw data sent through JSON or"
  },
  {
    "start": 131.88,
    "end": 135.58,
    "text": "raw HTML because you need both the page\nstructure"
  },
  {
    "start": 135.6,
    "end": 139.2,
    "text": "and the state, the data.\nSo that's React server"
  },
  {
    "start": 139.28,
    "end": 143.16,
    "text": "components. Due to this complexity,\nit took some time for them"
  },
  {
    "start": 143.2,
    "end": 146.72,
    "text": "to take off. Remember, they\nwere initially announced in"
  },
  {
    "start": 146.9,
    "end": 150.66,
    "text": "2020 and then the first time you could\nactually really use"
  },
  {
    "start": 150.7,
    "end": 154.36,
    "text": "them was in 2022, so two years"
  },
  {
    "start": 154.46,
    "end": 158.24,
    "text": "later with the release of Next.js 13,"
  },
  {
    "start": 158.6,
    "end": 162.54,
    "text": "which gave us a beta version of the app\nrouter, which, of course, nowadays is the"
  },
  {
    "start": 162.64,
    "end": 166.109,
    "text": "standard router if you're building a new\nNext.js application."
  },
  {
    "start": 166.12,
    "end": 169.6,
    "text": "For a very long time,\nyou could actually only use React server"
  },
  {
    "start": 169.62,
    "end": 173.13,
    "text": "components in Next.js and\nthat brought its own"
  },
  {
    "start": 173.18,
    "end": 176.549,
    "text": "problems and some fair share of"
  },
  {
    "start": 176.58,
    "end": 180.16,
    "text": "criticism because it felt like React\nwas kind of"
  },
  {
    "start": 180.26,
    "end": 183.96,
    "text": "Next.js.\nThere was such a close connection"
  },
  {
    "start": 184.02,
    "end": 187.91,
    "text": "feel like you could reuse React without\nNext.js,"
  },
  {
    "start": 187.92,
    "end": 191.72,
    "text": "at least if you wanted cutting edge\nfeatures like React server"
  },
  {
    "start": 191.74,
    "end": 194.23,
    "text": "components.\nIt's also not just React server"
  },
  {
    "start": 194.26,
    "end": 198.04,
    "text": "We also have like the other side,\nserver actions, which in the end"
  },
  {
    "start": 198.08,
    "end": 201.74,
    "text": "allow you to submit a form\nand behind the scenes an HTTP"
  },
  {
    "start": 201.78,
    "end": 205.56,
    "text": "request would be sent to your server,\nwould be handled there, and you would get"
  },
  {
    "start": 205.68,
    "end": 209.51,
    "text": "back an updated payload\nthat updates your React application."
  },
  {
    "start": 209.52,
    "end": 212.81,
    "text": "So an updated React server component\nif you wanna call it like"
  },
  {
    "start": 212.86,
    "end": 216.44,
    "text": "this.\nThat's in a nutshell how it works"
  },
  {
    "start": 216.58,
    "end": 220.24,
    "text": "blend backend and frontend code,\nserver-side and"
  },
  {
    "start": 220.3,
    "end": 224.24,
    "text": "client-side code because you have React on\nboth ends and there"
  },
  {
    "start": 224.28,
    "end": 227.74,
    "text": "is this magic going on where you have"
  },
  {
    "start": 227.82,
    "end": 231.44,
    "text": "components being rendered on the server,\nthere's special kind of payloads being"
  },
  {
    "start": 231.54,
    "end": 233.7,
    "text": "sent back and forth, server actions."
  },
  {
    "start": 233.72,
    "end": 237.56,
    "text": "And of course,\nthe vulnerabilities I talked about,"
  },
  {
    "start": 237.57,
    "end": 241.37,
    "text": "these are related to React server\ncomponents specifically to that"
  },
  {
    "start": 241.4,
    "end": 245.26,
    "text": "protocol,\nthe React Flight Protocol as it's called,"
  },
  {
    "start": 245.3,
    "end": 248.08,
    "text": "for communicating between client\nand server."
  },
  {
    "start": 248.12,
    "end": 252.09,
    "text": "However, what's really important is\nthat it's not"
  },
  {
    "start": 252.16,
    "end": 256.1,
    "text": "per se that blending of client-side"
  },
  {
    "start": 256.14,
    "end": 258.529,
    "text": "and server-side code that's a problem\nhere."
  },
  {
    "start": 258.6,
    "end": 262.1,
    "text": "Only indirectly, if you will,\nbecause of course that protocol was"
  },
  {
    "start": 262.14,
    "end": 266.03,
    "text": "invented to be able to blend these two\nends."
  },
  {
    "start": 266.03,
    "end": 269.76,
    "text": "But when it comes to being able to fetch\nsome"
  },
  {
    "start": 269.78,
    "end": 273.56,
    "text": "data on the server\nand then render a dynamic page"
  },
  {
    "start": 273.7,
    "end": 277.48,
    "text": "based on that,\nthat's in the end how PHP always"
  },
  {
    "start": 277.58,
    "end": 281.42,
    "text": "worked, right? So back\nwhen we built very primitive,"
  },
  {
    "start": 281.46,
    "end": 285.26,
    "text": "simple PHP apps,\nyou could reach out to a database"
  },
  {
    "start": 285.28,
    "end": 288.95,
    "text": "back some HTML code based on that.\nAnd now with React and React server"
  },
  {
    "start": 288.98,
    "end": 290.56,
    "text": "components, it's kind of the same."
  },
  {
    "start": 290.6,
    "end": 294.45,
    "text": "You have that mixture of client-side\nand server-side, but of course it's a"
  },
  {
    "start": 294.48,
    "end": 298.32,
    "text": "bit more than that because unlike PHP,\nwith React"
  },
  {
    "start": 298.34,
    "end": 302.28,
    "text": "the idea is that you have a fully\ninteractive client-side application"
  },
  {
    "start": 302.4,
    "end": 306.02,
    "text": "powered by JavaScript\nand that's why this extra protocol"
  },
  {
    "start": 306.3,
    "end": 309.68,
    "text": "because it doesn't stop after this initial\ntransfer from"
  },
  {
    "start": 309.82,
    "end": 313.8,
    "text": "server to client.\nBut from time to time I see this image pop"
  },
  {
    "start": 313.86,
    "end": 317.68,
    "text": "up,\nwhich is from an early presentation of"
  },
  {
    "start": 317.76,
    "end": 320.98,
    "text": "and I believe its support in Next.js."
  },
  {
    "start": 321.0,
    "end": 324.32,
    "text": "And this slide is often used by people to"
  },
  {
    "start": 324.38,
    "end": 328.28,
    "text": "criticize React and how insecure it is\nand I want to be very clear, and you"
  },
  {
    "start": 328.38,
    "end": 332.26,
    "text": "probably heard it before,\nnothing about this code on this slide"
  },
  {
    "start": 332.42,
    "end": 336.29,
    "text": "is insecure.\nThis SQL statement runs on the server"
  },
  {
    "start": 336.44,
    "end": 338.93,
    "text": "there is no SQL injection going on here."
  },
  {
    "start": 338.98,
    "end": 342.85,
    "text": "This SQL tagged literal here makes sure\nthat all"
  },
  {
    "start": 342.92,
    "end": 346.68,
    "text": "the input is sanitized. So this\nis secure even though it"
  },
  {
    "start": 346.72,
    "end": 350.62,
    "text": "might look a bit weird\nand it might look like we're reaching out"
  },
  {
    "start": 350.66,
    "end": 354.37,
    "text": "SQL database in our React component,\nwe're not actually doing"
  },
  {
    "start": 354.4,
    "end": 358.37,
    "text": "that. This is a server action step\nwhich is triggered on the server,"
  },
  {
    "start": 358.38,
    "end": 362.29,
    "text": "the magic is that this function,\nthis server action is invoked"
  },
  {
    "start": 362.34,
    "end": 365.54,
    "text": "on your behalf invisibly behind the scenes"
  },
  {
    "start": 365.88,
    "end": 369.26,
    "text": "because there is an HTTP request sent to\nthe"
  },
  {
    "start": 369.32,
    "end": 372.24,
    "text": "server to then,\nwell invoke the code there."
  },
  {
    "start": 372.26,
    "end": 375.66,
    "text": "And that again is using\nthat special payload, the React Flight"
  },
  {
    "start": 375.82,
    "end": 379.42,
    "text": "Protocol. With all\nthat out of the way what I will say though"
  },
  {
    "start": 379.48,
    "end": 383.15,
    "text": "with all these features,\nwith React server components and"
  },
  {
    "start": 383.2,
    "end": 387.1,
    "text": "server actions and with that client\nand server-side"
  },
  {
    "start": 387.24,
    "end": 391.15,
    "text": "mixture that's going on here,\nReact has gotten"
  },
  {
    "start": 391.18,
    "end": 394.9,
    "text": "more complex.\nAnd especially for less experienced"
  },
  {
    "start": 394.96,
    "end": 398.72,
    "text": "developers it can definitely be harder to\ntell which"
  },
  {
    "start": 398.74,
    "end": 402.7,
    "text": "code runs where.\nNow I will say you will get errors if you"
  },
  {
    "start": 402.74,
    "end": 406.7,
    "text": "put code that can only run on the server\ninto your client-side"
  },
  {
    "start": 406.74,
    "end": 409.96,
    "text": "code or vice versa. You can't"
  },
  {
    "start": 410.32,
    "end": 413.95,
    "text": "really mess this up, at least not\nthat easily I'd"
  },
  {
    "start": 414.0,
    "end": 417.64,
    "text": "say. But of course I understand\nthat this can be"
  },
  {
    "start": 417.68,
    "end": 421.5,
    "text": "confusing.\nIt's definitely an easier mental model"
  },
  {
    "start": 421.58,
    "end": 425.49,
    "text": "have an API, a REST API, a GraphQL API,\nwhatever,"
  },
  {
    "start": 425.49,
    "end": 429.31,
    "text": "which is a standalone application\nand then you have your"
  },
  {
    "start": 429.34,
    "end": 432.81,
    "text": "detached client-side single page\napplication and they"
  },
  {
    "start": 432.84,
    "end": 436.44,
    "text": "communicate through HTTP requests\nwhich you explicitly"
  },
  {
    "start": 436.58,
    "end": 440.42,
    "text": "send with help of the Fetch API\nor with help of a library like"
  },
  {
    "start": 440.86,
    "end": 444.24,
    "text": "React Query.\nThis is definitely the easier mental"
  },
  {
    "start": 444.56,
    "end": 448.5,
    "text": "model.But there is a reason why React\nserver components"
  },
  {
    "start": 448.64,
    "end": 451.92,
    "text": "were invented,\nif you wanna call it like this."
  },
  {
    "start": 451.96,
    "end": 455.64,
    "text": "They were invented because, of course,\nwith that other"
  },
  {
    "start": 455.65,
    "end": 459.25,
    "text": "mental model, with that other approach,\nyou always had two"
  },
  {
    "start": 459.3,
    "end": 462.909,
    "text": "applications. You had your backend server,\nyou had your client side"
  },
  {
    "start": 463.56,
    "end": 466.86,
    "text": "server or application. That, I would say,\ngets a bit"
  },
  {
    "start": 466.96,
    "end": 470.61,
    "text": "easier with React server components\nbecause we have just"
  },
  {
    "start": 470.7,
    "end": 474.44,
    "text": "one full stack application here.\nKind of the idea behind"
  },
  {
    "start": 474.52,
    "end": 477.96,
    "text": "Next.js even before React server\ncomponents."
  },
  {
    "start": 478.019,
    "end": 481.98,
    "text": "Next.js kind of made sure that this API,\nplus"
  },
  {
    "start": 482.039,
    "end": 485.65,
    "text": "single page application,\nthat this thing was wired up"
  },
  {
    "start": 485.65,
    "end": 489.349,
    "text": "properly and you could deploy it as one\napplication even before"
  },
  {
    "start": 489.36,
    "end": 493.31,
    "text": "React server components. But\nthat shows us that there was this"
  },
  {
    "start": 493.38,
    "end": 497.1,
    "text": "need, this demand for having full stack"
  },
  {
    "start": 497.14,
    "end": 501.06,
    "text": "applications that kind of blend both\nbecause that is what Next.js"
  },
  {
    "start": 501.08,
    "end": 503.789,
    "text": "did even before React server components."
  },
  {
    "start": 503.8,
    "end": 507.7,
    "text": "Because even before that,\nyou had special functions where you would"
  },
  {
    "start": 507.82,
    "end": 511.419,
    "text": "put your codes that would be fetched to\nprepopulate your"
  },
  {
    "start": 511.539,
    "end": 514.94,
    "text": "server side rendered, uh,\ncomponents on the server."
  },
  {
    "start": 514.98,
    "end": 517.5,
    "text": "We had that before React server\ncomponents."
  },
  {
    "start": 517.539,
    "end": 520.88,
    "text": "React server components came because there\nwas a"
  },
  {
    "start": 521.02,
    "end": 523.88,
    "text": "need for this kind of application."
  },
  {
    "start": 523.96,
    "end": 527.56,
    "text": "If you don't like them,\nif you don't want them, and there"
  },
  {
    "start": 527.579,
    "end": 531.52,
    "text": "that, if you don't like\nthat mental model of blending"
  },
  {
    "start": 531.66,
    "end": 534.99,
    "text": "server and client-side code somehow,\nyou don't have to."
  },
  {
    "start": 535.06,
    "end": 538.96,
    "text": "You can still build your standalone"
  },
  {
    "start": 539.02,
    "end": 542.54,
    "text": "single page applications with React,\nwith any"
  },
  {
    "start": 542.66,
    "end": 545.46,
    "text": "router or any libraries of your choice."
  },
  {
    "start": 545.48,
    "end": 549.46,
    "text": "Could be React Router,\ncould be TanStack Router,"
  },
  {
    "start": 549.5,
    "end": 553.06,
    "text": "but that doesn't really make sense because\nNext.js is really more of a full stack"
  },
  {
    "start": 553.12,
    "end": 556.819,
    "text": "framework.\nAnd then you can have your detached API,"
  },
  {
    "start": 556.88,
    "end": 560.31,
    "text": "API, your GraphQL API, whatever it is."
  },
  {
    "start": 560.36,
    "end": 564.17,
    "text": "You can still do that if\nthat makes more sense for"
  },
  {
    "start": 564.3,
    "end": 568.0,
    "text": "you, if you prefer this approach.\nAnd I will agree"
  },
  {
    "start": 568.01,
    "end": 571.819,
    "text": "that React got more complex over all these"
  },
  {
    "start": 571.86,
    "end": 575.079,
    "text": "years with Suspense,\nReact server components, Server"
  },
  {
    "start": 575.28,
    "end": 579.14,
    "text": "Actions, all the optimization hooks that"
  },
  {
    "start": 579.18,
    "end": 582.67,
    "text": "exist in there, the React compiler,\nwhich is there to make"
  },
  {
    "start": 582.72,
    "end": 586.24,
    "text": "optimizing simpler again.\nThat can all feel very"
  },
  {
    "start": 586.319,
    "end": 590.029,
    "text": "overwhelming. I mean,\nI remember a time where React was"
  },
  {
    "start": 590.04,
    "end": 593.8,
    "text": "pretty straightforward.\nYou had your class-based components for"
  },
  {
    "start": 593.84,
    "end": 597.63,
    "text": "components,\nyour function components for stateless,"
  },
  {
    "start": 597.68,
    "end": 601.05,
    "text": "It was relatively easy and simple."
  },
  {
    "start": 601.079,
    "end": 604.84,
    "text": "You had other problems back then, uh,\nfor example, that you had to"
  },
  {
    "start": 604.92,
    "end": 608.589,
    "text": "switch between class-based\nand functional components,"
  },
  {
    "start": 608.88,
    "end": 612.47,
    "text": "refactor your components\nif you suddenly needed state, so that"
  },
  {
    "start": 612.5,
    "end": 616.46,
    "text": "great. But yeah, it\nwas probably a simpler mental model."
  },
  {
    "start": 616.74,
    "end": 620.66,
    "text": "I totally get this point, and it\nis fair to criticize this."
  },
  {
    "start": 620.67,
    "end": 624.2,
    "text": "It's also important to point out though\nthere are alternatives."
  },
  {
    "start": 624.26,
    "end": 628.12,
    "text": "Of course you might not have them\nif you're in a company that uses React,"
  },
  {
    "start": 628.14,
    "end": 631.94,
    "text": "like many companies probably do, but\nif you're not, you've got"
  },
  {
    "start": 631.95,
    "end": 635.9,
    "text": "alternatives. If you\nare somewhere where you're forced to use"
  },
  {
    "start": 635.94,
    "end": 639.19,
    "text": "React, it's probably worth noting that"
  },
  {
    "start": 639.22,
    "end": 642.74,
    "text": "despite all this complexity, and again,\nthere are good"
  },
  {
    "start": 642.78,
    "end": 646.5,
    "text": "reasons why things got more complex, React"
  },
  {
    "start": 646.54,
    "end": 650.1,
    "text": "typically does still save you lots of\nheadaches"
  },
  {
    "start": 650.16,
    "end": 653.3,
    "text": "because it is built to do many"
  },
  {
    "start": 653.38,
    "end": 656.86,
    "text": "optimizations for you.\nSome complexity comes out of"
  },
  {
    "start": 656.92,
    "end": 660.72,
    "text": "that urge to, to optimize stuff for you"
  },
  {
    "start": 660.76,
    "end": 664.54,
    "text": "or to load and render parts of the page\nefficiently, and"
  },
  {
    "start": 664.6,
    "end": 668.04,
    "text": "these are ultimately benefits you get out\nof React or"
  },
  {
    "start": 668.56,
    "end": 671.28,
    "text": "out of using React, at least potentially."
  },
  {
    "start": 671.319,
    "end": 675.2,
    "text": "Nonetheless, there definitely\nare things to criticize about React, and"
  },
  {
    "start": 675.3,
    "end": 679.24,
    "text": "I too hope that we won't see more\nand more and"
  },
  {
    "start": 679.36,
    "end": 683.319,
    "text": "more complexity being layered on top of\nReact."
  },
  {
    "start": 683.34,
    "end": 686.68,
    "text": "But at the same time,\nall these discussions about how"
  },
  {
    "start": 686.76,
    "end": 690.12,
    "text": "insecure it is because it blends client\nserver side code like"
  },
  {
    "start": 690.18,
    "end": 693.7,
    "text": "this, I really can't hear them anymore."
  },
  {
    "start": 693.72,
    "end": 697.64,
    "text": "Because, in my opinion, that\nis not really the main problem"
  },
  {
    "start": 697.68,
    "end": 700.46,
    "text": "here and definitely not the root of these"
  },
  {
    "start": 700.52,
    "end": 702.02,
    "text": "vulnerabilities."
  }
]