seo

Author: btholt

lessons/01-the-first-section/A-intro.md

@@ -1,3 +1,19 @@
+---
+description: >-
+  Join Brian Holt in 'Intermediate React v6' for Frontend Masters to gain
+  expertise in server-side and performance capabilities of React. This
+  comprehensive course requires prior knowledge from 'The Complete Intro to
+  React v9' and focuses on leveraging React's inherent tools for web
+  development, making it ideal for anyone with a foundational understanding of
+  React. Brian Holt, an experienced React developer, provides hands-on projects
+  and detailed instructions, enhancing your React skills and knowledge.
+keywords:
+  - Intermediate React
+  - Frontend Masters
+  - Brian Holt
+  - React Server Components
+  - JavaScript
+---
 > 🚨 You do not need to watch/read previous versions of this course, Intermediate React. This is just the sixth revision of the course. You **do** need to have taken [the Complete Intro to React v9][v9]
 
 Hello! And welcome to the sixth revision of Intermediate React as taught for Frontend Masters! This is a total rewrite of the Intermdiate curriculum and I am so excited for you to take it. Previous versions of this course focused on the ecosystem around React and [v5][v5] of this course is still valid for that: Tailwind, TypeScript, Redux, and other things. Beyond that, Frontend Masters has individual courses on all of those things as taught by other instructions. [Check out the learning path][path] to find all of those.

lessons/01-the-first-section/B-my-setup.md

@@ -1,3 +1,17 @@
+---
+description: >-
+  Explore Brian Holt's 'Intermediate React v6' course, providing insights on the
+  use of Node.js, preferred development tools like Visual Studio Code, and a
+  balanced perspective on AI integration in coding. Learn how these tools and
+  technologies enhance the process of writing efficient React Server Components,
+  as taught for Frontend Masters.
+keywords:
+  - React
+  - Node.js
+  - Visual Studio Code
+  - AI in coding
+  - Brian Holt
+---
 ## Node.js
 
 You'll need to have a Node.js version installed, and preferably something after v20.16. I wrote this course with 22.14 but it should be fairly future-proof.

lessons/01-the-first-section/C-react-19.md

@@ -1,3 +1,19 @@
+---
+description: >-
+  Explore the new features of React 19, focusing on React Server Components,
+  which enable partial server-side rendering of React components, a feature that
+  facilitates safe database querying directly within React. Discover insights
+  into this cutting-edge technology, stable since 2023 and actively developed
+  since 2022, with guidance from expert Brian Holt. Ideal for developers aiming
+  to leverage the latest advancements in React functionality.
+keywords:
+  - React 19
+  - React Server Components
+  - Brian Holt
+  - web development
+  - JavaScript
+  - server-side rendering
+---
 Let's talk about [React 19][19].
 
 It came out at the tail end of 2024 officially but really had publicly been worked on [since late 2022][rfc]. So it's been worked nearly 3 years and been stable and in production (via Next.js as well as internally at Facebook) since [late 2023][next].

lessons/02-react-render-modes/A-client-side-react.md

@@ -1,5 +1,18 @@
 ---
-title: "Client-Side React"
+title: Client-Side React
+description: >-
+  Learn about React Server Components in the 'Intermediate React v6' course by
+  Brian Holt on Frontend Masters. Understand the trade-offs of React Server
+  Components and different React rendering methods, including client-side,
+  server-side, and static site generation. Explore the benefits and limitations
+  of these approaches and optimize your web development skills using advanced
+  React techniques.
+keywords:
+  - React
+  - Server Components
+  - Brian Holt
+  - Frontend Masters
+  - web development
 ---
 
 > 💡 This course assumes you have taken or at least understand the concepts in [The Complete Intro to React v9][v9]. If you don't, please go back and take that one first, this will make a lot more sense.

lessons/02-react-render-modes/B-static-site-generation.md

@@ -1,3 +1,19 @@
+---
+description: >-
+  Learn how to implement Static Site Generation (SSG) using React and Next.js,
+  with expert guidance from Brian Holt in the Intermediate React v6 course at
+  Frontend Masters. Discover the simplicity of generating static web pages for
+  content-heavy sites and explore how this streamlined approach can expedite
+  course creation without sacrificing quality. Enhance your knowledge on using
+  modern frameworks like Astro and Next.js for optimized static content
+  delivery.
+keywords:
+  - Static Site Generation
+  - Next.js
+  - React
+  - Brian Holt
+  - Frontend Masters
+---
 > Fun fact: this very website is rendered via SSG with Next.js! [See the code here][code]
 
 Static Site generation allows you to use React to generate a fully static site. This is perfect for sites like blogs or course materials (like this site) where it's just a bunch of static pages that don't need the interactivity of React. It's enough to render this out once - it doesn't need the interactivity. The result is the end user is just shipped fully rendered flat HTML files - it doesn't need a server or client to do it. The developer can still add some interactivity via React, but minimally so.

