Meta tags:
description=The Workshop covers advanced topics related to Next.js and React, including React Server Components and their benefits, using React Server Components with Next.js, caching and data fetching optimization, server actions and execution, and the differences between Edge and Node runtimes in Next.js. The Workshop also explores the use of React suspense for streaming SSR, selective hydration, and error management with server actions. Additionally, the Workshop provides examples, a GitHub repo, a Next.js course, and a community forum for further learning and discussion.;

Headings (most frequently used words):

js, more, next, for, react, developers, faq, comments, watch, workshops, on, topic, check, out, articles, and, videos, available, in, other, languages,

Text of the page (most frequently used words):
react (140), and (107), the (94), for (34), you (34), next (33), server (33), with (29), components (25), performance (24), rendering (23), use (21), how (21), using (19), that (18), this (18), will (17), are (16), #workshop (16), top (15), can (15), content (14), your (13), min (13), about (12), concurrent (12), advanced (12), tests (12), testing (11), hooks (11), more (11), client (11), what (11), code (10), like (10), routing (10), flashlist (10), not (9), component (9), side (9), api (9), best (8), practices (8), experience (8), edge (8), all (7), typescript (7), web (7), development (7), 2023 (7), based (7), user (7), applications (7), useeffect (7), also (7), tools (7), forget (7), improve (7), better (7), test (7), library (7), when (7), hook (6), there (6), ivan (6), summit (6), native (6), performant (6), remix (6), benefits (6), but (6), developers (6), see (6), they (6), featured (6), profiler (6), actions (6), get (5), node (5), javascript (5), without (5), file (5), talk (5), data (5), build (5), building (5), behavior (5), help (5), need (5), learn (5), know (5), used (5), then (5), runtime (5), from (4), state (4), deep (4), dive (4), urgent (4), handle (4), developer (4), between (4), different (4), 2022 (4), fetching (4), effects (4), built (4), optimize (4), framework (4), seo (4), features (4), driven (4), 2021 (4), out (4), each (4), where (4), why (4), devtools (4), together (4), show (4), list (4), these (4), sign (4), run (4), caching (4), gitnation (3), support (3), faq (3), workshops (3), management (3), quality (3), popular (3), articles (3), app (3), non (3), updates (3), such (3), time (3), may (3), effectively (3), allows (3), router (3), including (3), topics (3), handling (3), optimizing (3), potential (3), machines (3), compiler (3), has (3), enable (3), make (3), before (3), understanding (3), html (3), provides (3), edition (3), guide (3), lot (3), questions (3), still (3), end (3), mental (3), model (3), designing (3), techniques (3), application (3), tips (3), complex (3), pros (3), interactive (3), debugging (3), other (3), work (3), times (3), 2025 (3), rsc (3), requests (3), fetch (3), cache (3), faster (3), runtimes (3), latency (3), which (3), ssr (3), nation (2), stats (2), conditions (2), feedback (2), conferences (2), new (2), talks (2), conference (2), design (2), builders (2), founders (2), tags (2), people (2), mode (2), usetransition (2), issues (2), require (2), akulov (2), concurrency (2), explained (2), have (2), system (2), provide (2), improving (2), involves (2), beyond (2), today (2), explores (2), covering (2), discusses (2), stately (2), meta (2), aims (2), automatically (2), dependencies (2), word (2), team (2), its (2), release (2), authors (2), idiomatic (2), real (2), functionality (2), rendered (2), enhance (2), doesn (2), basic (2), create (2), websites (2), remote (2), transcription (2), elements (2), overall (2), offers (2), understand (2), think (2), videos (2), check (2), because (2), don (2), those (2), easy (2), many (2), should (2), write (2), unit (2), world (2), three (2), along (2), implement (2), low (2), high (2), value (2), options (2), them (2), any (2), setup (2), effective (2), wildly (2), thus (2), supported (2), increasingly (2), much (2), both (2), change (2), find (2), topic (2), key (2), ide (2), way (2), tdd (2), shopify (2), take (2), flatlist (2), effort (2), flipper (2), our (2), teach (2), cover (2), cases (2), keep (2), etc (2), fix (2), introducing (2), let (2), now (2), often (2), simple (2), ways (2), look (2), maurice (2), beijer (2), only (2), going (2), switch (2), want (2), yet (2), adventures (2), debug (2), would (2), slow (2), interaction (2), try (2), random (2), didn (2), chrome (2), around (2), several (2), won (2), usememo (2), memo (2), step (2), load (2), speed (2), masterclass (2), watch (2), para (2), desarrolladores (2), default (2), powin (2), jesse (2), boyd (2), post (2), adrian (2), hajdin (2), into (2), efficient (2), within (2), metadata (2), does (2), strategies (2), routes (2), route (2), runs (2), providing (2), response (2), purpose (2), makes (2), latest (2), reduced (2), enhanced (2), security (2), streaming (2), exclusively (2), extra (2), sending (2), day (2), berlin (2), explore (2), sentry (2), 2026, rights, reserved, community, conduct, privacy, policy, terms, legal, rss, feeds, assistance, promote, product, tech, contact, careers, company, subscribe, miss, deal, free, discounted, tickets, newsletter, systems, css, fullstack, frontend, svelte, vue, multipass, mentors, events, discover, main, menu, specifically, optimizes, allowing, processed, freezing, however, drawbacks, longer, processing, increased, cpu, usage, works, similarly, throttling, bouncing, making, useful, addressing, caused, multiple, small, libraries, query, alternative, apis, google, expert, consultant, netherlands, patterns, brings, transition, environments, approaches, primitives, address, disadvantages, multipage, while, maintaining, same, navigation, loading, pre, parts, screen, experiences, moving, towards, converging, solution, combining, senior, advocate, vercel, delba, oliveira, missing, dependency, race, cleanup, correct, distinction, activity, action, misuse, highlights, usequery, swr, problems, initializing, global, singletons, speaker, recommends, exploring, beta, docs, editor, visualizing, david, khourshid, memoization, vision, determine, named, pun, builds, dead, elimination, plans, open, source, focused, ensuring, frameworks, focuses, fundamentals, accessibility, flexibility, delivers, automatic, updating, styles, login, session, error, sites, documents, flexible, technologies, stacks, training, michael, jackson, brief, explains, process, comparing, old, importance, pure, covers, batching, double, context, redux, valuable, insights, looking, replay, mark, erikson, constantly, might, spark, git, interest, skill, stellar, career, great, answers, worry, mean, figure, yourself, lower, level, certain, line, tricky, supposed, persistent, act, warning, hour, introduce, bit, logic, whether, mock, walk, away, principles, cost, table, contents, kinds, fit, thinking, inputs, outputs, selecting, dom, verify, interact, mocks, shouldn, avoided, challenges, asynchrony, rtl, prerequisites, familiarity, writing, automated, jest, another, machine, lts, yarn, josh, justice, 151, reactjs, two, given, quickly, hard, accurate, learning, materials, jetbrains, ides, part, combination, series, little, meaning, steps, getting, productive, projects, emphasize, tricks, paul, everitt, 174, created, minimum, own, benchmarking, notch, quick, presentation, migrating, teaching, utilizing, provided, mainly, usebenchmark, plugins, flame, graph, lists, fps, props, gettype, sample, tasks, uncover, addition, was, quite, major, most, had, class, simpler, functional, really, almost, deceptively, plenty, mess, turns, cons, various, usestate, versus, usereducer, usecontext, efficiently, uselayouteffect, 177, suspense, finally, long, awaited, affect, upgrade, some, changes, aware, subjects, join, laptop, suspenselist, starttransition, 132, debugger, first, attempts, were, chaotic, optimization, trying, optimizations, until, found, right, one, gave, back, well, recording, poke, clicking, things, close, frustration, few, minutes, later, knows, exactly, too, here, did, render, pinpoint, bottleneck, repeat, solutions, just, regular, everything, comes, analyze, problem, note, suited, engineers, who, already, familiar, hear, lighthouse, 170, available, languages, access, video, chapter, summary, mar, nice, question, resident, none, christos, kuznos, comparisons, pages, convinced, worth, hiding, calls, pretty, cool, comment, register, comments, share, dec, 157, nextjs, asynchronous, functions, converts, secure, operations, static, dynamic, robots, txt, sitemaps, site, structure, search, engine, visibility, offer, extends, control, store, revalidate, specify, fetched, supports, unstable_cache, yes, technically, advisable, production, due, required, streamlined, set, export, const, ensure, closer, users, network, centralized, servers, local, general, specific, advantages, limitations, depending, case, difference, simply, directive, versions, include, improved, allow, selective, hydration, never, hydrated, means, sent, hand, hydrates, page, differ, type, aim, reduce, been, presented, social, sharing, discoverability, engagement, utilize, mutation, parallel, sequential, synchronization, differentiate, project, requirements, their, role, able, delve, concepts, empower, harness, full, hands, equipping, skills, needed, informed, architectural, decisions, started, crashes, slowdowns, regressions, prod, seer, unifies, traces, replays, errors, profiles, root, causes, fast, breaks, promoted, rate, bookmark, please, mastery, youtube, channel, author, english, version, log,

