#react server components

Subscribe
Mastering React Server Components and Server Actions in React 19
React Summit US 2024React Summit US 2024
150 min
Mastering React Server Components and Server Actions in React 19
Featured Workshop
Maurice de Beijer
Maurice de Beijer
Calling all React developers! Join us for an immersive 4-hour workshop diving deep into React Server Components and Server Actions. Discover how these game-changing technologies are revolutionizing web development and learn how to harness their full potential to build lightning-fast, efficient applications.

Explore the world of React Server Components, seamlessly blending server-side rendering with client-side interactivity for unmatched performance and user experience. Dive into React Server Actions to see how they combine client-side interactivity with server-side logic, making it easier to develop interactive applications without traditional API constraints.

Get hands-on experience with practical exercises, real-world examples, and expert guidance on implementing these technologies into your projects. Learn essential topics such as the differences between Server and Client Components, optimizing data fetching, passing data effectively, and maximizing performance with new React hooks like useActionState, useFormStatus and useOptimistic.

Whether you're new to React or a seasoned pro, this workshop will equip you with the knowledge and tools to elevate your web development skills. Stay ahead of the curve and master the cutting-edge technology of React 19. Don't miss out - sign up now and unleash the full power of React!
RSCs In Production: 1 Year Later
React Summit 2024React Summit 2024
24 min
RSCs In Production: 1 Year Later
This Talk explores the experience of shipping server components in production and highlights the benefits and challenges of using Server Components in Next.js apps. The Talk discusses the deployment of UploadThing and the use of AppRouter for safe production usage. It delves into the implementation of different layouts, data fetching, and code centralization for improved performance. The Talk also covers the use of server components for performance optimization and latency handling. Additionally, it explores the use of Edge and Lambda for partial pre-rendering and the challenges faced with webpack performance and hydration. Overall, the Talk emphasizes the benefits and challenges of working with Server Components in Next.js applications.
And Now You Understand React Server Components
React Summit 2024React Summit 2024
27 min
And Now You Understand React Server Components
Top Content
In this Talk, Kent C. Dodds introduces React Server Components (RSCs) and demonstrates how to build them from scratch. He explains the process of integrating RSCs with the UI, switching to RSC and streaming for improved performance, and the benefits of using RSCs with async components. Dodds also discusses enhancements with streaming and server context, client support and loaders, server component rendering and module resolution, handling UI updates and rendering, handling back buttons and caching, and concludes with further resources for diving deeper into the topic.
Exploring React Server Component Fundamentals
React Day Berlin 2023React Day Berlin 2023
21 min
Exploring React Server Component Fundamentals
Top Content
Watch video: Exploring React Server Component Fundamentals
This Talk introduces React Server Components (RSC) and explores their serialization process. It compares RSC to traditional server-side rendering (SSR) and explains how RSC handles promises and integrates client components. The Talk also discusses the RSC manifest and deserialization process. The speaker then introduces the Waku framework, which supports bundling, server, routing, and SSR. The future plans for Waku include integration with client state management libraries.
React Server Components
React Day Berlin 2023React Day Berlin 2023
27 min
React Server Components
Watch video: React Server Components
React server components solve the problem of interrupting user interfaces caused by CPU-bound or network-bound web applications. They allow for read-only content to be rendered on the server and interactive elements to be shipped to the client, reducing code shipped and improving performance. Server-side rendering and server-side fetching improve the user experience by reducing delays and flash of unstyled content. Soft navigation with server components enables re-rendering without hard navigation, and using frameworks like Next.js helps with debugging and deployment challenges.
A Practical Guide for Migrating to Server Components
React Advanced 2023React Advanced 2023
28 min
A Practical Guide for Migrating to Server Components
Top Content
Watch video: A Practical Guide for Migrating to Server Components
React query version five is live and we'll be discussing the migration process to server components using Next.js and React Query. The process involves planning, preparing, and setting up server components, migrating pages, adding layouts, and moving components to the server. We'll also explore the benefits of server components such as reducing JavaScript shipping, enabling powerful caching, and leveraging the features of the app router. Additionally, we'll cover topics like handling authentication, rendering in server components, and the impact on server load and costs.
Simplifying Server Components
React Advanced 2023React Advanced 2023
27 min
Simplifying Server Components
Top Content
Watch video: Simplifying Server Components
React server components simplify server-side rendering and provide a mental model of components as pure functions. Using React as a library for server components allows for building a basic RSC server and connecting it to an SSR server. RSC responses are serialized virtual DOM that offload code from the client and handle interactivity. The client manifest maps serialized placeholders to real components on the client, enabling dynamic rendering. Server components combine the best of classic web development and progressive enhancement, offering the advantage of moving logic from the client to the server.
Server Components: The Epic Tale of Rendering UX
React Summit 2023React Summit 2023
26 min
Server Components: The Epic Tale of Rendering UX
Top Content
Watch video: Server Components: The Epic Tale of Rendering UX
This Talk introduces server components in React, which provide an intermediate format for rendering and offer advantages for both client-side and server-side rendering. Server components reduce bundle size on the client and improve search engine optimization. They abstract the rendering process, allowing for faster rendering and flexibility in choosing where to render components. While server components are still in the experimental stage, Next.js is a good starting point to try them out.
Batteries Included Reimagined - The Revival of GraphQL Yoga
GraphQL Galaxy 2021GraphQL Galaxy 2021
33 min
Batteries Included Reimagined - The Revival of GraphQL Yoga
Envelope is a powerful GraphQL plugin system that simplifies server development and allows for powerful plugin integration. It provides conformity for large corporations with multiple GraphQL servers and can be used with various frameworks. Envelope acts as the Babel of GraphQL, allowing the use of non-spec features. The Guild offers GraphQL Hive, a service similar to Apollo Studio, and encourages collaboration with other frameworks and languages.
React Server Components: Elevating Speed, Interactivity, and User Experience
React Summit US 2024React Summit US 2024
20 min
React Server Components: Elevating Speed, Interactivity, and User Experience
Watch video: React Server Components: Elevating Speed, Interactivity, and User Experience
My name is Aurora, a web developer from Norway. Today, I'll be teaching you how to elevate speed, interactivity, and user experience with React components. I'll be coding a project task manager and improving it using Next.js, Prisma, Azure SQL, and Tailwind CSS. We will review the code, starting with the important layout component. We will also learn how to improve navigation and data fetching, enhance visual stability and user experience, fix search functionality, and add category filters with loading states. Additionally, we will explore the use of React 19 hooks to enhance interactivity. Finally, we will optimize rendering and achieve improved Lighthouse scores for better performance. Overall, this Talk covers a range of techniques and tools to enhance React projects and deliver a better user experience.
Let's Build Suspense 🥁
React Summit US 2024React Summit US 2024
20 min
Let's Build Suspense 🥁
Hi, my name is Julian and I am super excited to be speaking at React Summit this year. Today, I will be talking about Suspense on the server and its importance in React server components. React server components allow us to differentiate between static and dynamic components, improving performance and user experience. Suspense improves performance by introducing streaming and out-of-order streaming. We can implement suspense on the server by creating a suspended object to store the suspended children and swapping out the loading state for the actual content using custom elements. Multiple suspense boundaries can be used to render individual loading states for different sections, improving the user experience.
Securing Server-Rendered Applications – Next.js Case
React Advanced 2024React Advanced 2024
20 min
Securing Server-Rendered Applications – Next.js Case
Welcome to Securing Server on the Red Applications in the Context of Next.js talk. Next.js brings new challenges for front-end developers with its server-side rendering technologies. We need to consider security in Next.js applications and address the common vulnerabilities listed in the OWASP top 10. Server-side request forgery (SSRF) is a common vulnerability that allows attackers to exploit the server's privileges. Security logging and monitoring failures are critical, as proper setup is necessary to detect attacks. Being cautious with npm packages, addressing identification and authentication failures, and updating vulnerable components are crucial for application security. Database seeding, security headers, and permissions policies are important for application security. It's important to reduce the criticality of an attack, check strict transport security header, and prevent security issues by following best practices. Understanding CSRF vulnerability, image injection vulnerability, and cryptographic failures is important. Broken access control can result in unauthorized access and should be mitigated. Thank you for watching this talk and stay safe!
GraphQL in the World of React Server Components
React Advanced 2024React Advanced 2024
25 min
GraphQL in the World of React Server Components
Jerel Miller
Alessia Bellisario
2 authors
Welcome to React Advanced 2024. Gerald Miller and Alessia Bellisario discuss the pairing of GraphQL and server components and its advantages. GraphQL combined with server components has been widely adopted, allowing for initial rendering on the server and optimizing performance. React Server Components introduce a new primitive for rendering on the server and executing server-only code. GraphQL serves as a unifying layer between microservices. Data fetching in client components involves setting up an Apollo Client instance and provider. Best practices include separating data, avoiding overlap between server and client components, and using the preload query component. Optimize network requests in React using suspense boundaries and avoiding multiple requests. Fragments in GraphQL help optimize data fetching for UI components. Use fragments and the defer directive to stream data incrementally. Add suspense boundaries, useSuspenseFragment hook, and deferred directives to optimize data fetching in React components. Combine React server components and GraphQL for streaming multi-part responses and enhancing user experiences.
State-of-the-art React Server Components Developer Tooling
React Advanced 2024React Advanced 2024
27 min
State-of-the-art React Server Components Developer Tooling
Redwood Studio is a companion app for building full-stack JavaScript, TypeScript web applications. It offers features like OpenTelemetry monitoring, GraphQL tools, Prisma ORM integration, SSR preview, and React Server components (RSC) cache support. The Render Routes feature provides a graph of components visible on a page, helping users understand the rendering locations. The RSC payload and analysis feature allows for analyzing the timeline and responses received by the app. The payload and the rendered output can be mapped together to understand component size and structure. Redwood aims to be a full-stack framework that simplifies development and supports both current GraphQL users and beginners. It also emphasizes the flexibility and power of React Server components. Redwood aspires to be the Laravel or Ruby on Rails of JavaScript, offering quick project setup and high productivity.
How an RSC Framework Enables Server Actions
React Advanced 2024React Advanced 2024
25 min
How an RSC Framework Enables Server Actions
I'm Daisuke Kato, an open source developer. I've developed React libraries like Zest, Jota, and Valsio. Now, I'm working on a new React framework, Waku. It's a team project that started a year and a half ago. Recently, we added support for server functions. This talk is about server functions and React Server Components (RSC), which allows running React on a server. RSC includes server components and functions and can render components at build time. It leverages serialization provided by a React library. Server components are an extension that allows rendering on the server and merging with client components. Let's explore the implementation with code. RSC allows the use of server and client components. The server serializes the client component into the RST payload. A client reference acts like a URL and is used to retrieve the actual client component. Creating a client reference involves code transformation. Server functions allow the client component to call a function on the server. Server function and client component are both functions that need to be serializable. Creating server references has multiple ways. The framework transforms user code for different situations. Waku now supports server functions. Supporting server function is a challenging task, but we've done it. Thank you for your talk.
Enhancing React Ecosystems with Observability: A Deep Dive into React with OpenTelemetry
React Summit 2024React Summit 2024
22 min
Enhancing React Ecosystems with Observability: A Deep Dive into React with OpenTelemetry
The Talk discusses the difference between monitoring and observability, highlighting the focus of OpenTelemetry on generating and processing data. It explores the concept of traces and span IDs in distributed tracing and the experimental nature of OpenTelemetry in the browser. The Talk also touches on the complexities of React with server components and demonstrates how distributed tracing can connect traces for different services. The process of adding OpenTelemetry to Next.js and analyzing application and browser traces is explained, along with the importance of context propagation. The Talk concludes with insights on analyzing fetch calls, errors, and the storage limitations of traces.
Introducing Waku: The Minimal React Framework
React Summit 2024React Summit 2024
19 min
Introducing Waku: The Minimal React Framework
I will talk about my recent project, Waku, and my React libraries - Rustand, Jotai, and Valisio. Waku is a React framework that depends heavily on React Server Components (RSC) and aims to make capabilities like code splitting, routing, data fetching, and SSR available to developers. It uses React components based on RSC for reusability and provides a fast experience with VIT, hot reload, and hot module replacement. Waku is under active development, aiming for V1 alpha and exploring Waku-specific features. Deploying Waku apps on Vercel is supported, and a plugin system is in consideration for extended support.
AsyncLocalStorage vs. React Context
React Summit 2024React Summit 2024
8 min
AsyncLocalStorage vs. React Context
Today's Talk explores the concepts of async local storage and React context. Async local storage is a useful API for retrieving values from a parent component without passing them through multiple components. React context, on the other hand, allows for the creation of context instances in parent components and consumption in child components. The Talk also discusses server actions in React, their limitations, and the use of async local storage in server actions, with an example Cloudflare worker handling web requests and authentication.
Solving i18n for React Server Components
React Summit 2024React Summit 2024
7 min
Solving i18n for React Server Components
The Talk discusses internationalization for server components and the challenge of loading translations efficiently. It suggests using import statements in JavaScript to optimize message loading and eliminate the need for namespaces. Tree shaking and tools like Paraglide.js can help minimize message delivery and simplify the process. Overall, the Talk emphasizes the importance of efficient internationalization practices in building multilingual apps.
Fetch Once, Render Everywhere: React Server Components in Expo Router
React Summit 2024React Summit 2024
28 min
Fetch Once, Render Everywhere: React Server Components in Expo Router
Top Content
React Native and ExpoRouter provide a powerful way to build client-side applications that run on both web and native platforms. Server-driven UI and React Server Components offer dynamic rendering and A-B testing opportunities. Server rendering in native apps allows for the integration of movies and enhances the user and developer experience. The Talk includes live demos showcasing interactions with Spotify and native contacts, as well as currency conversion. Server rendering and React Server Components enable the generation of interactive components and bring modern state and AI to every platform.
React Server Components Unleashed: A Deep Dive into Next-Gen Web Development
React Day Berlin 2023React Day Berlin 2023
149 min
React Server Components Unleashed: A Deep Dive into Next-Gen Web Development
Workshop
Maurice de Beijer
Maurice de Beijer
Get ready to supercharge your web development skills with React Server Components! In this immersive, 3-hour workshop, we'll unlock the full potential of this revolutionary technology and explore how it's transforming the way developers build lightning-fast, efficient web applications.
Join us as we delve into the exciting world of React Server Components, which seamlessly blend server-side rendering with client-side interactivity for unparalleled performance and user experience. You'll gain hands-on experience through practical exercises, real-world examples, and expert guidance on how to harness the power of Server Components in your own projects.
Throughout the workshop, we'll cover essential topics, including:- Understanding the differences between Server and Client Components- Implementing Server Components to optimize data fetching and reduce JavaScript bundle size- Integrating Server and Client Components for a seamless user experience- Strategies for effectively passing data between components and managing state- Tips and best practices for maximizing the performance benefits of React Server Components
Bringing React Server Components to React Native
React Day Berlin 2023React Day Berlin 2023
29 min
Bringing React Server Components to React Native
Top Content
Watch video: Bringing React Server Components to React Native
React Server Components (RSC) offer a more accessible approach within the React model, addressing challenges like big initial bundle size and unnecessary data over the network. RSC can benefit React Native development by adding a new server layer and enabling faster requests. They also allow for faster publishing of changes in mobile apps and can be integrated into federated super apps. However, implementing RSC in mobile apps requires careful consideration of offline-first apps, caching, and Apple's review process.
Building Reusable Server Components in NextJS
React Summit US 2023React Summit US 2023
88 min
Building Reusable Server Components in NextJS
Workshop
Will Bishop
Mettin Parzinski
2 authors
React continues to evolve their beta capability, React Server Components, and they're continuing to further develop them in partnership with frameworks like NextJS.In this workshop, attendees will learn what React Server Components are, how to effectively build and use them in NextJS, and focus on one of the major advantages of React/NextJS: reusability through components.We will also cover related beta technologies enabled by the `app` directory, such as nested layouts and server actions (alpha/experimental capability).Join us for this hands-on, 120 minute workshop!Technologies:
React, JavaScript/Typescript, NextJS, Miro
The Gateway to Backend: A Frontend Developer's Guide to Full-Stack Development
React Summit US 2023React Summit US 2023
160 min
The Gateway to Backend: A Frontend Developer's Guide to Full-Stack Development
Top Content
WorkshopFree
Amy Dutton
Amy Dutton
This workshop will guide you through the product development life cycle of creating a real-world web application. You will learn about React Server Components, building a design system within Storybook, and using frontend development to approach becoming a full-stack developer. The workshop will cover increasing confidence in your application with unit tests and implementing authentication and authorization. You'll have the opportunity to work through product features and examine a real-world RedwoodJS project, gaining valuable experience in real-world product development. RedwoodJS makes it simple to approach full-stack development, and this workshop will give you the skills you need to create your own real-world web applications.
Server Components to the Rescue: Turbocharging and Empowering Your React Apps with Style
React Summit US 2023React Summit US 2023
16 min
Server Components to the Rescue: Turbocharging and Empowering Your React Apps with Style
Watch video: Server Components to the Rescue: Turbocharging and Empowering Your React Apps with Style
Welcome to the server components to the rescue, turbo charging and empowering your React application with style. React server components were introduced three years ago, providing an easy-to-maintain and quick-to-build solution with improved metrics and user experience. By using server-side rendering, there is no need to download code to the client at startup. Server components reduce the cost of attractions and provide a unified solution. The future of React server components includes improving state synchronization, allowing server components to re-render in response to state changes, and enabling fluid UI updates without page refresh.
Advanced Application Deployment Patterns with React Server Components (feat. a DIY RSC Framework)
React Summit US 2023React Summit US 2023
104 min
Advanced Application Deployment Patterns with React Server Components (feat. a DIY RSC Framework)
Top Content
WorkshopFree
 Greg Brimble
