Congratulations!

[00:00 - 00:19] That's it, you have reached the end of this course. You truly deserve some congratulations because you have discovered the most recent and advanced features of Next.js and you have learned how to combine them to craft advanced patterns that lead to extremely scalable applications.

[00:20 - 00:29] Together, we have built an extremely fast and scalable e-commerce application. But keep in mind that all those knowledge apply to any kind of content application.

[00:30 - 00:49] Blogs, press website, any application that needs to display dynamic content coming from the database as fast as possible. It could even be a personal website because after all, static rendering that we have pushed to its limit in this course is the fastest and cheapest way to deliver a website.

[00:50 - 01:02] So why not using it as much as possible to get the best possible user experience? Let's recapitulate the different patterns that we have used to implement the various parts of our e-commerce application.

[01:03 - 01:15] First, for the product list, we have been using React Server Components. And we have discovered that as a default, those components are rendered statically, meaning server-side, ahead of time.

[01:16 - 01:28] If they don't choose any interactive features, they are React Server Components, meaning that they don't need any kind of client-side JavaScript to run. Our e-commerce. also have an administration area where the e-commerce owner can create a new product.

[01:29 - 01:55] We have discovered revalidation that lets us show an up-to-date list of products, even if it has been statically rendered. If I create a new product, "Congratulations on finishing the course" for a million dollars, I save change, check the product list, and it's up to the this is thanks to revalidatePath that lets us revalidate a whole page that has been statically rendered.

[01:56 - 02:13] And revalidateTag that works more precisely at the datasource level. We wanted to bring on some interactivity in the preorder section so that our current direction updates instantly without any kind of user action, without the need to refresh the page, which is a limitation of static rendering.

[02:14 - 02:29] So we have learned how to mix static and client-side rendering to create a kind of relay between the client and the server values. We have used polling to also update this value very regularly, so the current user can see the updates triggered by other users.

[02:30 - 02:53] Finally, we have discovered how Partial Prerendering in the incoming version of Next will allow us to display user-specific data in a component without having the whole page to be dynamic, to be per-request server-side rendered. We can keep the page static, except for the tiny component that needs user-specific data.

[02:54 - 03:10] This is why static rendering doesn't prevent personalization and static rendering doesn't prevent to have up-to-date values. It is possible to keep a website static for a very long while, until we really, really need client-side or dynamic rendering.

[03:11 - 03:24] And even then, we can scope those more costly ways of rendering content and fetching data to specific components, and keep the remainder of the page, static, cheaper, and faster. Just a note here.

[03:25 - 03:31] We are using Next.js server features extensively. It doesn't mean that it's an obligation.

[03:32 - 03:42] It's the new default in Next.js, but Next.js is not the only React technology in the world. It is still valid to use only client-side JavaScript to render your application.

[03:43 - 03:51] This is an architecture that we call the Single-Page Application. There are modern frameworks that allows to have Single-Page Applications that are actually quite performance.

[03:52 - 04:10] They use code splitting to actually simulate having multiple pages in terms of performances, but still sticking to client-side rendering. This is a good fit for what we call Software as a Service, or application that are really software-ish, with a lot of buttons, there are a lot of interactivity with the user.

[04:11 - 04:21] Server-side rendering is not always that useful in this situation. And even though I like static rendering, I'm not advocating for using it in every situation.

[04:22 - 04:37] In this course, we have seen situations where it's actually relevant. For instance, displaying content that is mostly similar for most users in a e-commerce application, but it could have been a blog, a media, a press website, a company website, your own personal website.

[04:38 - 04:49] Those are good fits for static rendering. For software, you could investigate technologies like Vite, which is more a bundler than a framework, but still a great technology to create client-only application.

[04:50 - 05:00] I'd like to thank you again for trusting me to be your teacher in this course. If you are interested in more Next.js related content and courses, you can follow me on Twitter @ericbureltech.

[05:01 - 05:13] You can also take a look at the State of JavaScript, State of React, State of CSS, and State of HTML surveys that I help maintain . The Next.js application that powers those surveys is open source, and I maintain it regularly.

[05:14 - 05:20] This is a real-life application where I experiment the most up-to-date Next.js patterns. I hope to see you again. Bye!