Blazing Fast Next.js with React Server Components

Learn how to build blazingly fast websites with Next.js. Static rendering is often underrated: it’s very fast, very cheap, but hard to use in advanced scenarios. This course introduces students to personalization with static rendering by using React Server Components, the latest paradigm shift in React. By the end of this course, you'll have learned advanced Next.js concepts like server actions, static revalidation, client-server relaying, or partial prerendering, and you'll know when and how to apply different server rendering strategies in large, production-grade Next.js applications. This course mixes recent advanced concepts like Server Action and static rendering in a way that students won’t find in the documentation. Not only will this apply to any content application but also it will apply to dashboards or multi-tenant SaaS.

  • 4.8 / 5 (7 ratings)
  • Published
  • Updated
On demand video

1 hr 24 mins

Video Lessons

14 Videos

Course Instructor
Avatar Image

Eric Burel

Founder @lbke | French dev who loves JavaScript, GraphQL and Python | Next.js expert | Busy working at @Devographics

How The Course Works

01Remote

You can take the course from anywhere in the world, as long as you have a computer and an internet connection.

02Self-Paced

Learn at your own pace, whenever it's convenient for you. With no rigid schedule to worry about, you can take the course on your own terms.

03Community

Join a vibrant community of other students who are also learning with Blazing Fast Next.js with React Server Components. Ask questions, get feedback and collaborate with others to take your skills to the next level.

04Structured

Learn in a cohesive fashion that's easy to follow. With a clear progression from basic principles to advanced techniques, you'll grow stronger and more skilled with each module.

Course Preview

What You Will Build In This Course

Course Overview

Design patterns to accelerate Next.js Apps with Static Rendering and Server Actions

What you will learn
  • Why the performance of a content application matters and how it's related to different rendering strategies

  • How to statically fetch data on a server with React Server Components (RSC)

  • How to update static pages with fresh content via data revalidation in Server Actions

  • How to perform relaying with SWR, a React Hooks library for data fetching

  • How to mix dynamic and static rendering via Partial Prerendering (PPR), an experimental feature introduced in Next.js 14

Blazing Fast Next.js with React Server Components

Build a Content Application with Dynamic Data - Newline Commerce

Welcome to the "Blazing Fast Next.js with React Server Components - Design patterns to accelerate Next.js Apps with Static Rendering and Server Actions" course. Throughout this program, we will guide you through the intricacies of Next.js, focusing on Server Actions and static rendering techniques. In this informative journey, we will collaboratively construct a content application named Newline Commerce.

Join us as we explore the foundations of Next.js, implementing dynamic data and server-side actions to bring Newline Commerce to life. This course is your gateway to mastering the art of server actions and static rendering in the context of real-world web development.

How The Course Works

  • The Blazing Fast Next.js with React Server Components course is a 6-module online program where you will delve into Next.js powerful patterns such as Server Actions, Static Rendering, Client-Server Relaying or Partial Prerendering. Learn to deliver fresh content to your end users with optimal performances and cost efficiency.
  • Remote: Take the course from anywhere, allowing you to participate from the comfort of your preferred location.
  • Self-paced: Tailor the course to fit your schedule. With a self-paced structure, you have the flexibility to learn at your own pace, ensuring a stress-free educational experience.
  • Community: Engage with other students in a collaborative learning environment. Share insights, discuss challenges, and expand your understanding within a supportive community.
  • Structured: Experience a cohesive and organized learning journey. The course is structured to guide you through each module in a logical and progressive fashion, ensuring a comprehensive understanding of Next.js Server Actions and Static Rendering.

The Challenge

Navigating the realm of Next.js can be a daunting endeavor for many aspiring developers. As you embark on your journey to master this powerful framework, you may encounter several challenges:

  • Complexity Overload: Next.js, with its robust capabilities, can overwhelm newcomers. Understanding the intricate balance between Next.js server-centric features and data update requirements requires a structured approach.
  • Dynamic Content Dilemma: Implementing dynamic content in web applications often poses a challenge, especially when it comes to delivering fresh data efficiently to end users.
  • Performance Concerns: Ensuring optimal performance while maintaining cost efficiency is difficult. Achieving this balance with Next.js demands a nuanced understanding of its patterns and practices.
  • Lack of Cohesive Learning Resources: Piecing together information from various sources can be time-consuming and confusing. A structured learning path is essential for a comprehensive understanding of Next.js.

The Frustration

Newcomers often find themselves frustrated by the lack of clarity and guidance in mastering Next.js. The complexity of static rendering aside from trivial use cases can be a significant roadblock, leading to confusion and hindered progress.

How This Course Helps

The "Blazing Fast Next.js with React Server Components" course is designed to address these challenges head-on. Through a carefully crafted curriculum, you will gain a clear understanding of Next.js, overcome common hurdles, and confidently apply static rendering with revalidation in your web development projects.

