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

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.