Newline Commerce demo app

Performance matters

The Rendering Triforce

Rendering in Newline Commerce (demo)

Introduction to the Course

Static RSC - the new default

Getting data, statically

Update data, with Server Actions

Static Pages with Dynamic data

Static is great, you want static

Page-level "revalidatePath"

Datasource-level "revalidateTag"

Up-To-Date Static Rendering

Client-side data fetching recap

Relaying with SWR

Client-Server Relaying

Mix Static and Dynamic Rendering

Partial Prerendering (PPR)

Congratulations!

Conclusion

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.

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

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

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.

Blazing Fast Next.js with React Server Components

Fetch and cache data from a database inside a React Server Component.

Handle form submissions using Next.js Server Actions.

Perform client-side data fetching in Next.js with SWR.

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

To fully benefit from this course, you should have some experience with frontend web development, ideally with a modern framework like React or equivalent, and a good understanding of the HTTP request/response lifecycle.

If you don't feel confident enough yet,  that's not a problem at all! 
I would recommend checking out the 

State management course on Newline from Fernando Doglio

If you are familiar with web development but not with React specifically, you can also check the 

This course will teach you powerful patterns to create blazing fast Next.js applications using the latest paradigm shift in React: React Server Components (RSC). 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. These advanced patterns introduces concepts like Server Action and static rendering in a way that students won’t find in the documentation.

Here is a screenshot of Newline Commerce homepage, our demo application for this course. Ecommerce websites are content applications: they display lists of products stored in a database. Blogs, news websites are also content applications. Next.js is 

Here is a demo of the first version of the application in action:

This course is about building content websites need to be highly performant, scalable, and cost effective for SEO or ecommerce purposes but want to keep the pesonalization that everyone loves. Some people have even gone into static oriented frameworks like Qwik. Not only will this apply to any content application but also it will apply to dashboards or multi-tenant SaaS.

At the end of this course, you should be able to craft content applications that load immediately, that scale up well, and has instant updates when adding a product or preordering the flagship product.

These new skills will allow you to make Next.js apps with dynamic content (blog, ecommerce, press website) faster to load and more efficient, while guaranteeing that they display up-to-date information at all-time.

Ecommerce is a great example to understand content applications, because there is a direct relation between the code we write and the revenue it generates. 

But that’s not the only one: blogs, media websites, company websites are content websites that works very similarly to ecommerce under the hood.

Instead of listing products, you may need to list articles or authors, instead of preorder forms, you may want users to subscribe to a newsletter, etc.

All these websites need to load and display fresh data as quick as possible.

 (VP of Product at Vercel) uses React Server Components and Partial Prerendering, two concepts we will explore in this course.

Let's put ourselves in the shoes of an e-commerce business owner who wants to sell products online. The owner wants to create a preorder that needs to handle a lot of traffic from reddit, press and other places, but they don't just want a static landing page. 

Here are the requirements for our demo application:

Our goal as developers is to ensure that the e-commerce site is not just performant, scalable, and efficient but also dynamically responsive to data changes.

Pro-tip: I generated the UI components for this demo app using 

! It's great if you want to quickly build your own app and focus on the architecture rather than the UI.

---
title: Newline Commerce demo app
privateVideoUrl: https://stream.mux.com/ukierVHDrsdfsq02nmVeEcA02eAOEEMAXVQCK025xo6neg.m3u8
isPublicLesson: true
---

## Prerequisites

Welcome to this Next.js course!

To fully benefit from this course, you should have some experience with frontend web development, ideally with a modern framework like React or equivalent, and a good understanding of the HTTP request/response lifecycle.