Unlock the Potential of Next.js in 2024

In the dynamic landscape of web development, staying ahead is key. Here's why learning Next.js in 2024 is advantageous for you:

  1. Enhanced Performance: Next.js continues to evolve, offering enhanced performance features that cater to the growing demand for faster, more efficient web applications.
  2. Industry Relevance: As of 2024, Next.js maintains its position as a leading framework, backed by a vibrant community and widespread adoption in the industry. Learning it now ensures you align with current development trends.
  3. Scalability for Modern Applications: In an era where scalability is paramount, Next.js provides the tools to build scalable applications that adapt to the demands of modern web development.
  4. SEO Optimization: Next.js server-side rendering capabilities contribute to improved SEO performance, a crucial factor for ensuring your web applications are discoverable and accessible.
  5. Developer-Friendly Ecosystem: With an ever-expanding ecosystem and a focus on developer experience, learning Next.js in 2024 means immersing yourself in a framework designed to streamline your development workflow.

Equip yourself with the skills to thrive in the current web development landscape. Learning Next.js in 2024 positions you at the forefront of technology, offering a competitive edge in your professional journey.

Our students work at

  • salesforce-seeklogo.com.svgintuit-seeklogo.com.svgAdobe.svgDisney.svgheroku-seeklogo.com.svgAT_and_T.svgvmware-seeklogo.com.svgmicrosoft-seeklogo.com.svgamazon-seeklogo.com.svg

Sample Course Lessons

Course Syllabus and Content

The Blazing Fast Next.js with React Server Components course equips you with the skills needed to master Next.js Static Rendering, coupled with Server Actions but also client-side and dynamic rendering. From foundational concepts to practical implementation, you'll gain a deep understanding of how to leverage Next.js for optimal performance and dynamic content delivery.

Module 1

Introduction to the Course

4 Lessons 8 Minutes

This module introduces the importance of performance in content applications, such as ecommerce, blogs, and press websites. Explore possible solutions in Next.js 14 App Router through a series of lessons, including the “Newline Commerce” demo app, an exploration of why performance matters, understanding the “Rendering Triforce”, and a demonstration of rendering with each approach in Newline Commerce.

Module 2

Static Pages with Dynamic data

3 Lessons 20 Minutes

Get familiar with React Server Components (RSC) and Server Actions in Module 2. Learn how to retrieve and modify data through three lessons, covering topics like static RSCs as the new default, getting data statically, and updating data with Server Actions.

Module 3

Up-To-Date Static Rendering

3 Lessons 22 Minutes

Advance your skills by updating static pages with fresh content while keeping them static using revalidatePath and revalidateTag. This module, comprised of three lessons, explores the benefits of static rendering, page-level "revalidatePath," and datasource-level "revalidateTag."

Module 4

Client-Server Relaying

2 Lessons 19 Minutes

Discover how to "relay" a server-side render with a client-side render and use polling to get updates without refreshing the page. Module 4, consisting of two lessons, recaps client-side data fetching and dives into relaying with SWR.

Module 5

Partial Prerendering (PPR)

1 Lesson 9 Minutes

Explore the concept of Partial Prerendering, where static and dynamic rendering are mixed. This module, with one lesson, covers the technique of mixing static and dynamic rendering to enhance your development capabilities.

Module 6

Conclusion

1 Lesson 5 Minutes

In the final module, we list again the different patterns to keep an app "as static as possible" and "as server-side as possible." This concluding module provides insights on limiting client-side and dynamic rendering to the parts where they bring tangible benefits.

Meet the Course Instructor

Eric Burel

Eric Burel

Meet Eric Burel - Your Next.js Course Author

Eric Burel - Developer, Teacher, and R&D Funding Consultant

Meet the mind behind "Blazing Fast Next.js with React Server Components" - Eric Burel. Eric, based in France, wears multiple hats as a developer, teacher, and R&D funding consultant. His professional journey has been marked by a diverse range of experiences, contributing to the deep knowledge he brings to this course.

Professional and Academic Credentials:

Eric holds a degree from Grenoble INP Ensimag, a prestigious computer science engineering school in France, reflecting his strong academic foundation. As a member of the Devographics collective, he actively contributes to open source projects, notably the State of JavaScript/CSS/HTML surveys.

Work Experience:

Eric's career has been enriched through collaborations from top-level international startups to emerging entrepreneurship projects. He not only imparts live Next.js training in France and abroad but has also crafted the Next.js frontend for a grid management software, later acquired by Schneider Electrics.

Passions Beyond Development:

Beyond the code, Eric finds joy listening to electronic and hip-hop music and exploring little-know facts about his favorite hits. This passion not only adds a personal touch but also reflects his dedication to sharing knowledge in diverse and engaging ways.

Contributions to the Field:

