Building Reusable Server Components in NextJS

certificate
Recording and certification are available to Multipass and Full ticket holders only
Please login if you have one.
Rate this content
Bookmark

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

This workshop has been presented at React Summit US 2023, check out the latest edition of this React Conference.

FAQ

The main focus of the workshop is to discuss using reusable server components in Next.js, specifically React Server Components, and explore other capabilities of Next.js like new pages and layouts.

The workshop uses Next.js, React Server Components, Miro developer platform, and Yarn as the package manager.

Participants can access shared resources through links and resources provided in the Discord channel, which can be accessed via a QR code displayed during the workshop.

Yes, participants can optionally use their own Miro accounts for the workshop. Demo credentials are also provided for those who do not wish to create their own accounts.

The workshop demonstrates that using React Server Components helps keep the client-side bundle size small, even when including large packages like Moments.js, by rendering components server-side first.

React Server Components optimize app performance by keeping the client-side bundle as small as possible and allowing direct access to the backend, which helps in efficiently rendering dynamic content.

The workshop is hosted by Will Bishop and Metin, who are part of the Developer Relations Team at Miro. Will has a background at Zoom, and Metin hosted events in New York and is experienced in developing plugins for Miro.

Participants build a Next.js app leveraging React Server Components, demonstrating the reduction of client-side bundle size using server-side rendering.

Will Bishop
Will Bishop
Mettin Parzinski
Mettin Parzinski
88 min
21 Nov, 2023

Comments

Sign in or register to post your comment.

Video Summary and Transcription

Today's Workshop focused on using React Server Components in Next.js to optimize app performance. The workshop covered topics such as using client and server components together, app bootstrap, using the Miro API, setting up credentials and layout structure, working with layout and page components, creating board links and layout, understanding server rendering and Miro board, fetching data and server performance, working with Next.js routes and board metadata, debugging, getting data from the board, usage of Miro in real-world apps, and the conclusion with helpful resources.
Video transcription and chapters available for users with access.