lessons/02-react-render-modes/C-server-side-rendering.md

@@ -1,3 +1,19 @@
+---
+description: >-
+  Discover how to enhance your React app's performance with server-side
+  rendering (SSR) as demonstrated by Brian Holt in the Intermediate React v6
+  course for Frontend Masters. Learn how to implement SSR by hand to optimize
+  time to interactive and first meaningful paint, along with considerations for
+  complexity and device performance. Explore practical examples of SSR app setup
+  with Fastify, Vite, and React, including handling browser-only scripts and
+  overcoming hydration errors.
+keywords:
+  - React
+  - server-side rendering
+  - SSR
+  - Brian Holt
+  - Frontend Masters
+---
 > 💡 The previous version of this course does a pretty in-depth dive on migrating a client-side React app to being server-side render. [Check it out here][v5]. Nothing has changed so if you want more SSR magic ✨ this still 100% applies.
 
 When you have a client-side React request, the general flow looks like this:

lessons/03-rscs-without-a-framework/A-intro-to-react-server-components.md

@@ -1,3 +1,20 @@
+---
+description: >-
+  In the Intermediate React v6 course by Brian Holt from Frontend Masters,
+  explore the concept of React Server Components (RSCs) and their role in
+  rendering components on the server for improved performance and security.
+  Learn how RSCs differ from server-side rendering and how to implement them
+  using frameworks like Next.js. The course also involves building a messaging
+  app to practice hand-coding with RSCs.
+keywords:
+  - React
+  - Frontend Masters
+  - Brian Holt
+  - server components
+  - Next.js
+  - web development
+  - RSC
+---
 We've talked about client-side React apps (no server), static site generation apps (server runs only at compile time), and server-side rendered app (server renders initial page but then client does the rest). Now we're going to talk about react server components which involves the server even more.
 
 ## What are RSCs?

lessons/03-rscs-without-a-framework/B-rsc-dependencies.md

@@ -1,5 +1,19 @@
 ---
-title: "RSC Dependencies"
+title: RSC Dependencies
+description: >-
+  Learn how to set up a React Server Components project from scratch using
+  Webpack and Babel, with guidance from Brian Holt's Intermediate React v6
+  course on Frontend Masters. This comprehensive guide includes configuring
+  Webpack, Babel, and Fastify to run RSCs efficiently without additional
+  frameworks, enhancing your web development skills.
+keywords:
+  - React Server Components
+  - Webpack
+  - Babel
+  - Brian Holt
+  - Frontend Masters
+  - RSC
+  - web development
 ---
 
 There's a lot to getting this set up by hand, but bear with me, and I promsie at the end of this you're going to understand RSCs at a depth that allows you to make trade-offs of when to use them and when to avoid them.

lessons/03-rscs-without-a-framework/C-server-and-client-components.md

@@ -1,3 +1,17 @@
+---
+description: >-
+  Learn how to build a simple React app with server and client components using
+  React Server Components as taught by Brian Holt in Intermediate React v6 for
+  Frontend Masters. Discover the differences between client and server
+  components, and how to implement async functions in server components for
+  efficient rendering.
+keywords:
+  - React
+  - Server Components
+  - Brian Holt
+  - Frontend Masters
+  - JavaScript
+---
 Let's put together the most simple React app so that we can render it using our newly-created framework.
 
 Let's make a directory, `src` and put a file in there a file called App.jsx

lessons/03-rscs-without-a-framework/D-the-rsc-server.md

@@ -1,3 +1,20 @@
+---
+description: >-
+  Explore how to use Fastify to serve a React app with server components by
+  setting up a Node.js server that handles both client-side and server-side
+  rendering. Written by Brian Holt for Frontend Masters, this guide offers
+  step-by-step integration of React and Fastify, demonstrating the use of React
+  Flight Protocol and reinforcing React's modular framework for advanced web
+  development.
+keywords:
+  - React
+  - Fastify
+  - Node.js
+  - Brian Holt
+  - server components
+  - web development
+  - React Flight Protocol
+---
 So now we have a React app ready to be served to clients. Let's write a quick Fastify server to do this. I just chose Fastify because I like it; there's no reason you couldn't do Express, Restify, or any other API framework for Node.js.
 
 Let's create a `server` directory in the root directory of our project. Put in there a main.js file and put in there