#react server components

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.

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 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.

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.

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.

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.

Hi, my name is Julian, and I'm extremely excited to talk about suspense. Suspense allows you to render fallback UI while waiting for asynchronous tasks to resolve, making it the unsung hero of React components. In today's talk, I will explain why suspense is crucial for React server components. Before diving into server components, let's understand the history of web rendering and the problems it posed. We then introduced server-side rendering (SSR) and static-side generation (SSG) to address these issues. However, SSR had problems like large bundle sizes, slow hydration, and sluggish initial server response time. React server components solve these problems by allowing us to differentiate between static and dynamic components. But to address the third problem, we need suspense. Today, we'll build a simplified version of suspense on the server to demonstrate its conceptual working and how it improves the rendering process from classical SSR to streaming and out-of-order streaming. Let's dive into the code by building a movie app called Notflix. We have different sections like the title, cast members, and similar movies. The components fetch their own data asynchronously, making them server components. In the classical way of server-side rendering, we loop through the children, execute them as server components, and render the HTML response. To improve the user experience, we introduce streaming, which allows us to start the response on the server, keep the connection open, and add to the response document as data becomes available. By using the write method provided by Express, we can write to the response stream instead of collecting all the HTML. Dealing with promises in sequence ensures that components are rendered in the correct order. Although the server-side rendering has improved, there is still no loading state or proper handling of suspended children. To address this, we introduce suspense on the server and build a suspense component with a fallback UI and children. We keep track of suspended children using a simple object with unique identifiers. In the renderer, we check the suspended object and loop through the entries to handle each suspended child. To replace the loading state with the content once it's available, we need to execute asynchronous functions to collect and concatenate the content, delete the entry from the suspended object, and use JavaScript to handle the swapping of elements in the browser. To replace the fallback renderer with the content, we need to wrap the fallback in a diff and add an identifier using a data attribute. We can use the CSS trick of 'display: contents' to prevent the diff from affecting the layout. Next, we wrap the available content in a template tag to add it to the document without rendering. Finally, we use custom elements and a connected callback to swap the loading boundary with the content based on the identifier. This allows us to replace multiple fallback renderers. By wrapping each section in its own boundary, the user experience is significantly improved as each section can load independently. This approach also emphasizes the importance of using the platform's existing features and functionality, such as browser caching, to enhance performance. Thank you for watching and enjoy the rest of the conference!

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!

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.

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.

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.

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.

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.

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.

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 (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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.