Text of the page (random words):
ifies traces replays errors profiles to find root causes fast get started in this advanced next js workshop we will delve into key concepts and techniques that empower react js developers to harness the full potential of next js we will explore advanced topics and hands on practices equipping you with the skills needed to build high performance web applications and make informed architectural decisions by the end of this workshop you will be able to 1 understand the benefits of react server components and their role in building interactive server rendered react applications 2 differentiate between edge and node js runtime in next js and know when to use each based on your project s requirements 3 explore advanced server side rendering ssr techniques including streaming parallel vs sequential fetching and data synchronization 4 implement caching strategies for enhanced performance and reduced server load in next js applications 5 utilize react actions to handle complex server mutation 6 optimize your next js applications for seo social sharing and overall performance to improve discoverability and user engagement this workshop has been presented at react day berlin 2023 check out the latest edition of this react conference faq what is the purpose of react server components rsc react server components rsc are a type of react component that runs exclusively on the server they aim to reduce client side code enhance security improve latency and provide a better user and developer experience by not sending extra javascript to the client how do react server components differ from server side rendering ssr react server components run exclusively on the server and never get hydrated on the client side which means no extra javascript is sent to the client ssr on the other hand involves rendering react on the server and then sending html to the client which then hydrates the page and makes it interactive what are the benefits of using react server components the benefits of react server components include reduced client side code enhanced security improved latency and a better user and developer experience they also allow for selective hydration and streaming which improve performance and user experience how can i use react server components with next js to use react server components with next js simply create a component without the use client directive next js makes react server components the default in the latest versions you can also use server actions and data fetching within these components what is the difference between edge and node runtimes in next js edge runtimes run closer to the users at the edge of the network providing low latency and faster response times node runtimes run on centralized servers or local machines and are more general purpose each has its specific advantages and limitations depending on the use case how do i enable edge runtime for my api routes in next js to enable edge runtime for your api routes in next js set export const runtime edge at the top of your api route file this will ensure that the api route runs on the edge runtime providing faster response times can react server components be used without next js yes react server components can technically be used without next js but it is not advisable for production due to the complex setup required next js provides a streamlined and efficient way to use react server components how does next js handle caching for fetch requests next js extends the native fetch api to automatically cache fetch requests you can control caching behavior using options like cache no store and revalidate to specify when data should be re fetched next js also supports react cache and unstable_cache for more advanced caching strategies what seo features does next js offer next js offers several seo features including static and dynamic metadata file based metadata like robots txt and sitemaps and built in support for improving site speed and structure these features help improve search engine visibility and user experience what are server actions in next js and how do they work server actions in next js are asynchronous functions that run on the server they can be used in both server and client components when used in client components next js converts these actions into post requests to the server this allows for secure and efficient server side operations within client side code react nextjs react adrian hajdin 157 min 15 dec 2023 share comments sign in or register to post your comment jesse boyd powin hiding api calls using server actions is pretty cool 02 20 may 13 2025 jesse boyd powin i d like to see real world time comparisons of rsc vs default react pages as i m not convinced it s worth the effort yet 01 58 may 13 2025 christos kuznos none nice question from resident 13 40 mar 16 2025 show more sign in to access video transcription and chapter summary available in other languages en next js for react js developers es next js para desarrolladores de react js watch more workshops on topic react performance debugging masterclass react summit 2023 170 min react performance debugging masterclass top content featured workshop ivan akulov ivan s first attempts at performance debugging were chaotic he would see a slow interaction try a random optimization see that it didn t help and keep trying other optimizations until he found the right one or gave up back then ivan didn t know how to use performance devtools well he would do a recording in chrome devtools or react profiler poke around it try clicking random things and then close it in frustration a few minutes later now ivan knows exactly where and what to look for and in this workshop ivan will teach you that too here s how this is going to work we ll take a slow app debug it using tools like chrome devtools react profiler and why did you render pinpoint the bottleneck and then repeat several times more we won t talk about the solutions in 90 of the cases it s just the ol regular usememo or memo but we ll talk about everything that comes before and learn how to analyze any react performance problem step by step note this workshop is best suited for engineers who are already familiar with how usememo and memo work but want to get better at using the performance tools around react also we ll be covering interaction performance not load speed so you won t hear a word about lighthouse react performance best practices advanced debug react debugger react performance react profiler concurrent rendering adventures in react 18 react advanced 2021 132 min concurrent rendering adventures in react 18 top content featured workshop maurice de beijer with the release of react 18 we finally get the long awaited concurrent rendering but how is that going to affect your application what are the benefits of concurrent rendering in react what do you need to do to switch to concurrent rendering when you upgrade to react 18 and what if you don t want or can t use concurrent rendering yet there are some behavior changes you need to be aware of in this workshop we will cover all of those subjects and more join me with your laptop in this interactive workshop you will see how easy it is to switch to concurrent rendering in your react application you will learn all about concurrent rendering suspenselist the starttransition api and more react concurrent rendering react 18 react concurrent mode react suspense react hooks tips only the pros know react summit remote edition 2021 177 min react hooks tips only the pros know top content featured workshop maurice de beijer the addition of the hooks api to react was quite a major change before hooks most components had to be class based now with hooks these are often much simpler functional components hooks can be really simple to use almost deceptively simple because there are still plenty of ways you can mess up with hooks and it often turns out there are many ways where you can improve your components a better understanding of how each react hook can be used you will learn all about the pros and cons of the various hooks you will learn when to use usestate versus usereducer we will look at using usecontext efficiently you will see when to use uselayouteffect and when useeffect is better react best practices react hooks deep dive react 18 hooks react profiler introducing flashlist let s build a performant react native list all together react advanced 2022 81 min introducing flashlist let s build a performant react native list all together top content featured workshop 3 authors in this workshop you ll learn why we created flashlist at shopify and how you can use it in your code today we will show you how to take a list that is not performant in flatlist and make it performant using flashlist with minimum effort we will use tools like flipper our own benchmarking code and teach you how the flashlist api can cover more complex use cases and still keep a top notch performance you will know quick presentation about what flashlist why we built etc migrating from flatlist to flashlist teaching how to write a performant list utilizing the tools provided by flashlist library mainly the usebenchmark hook using the flipper plugins flame graph our lists profiler ui js fps profiler etc optimizing performance of flashlist by using more advanced props like gettype 5 6 sample tasks where we ll uncover and fix issues together q a with shopify team react react native react native flashlist react typescript and tdd react advanced 2021 174 min react typescript and tdd top content featured workshop paul everitt reactjs is wildly popular and thus wildly supported typescript is increasingly popular and thus increasingly supported the two together not as much given that they both change quickly it s hard to find accurate learning materials react typescript with jetbrains ides that three part combination is the topic of this series we ll show a little about a lot meaning the key steps to getting productive in the ide for react projects using typescript along the way we ll show test driven development and emphasize tips and tricks in the ide react best practices typescript devtools web development test driven development react designing effective tests with react testing library react summit 2023 151 min designing effective tests with react testing library top content featured workshop josh justice react testing library is a great framework for react component tests because there are a lot of questions it answers for you so you don t need to worry about those questions but that doesn t mean testing is easy there are still a lot of questions you have to figure out for yourself how many component tests should you write vs end to end tests or lower level unit tests how can you test a certain line of code that is tricky to test and what in the world are you supposed to do about that persistent act warning in this three hour workshop we ll introduce react testing library along with a mental model for how to think about designing your component tests this mental model will help you see how to test each bit of logic whether or not to mock dependencies and will help improve the design of your components you ll walk away with the tools techniques and principles you need to implement low cost high value component tests table of contents the different kinds of react application tests and where component tests fit in a mental model for thinking about the inputs and outputs of the components you test options for selecting dom elements to verify and interact with them the value of mocks and why they shouldn t be avoided the challenges with asynchrony in rtl tests and how to handle them prerequisites familiarity with building applications with react basic experience writing automated tests with jest or another unit testing framework you do not need any experience with react testing library machine setup node lts yarn react testing best practices deep dive react testing react testing library test driven development react check out more articles and videos we constantly think of articles and videos that might spark git people interest skill us up or help building a stellar career a guide to react rendering behavior react advanced 2022 25 min a guide to react rendering behavior top content mark erikson replay io this transcription provides a brief guide to react rendering behavior it explains the process of rendering comparing new and old elements and the importance of pure rendering without side effects it also covers topics such as batching and double rendering optimizing rendering and using context and redux in react overall it offers valuable insights for developers looking to understand and optimize react rendering react performance deep dive react rendering building better websites with remix react summit remote edition 2021 33 min building better websites with remix top content michael jackson react training remix is a web framework built on react router that focuses on web fundamentals accessibility performance and flexibility it delivers real html and seo benefits and allows for automatic updating of meta tags and styles it provides features like login functionality session management and error handling remix is a server rendered framework that can enhance sites with javascript but doesn t require it for basic functionality it aims to create quality html driven documents and is flexible for use with different web technologies and stacks react remix frameworks react compiler understanding idiomatic react react forget react advanced 2023 33 min react compiler understanding idiomatic react react forget top content 2 authors the talk discusses react forget a compiler built at meta that aims to optimize client side react development it explores the use of memoization to improve performance and the vision of forget to automatically determine dependencies at build time forget is named with an f word pun and has the potential to optimize server builds and enable dead code elimination the team plans to make forget open source and is focused on ensuring its quality before release react build tools builders and founders react 19 react forget using useeffect effectively react advanced 2022 30 min using useeffect effectively top content david khourshid stately ai today s talk explores the use of the useeffect hook in react development covering topics such as fetching data handling race conditions and cleanup and optimizing performance it also discusses the correct use of useeffect in react 18 the distinction between activity effects and action effects and the potential misuse of useeffect the talk highlights the benefits of using usequery or swr for data fetching the problems with using useeffect for initializing global singletons and the use of state machines for handling effects the speaker also recommends exploring the beta react docs and using tools like the stately ai editor for visualizing state machines react best practices s...