If you don't feel confident enough yet,  that's not a problem at all! 
I would recommend checking out the [Next.js Learn](https://nextjs.org/learn) tutorial and [State management course on Newline from Fernando Doglio](https://www.newline.co/courses/complex-state-management-with-server-and-client-components-in-next) first.

If you are familiar with web development but not with React specifically, you can also check the [React Foundations](https://nextjs.org/learn/react-foundations) course from [Vercel, and Full Stack React Book](https://www.newline.co/fullstack-react), [TinyHouse](https://www.newline.co/tinyhouse) or [Fullstack React with Typescript](https://www.newline.co/courses/fullstack-react-with-typescript-masterclass) 

## Building an ecommerce website and more

This course will teach you powerful patterns to create blazing fast Next.js applications using the latest paradigm shift in React: React Server Components (RSC). 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. These advanced patterns introduces concepts like Server Action and static rendering in a way that students won’t find in the documentation.

Specifically:

-   What are the tools at our disposal in Next.js 14 App Router to craft content websites: React Server Components (RSC), Server Actions, and the 3 rendering techniques
-   How to use revalidation on static page to display up-to-date data, and still benefit from the performance of static
-   How to “relay” a server render and a client render to get the best of both worlds
-   How to mix static and dynamic server-side rendering to further personalize the user experience, while keeping the page static and fast

Here is a screenshot of Newline Commerce homepage, our demo application for this course. Ecommerce websites are content applications: they display lists of products stored in a database. Blogs, news websites are also content applications. Next.js is **excellent** for this use case.

<div style={{maxWidth: "600px", margin: "0 auto"}}>

![Screenshot of Newline Commerce homepage.](https://d2uusema5elisf.cloudfront.net/courses/blazing-fast-next.js-with-react-server-components/module_01/lesson_01.01/public/screenshot_homepage.png)

</div>

Here is a demo of the first version of the application in action:

<ReplitEmbed
  src="//replit.com/@newlineauthors/blazing-fast-app-v1"
/>

This course is about building content websites need to be highly performant, scalable, and cost effective for SEO or ecommerce purposes but want to keep the pesonalization that everyone loves. Some people have even gone into static oriented frameworks like Qwik. Not only will this apply to any content application but also it will apply to dashboards or multi-tenant SaaS.

At the end of this course, you should be able to craft content applications that load immediately, that scale up well, and has instant updates when adding a product or preordering the flagship product.

These new skills will allow you to make Next.js apps with dynamic content (blog, ecommerce, press website) faster to load and more efficient, while guaranteeing that they display up-to-date information at all-time.

## Craft all kinds of content applications

Ecommerce is a great example to understand content applications, because there is a direct relation between the code we write and the revenue it generates. 

But that’s not the only one: blogs, media websites, company websites are content websites that works very similarly to ecommerce under the hood.

Instead of listing products, you may need to list articles or authors, instead of preorder forms, you may want users to subscribe to a newsletter, etc.

All these websites need to load and display fresh data as quick as possible.

:::info
[Lee Robinson's blog](https://leerob.io/blog/2023#performance) (VP of Product at Vercel) uses React Server Components and Partial Prerendering, two concepts we will explore in this course.
:::

## Newline E-Commerce features

Let's put ourselves in the shoes of an e-commerce business owner who wants to sell products online. The owner wants to create a preorder that needs to handle a lot of traffic from reddit, press and other places, but they don't just want a static landing page. 

Here are the requirements for our demo application:

-   The homepage should highlight a flagship product, one that the owner intends to promote heavily. 
-   Users should be able to pre-order the flagship product, with the call-to-action count increasing in real-time as pre-orders are made.
-   The homepage will also display a comprehensive list of products. 
-   The product list will be available on a specific "/products" page too
-   In addition to the customer interface, the application should include an administration area. This area will let the e-commerce owner create new products. 

!["The admin area"](https://d2uusema5elisf.cloudfront.net/courses/blazing-fast-next.js-with-react-server-components/module_01/lesson_01.01/public/screenshot_admin.png)

Our goal as developers is to ensure that the e-commerce site is not just performant, scalable, and efficient but also dynamically responsive to data changes.

:::tip
Pro-tip: I generated the UI components for this demo app using [Vercel v0](https://v0.dev/)! It's great if you want to quickly build your own app and focus on the architecture rather than the UI.
:::


Where can I fin the source code for this course? The download link just gives markdown snippets of the code.

Hey jzief, thanks for joining the course! According to the team, the source code is embedded in the conclusion: https://www.newline.co/courses/blazing-fast-next.js-with-react-server-components/congratulationsThere is also a raw version if you want to implement the features on your own: https://www.newline.co/courses/blazing-fast-next.js-with-react-server-components/newline-commerce-demo-app

Eric Burel

I am not finding the source code. The files provided from the download link are just markdown snippets that don't really provide any structure. Can you please supply the source code that the instructor is using in the videos. He is working with source files on github.Thanks.

thanks for joining the course! the source code is embedded in the conclusion: https://www.newline.co/courses/blazing-fast-next.js-with-react-server-components/congratulationsThere is also a raw version if you want to implement the features on your own: https://www.newline.co/courses/blazing-fast-next.js-with-react-server-components/newline-commerce-demo-appWe embedded it in the beginning as well: https://www.newline.co/courses/blazing-fast-next.js-with-react-server-components/welcome

Learn

The newline Guide to Building Your First GraphQL Server with Node and TypeScript

Teach

Amelia Wattenberger

Author of Fullstack D3

Community

Blazing Fast Next.js with React Server Components

WELCOMEIntroduction

Introduction:

Start Here

Module 1: Introduction to the Course

Lesson 1: (1:51)

Newline Commerce demo app

Lesson 2: (1:31)

Performance matters

Lesson 3: (3:00)

The Rendering Triforce

Lesson 4: (1:37)

Rendering in Newline Commerce (demo)

Module 2: Static Pages with Dynamic data

Lesson 1: (6:51)

Static RSC - the new default

Lesson 2: (6:38)

Getting data, statically

Lesson 3: (6:30)

Update data, with Server Actions

Module 3: Up-To-Date Static Rendering

Lesson 1: (6:09)

Static is great, you want static

Lesson 2: (7:07)

Page-level "revalidatePath"

Lesson 3: (8:43)

Datasource-level "revalidateTag"

Module 4: Client-Server Relaying

Lesson 1: (10:18)

Client-side data fetching recap

Lesson 2: (9:16)

Relaying with SWR

Module 5: Partial Prerendering (PPR)

Lesson 1: (9:43)

Mix Static and Dynamic Rendering

Module 6: Conclusion

Lesson 1: (5:21)

Congratulations!

Newline Commerce demo app