Greg Brimble
The developer ecosystem is always moving fast and this year has proved no exception. React Server Components can offer a significant improvement to developer experience and to application performance. But I think it's fair to say that this new server-first paradigm can be tricky to wrap your head around!In the first half of this workshop, we'll explore React Server Components from the ground-up: building our own mini meta-framework to help us understand how RSCs work. We'll discover exactly what is produced by an RSC build and we'll connect those pieces together to form a full application.Next, we'll deploy it! Cloudflare have also had a busy year too — Smart Placement, in particular, is a new technology that we've developed which fits the RSC model perfectly. We'll explore why that makes sense for our workshop app, and we'll actually deploy it onto the Cloudflare Developer Platform.Finally, we'll build out our app a little further, using D1 (our serverless SQL database) to really show off the React Server Component's power when combined with Smart Placement.You should come away from this workshop with a greater understanding of how React Server Components work (both behind-the-scenes and also how you as a developer can use them day-to-day), as well as insight into some of the new deployment patterns that are now possible after recent innovations in the platform space.
React Server Components from Scratch
React Summit US 2023React Summit US 2023
29 min
React Server Components from Scratch
Watch video: React Server Components from Scratch
This Talk introduces React Server Components and provides a step-by-step guide on building and rendering them. It explores the capabilities of server components, including interactivity and streaming. The Talk also covers the process of incorporating client-side rendering and the challenges of bundling and mapping client components. Additionally, it discusses the importance of supporting React Server Components and the ongoing efforts to integrate them with different bundlers.
“Microfrontends” for Mobile in React Native
React Advanced 2023React Advanced 2023
24 min
“Microfrontends” for Mobile in React Native
Top Content
Watch video: “Microfrontends” for Mobile in React Native
Micro frontends are an architectural style where independent deliverable frontend applications compose a greater application. They allow for independent development and deployment, breaking down teams into feature verticals. React Native's architecture enables updating the JavaScript layer without going through the app store. Code Push can be used to deploy separate JavaScript bundles for each micro frontend. However, there are challenges with managing native code and dependencies in a micro frontend ecosystem for mobile apps.
Hydration, Islands, Streaming, Resumability… Oh My!
React Advanced 2023React Advanced 2023
26 min
Hydration, Islands, Streaming, Resumability… Oh My!
Watch video: Hydration, Islands, Streaming, Resumability… Oh My!
Today's Talk introduces the concepts of hydration and off islands, explores the benefits of islands for enhancing server-side rendered HTML with client-side JavaScript, discusses the lazy approach of re-zoomability and its advantages over traditional hydration, highlights the use of resumability and concurrent React for improved rendering performance, examines the features and concerns of React server components, touches on the co-location of client and server code, and explores future trends in rendering and navigation. The Talk also reflects on past ideas and emphasizes the importance of identifying core metrics for performance optimization.
The State of The State In The App Router
React Advanced 2023React Advanced 2023
32 min
The State of The State In The App Router
Watch video: The State of The State In The App Router
React has improved state management with built-in hooks like useState, useReducer, and useRef. Redux can still be used but it's recommended to avoid global state. Zustand is an alternative state manager that allows for easy creation of hooks. Proper architecture is important for accessing the global store. State managers can add extra bytes to the client's JavaScript bundle, so it's important to be selective in choosing libraries. Next.js and React routers are recommended for server-side rendering and personalized experiences can be achieved with spas.
The Rocky Journey of Data Fetching Libraries in React’s New Streaming SSR
React Advanced 2023React Advanced 2023
28 min
The Rocky Journey of Data Fetching Libraries in React’s New Streaming SSR
Watch video: The Rocky Journey of Data Fetching Libraries in React’s New Streaming SSR
This Talk discusses the journey of data fetching libraries in React's new streaming SSL, focusing on the use of suspense for data fetching. It covers the backstory of suspense and data fetching, the plan and green light for its implementation, challenges with Next.js app router and SSR, data transport and flushing timing, the importance of timing and data transport, delayed rehydration and stream closure, the need for remaining data and required functionalities, challenges faced by vanilla React users, and audience questions about React server components.
Server Components with Bun
Node Congress 2023Node Congress 2023
7 min
Server Components with Bun
Top Content
Bun is a modern JavaScript runtime environment that combines a bundler, transpiler, package manager, and runtime. It offers faster installation of NPM packages and execution of package.json scripts. Bun introduces a new JavaScript and TypeScript bundler with built-in support for server components, enabling easy RPC with the client. This allows for code splitting and running code that streamingly renders React or any other library from the server and mixes it with client code, resulting in less JavaScript sent to the client.
Next.js 13: Data Fetching Strategies
React Day Berlin 2022React Day Berlin 2022
53 min
Next.js 13: Data Fetching Strategies
Top Content
WorkshopFree
Alice De Mauro
Alice De Mauro
- Introduction- Prerequisites for the workshop- Fetching strategies: fundamentals- Fetching strategies – hands-on: fetch API, cache (static VS dynamic), revalidate, suspense (parallel data fetching)- Test your build and serve it on Vercel- Future: Server components VS Client components- Workshop easter egg (unrelated to the topic, calling out accessibility)- Wrapping up
No Code? No Problem! How GraphQL Servers Break and How to Harden Your Resolvers
GraphQL Galaxy 2022GraphQL Galaxy 2022
20 min
No Code? No Problem! How GraphQL Servers Break and How to Harden Your Resolvers
Kevin Dorosh
Sai Ekbote
2 authors
We discuss GraphQL servers, their current state, and how to harden resolvers. The talk explores the working of resolvers, handling server outages, and implementing passive health checking. It also delves into the role of API Gateways, proxies, and declarative resolvers in improving network traffic handling. The use of JQ for data transformation and outlier detection is demonstrated. The talk concludes with the importance of resilient resolvers and engagement with the GraphQL community.
Zero Bundle Size Server Components
React Advanced 2022React Advanced 2022
17 min
Zero Bundle Size Server Components
React Server Components is a recent feature introduced with the React team and launched with Next.js 12. They allow for rendering components on the server, improving performance and data fetching. Server components can be used alongside client-side rendering and provide direct access to server resources. However, they are still in the experimental stage and have some limitations, such as not being able to use hooks or event handlers. Challenges include importing server components in client components and making third-party API calls.
Hydrogen: An Early Look at Server Components in the Wild
React Advanced 2022React Advanced 2022
7 min
Hydrogen: An Early Look at Server Components in the Wild
Hydrogen and server components are being used by big merchants in production sites to build headless storefronts quickly. React 18 introduces server components that allow for interactive rendering without adding anything to the bundle. However, not all libraries are compatible and data fetching can slow down the site, but React provides suspense to handle heavy components. Server components offer great encapsulation and fast rendering via HTML, and the future of headless is promising with technologies like Edgeworkers and hosting platforms like Oxygen. Shopify is hiring and offers a demo shop with server components at addogen.new.
Build a Product Page with Shopify’s Hydrogen Framework
React Advanced 2022React Advanced 2022
81 min
Build a Product Page with Shopify’s Hydrogen Framework
WorkshopFree
David Witt
David Witt
Get hands on with Hydrogen, a React-based framework for building headless storefronts. Hydrogen is built for Shopify commerce with all the features you need for a production-ready storefront. It provides a quick start, build-fast environment so you can focus on the fun stuff - building unique commerce experiences. In this workshop we’ll scaffold a new storefront and rapidly build a product page. We’ll cover how to get started, file-based routing, fetching data from the Storefront API, Hydrogen’s built-in components and how to apply styling with Tailwind.You will know:- Get started with the hello-world template on StackBlitz- File-based routing to create a /products/example route- Dynamic routing /products/:handle- Hit the Storefront API with GraphQL- Move the query into the Hydrogen app- Update the query to fetch a product by handle- Display title, price, image & description.- Tailwind styling- Variant picker and buy now button- Bonus if there’s time: Collections page
Prerequisites: - A Chromium-based browser (StackBlitz)- Ideally experience with React. A general web development background would be fine.
Building custom storefronts on Shopify with Hydrogen
React Summit 2022React Summit 2022
71 min
Building custom storefronts on Shopify with Hydrogen
WorkshopFree
Abe Haskins
Megan Majewski
2 authors
Get hands-on with Hydrogen, a React-based framework powered by Shopify. In this workshop, we'll explore the framework and get a custom storefront up and running quickly. You'll learn how (and when) to leverage React Server Components and caching mechanisms to build fast, dynamic, custom storefronts.
Dear Client, I'm Leaving You
React Summit 2022React Summit 2022
21 min
Dear Client, I'm Leaving You
Liad Yosef discusses the importance and evolution of server-side rendering, highlighting its benefits such as improved performance and SEO. He explores different rendering strategies and the challenges of hydration in React. He introduces SuspenseSSL in React 18 as a solution for fetching data in advance and selectively hydrating components. He also mentions React Server Component as a game changer for reducing bundle size in rendering with React.
You don't want to Server-side Render your Next.js App
React Summit 2022React Summit 2022
28 min
You don't want to Server-side Render your Next.js App
Top Content
Next.js is a framework that allows for client-side rendering and easy page transitions. Server-side rendering offers a more secure application and better search engine optimization but requires a server. Static site generation provides outstanding performance and scalability but has limitations. Incremental static regeneration solves the problem of rebuilding the entire website. Choosing the right rendering strategy depends on the specific scenario, and for e-commerce websites, static site generation with incremental static regeneration is recommended.
React Server Components - Under the Hood
React Advanced 2021React Advanced 2021
19 min
React Server Components - Under the Hood
This talk provides an overview of React Server Components. It explores rendering the root element, using react-read-in-a-tree to read the webpack manifest, and performing work and JSON serialization. The talk also discusses the drain handler and client-side components, as well as challenges and future improvements in React Server Components.
Build a Custom Storefront on Shopify with Hydrogen
React Advanced 2021React Advanced 2021
170 min
Build a Custom Storefront on Shopify with Hydrogen
Workshop
Matt Seccafien
Cathryn Griffiths
2 authors
Hydrogen is an opinionated React framework and SDK for building fast, custom storefronts powered Shopify. Hydrogen embraces React Server Components and makes use of Vite and Tailwind CSS. In this workshop participants will get a first look at Hydrogen, learn how and when to use it, all while building a fully functional custom storefront with the Hydrogen team themselves.