Eric's commitment to innovation is evident in his contribution to the field. He has formalized and published a new pattern for the Jamstack named "Segmented Rendering," aimed at reducing web applications' CPU consumption. This dedication to advancing industry practices sets the tone for a course designed to empower learners with cutting-edge insights.

Why Learn Next.js with Eric:

Eric's extensive background, spanning live training sessions, open-source contributions, and real-world project experiences, positions him as the ideal instructor for "Blazing Fast Next.js with React Server Components." His nuanced understanding of Next.js, combined with a passion for effective teaching, ensures a learning experience that goes beyond the basics.

Relevance to You:

Choosing this course means learning from an individual deeply ingrained in the world of Next.js development, with real-world applications and contributions to the framework's ecosystem. Eric's unique blend of expertise and hands-on experience makes this course a standout choice in the realm of Next.js education.

Purchase the course today

One-Time Purchase

Get lifetime access to this course

$39$49$10.00 off
Blazing Fast Next.js with React Server Components
  • Discord Community Access
  • Full Transcripts
  • Money Back Guarantee

newline Pro Subscription

$30/MO

Get unlimited access to the course, plus 60+ newline books, guides and courses. Learn More

Blazing Fast Next.js with React Server Components

Charged monthly. Free to cancel anytime

  • Discord Community Access
  • Full Transcripts
  • Money Back Guarantee

Plus:

  • Unlimited access to 60+ newline Books, Guides and Courses
  • Interactive, Live Project Demos for Every newline Book, Guide and Course
  • Complete Project Source Code for Every newline Book, Guide and Course
  • Best Value 🏆
Error: Can't find product newline-basic-subscription-monthly. Please contact [email protected]

Frequently Asked Questions

1. What is Blazing Fast Next.js with React Server Components?

"Blazing Fast Next.js with React Server Components" is an online course designed to help seasoned software engineers master Next.js, focusing on advanced concepts like static rendering and revalidation with server actions. The course provides a comprehensive exploration of these topics, empowering learners to enhance web application performance and efficiently deliver dynamic content.

2. Who is this course for?

This course is tailored for intermediate and senior software engineers looking to deepen their understanding of Next.js. If you have a solid foundation in JavaScript and React and are eager to explore advanced Next.js patterns, such as server actions and static rendering, this course is ideal for you. Whether you're aiming to optimize performance, implement secure authentication, or master the intricacies of Next.js, this course caters to your needs.

3. What if I don't like the course?

We understand that every learner is unique. If the course doesn't meet your expectations, we offer a 100% satisfaction guarantee within the first 30 days. Simply reach out to our support team, and we'll process a refund for you. Your satisfaction and learning experience are our priorities.

4. How long does the course take to complete?

The course is self-paced, allowing you to progress at a speed that suits your schedule. With a total video runtime of approximately 1 hour and 20 minutes, the course is structured into 6 modules and 14 lessons. Whether you choose to complete it in a week or take a more extended timeline, the flexibility is yours.

5. Can I access the course from anywhere?

Absolutely. The course is remote-friendly, enabling you to access the content from anywhere with an Internet connection. Whether you're at home, work, or on the go, you can engage with the course materials at your convenience.

6. How is the course structured?

The course is structured into 6 modules, each covering specific aspects of Next.js Server Actions and Static Rendering. From foundational concepts to advanced techniques, the modules guide you through a cohesive learning journey, ensuring a comprehensive understanding of Next.js.

7. What prerequisites do I need for this course?

To make the most of this course, we recommend a solid proficiency in JavaScript and React, along with prior experience in web development. Familiarity with HTML and CSS is also beneficial. These prerequisites ensure you have the foundational knowledge to grasp the advanced concepts presented in the course.

8. Is there a community for course participants?

Yes, there is a community where you can engage with fellow participants. Share insights, collaborate on projects, and expand your professional network within an inclusive and supportive environment.

9. What sets this course apart from others?

This course stands out due to its focus on advanced Next.js patterns and the expertise of the course author, Eric Burel. With real-world project experiences, live training sessions, and contributions to the Next.js ecosystem, Eric brings a unique blend of knowledge and hands-on experience to your learning journey.

10. Will I receive a certificate upon completion?

Yes, upon completing the course, you will receive a certificate of completion. This certificate acknowledges your dedication to mastering Next.js Server Actions and Static Rendering.

11. How does the course enhance my career?

Mastering Next.js, especially with a focus on server actions and static rendering, positions you as a valuable asset in the competitive world of web development. The skills acquired in this course are directly applicable to real-world projects, making you a sought-after professional in the industry.

12. How much does the course cost?

The course is priced at $39, offering an affordable and valuable investment in your professional development. With a range of content and the expertise of the course author, it provides substantial value for those looking to advance their skills in Next.js.

Blazing Fast Next.js with React Server Components

$39

$49