The video discusses rendering, runtime, and environment in Next.js. It explains different rendering strategies and environments, such as client-side and server-side rendering.
By logging in, you'll unlock full access to this and other free tutorials on JSM Pro.
Why? Logging in lets us personalize your learning experience, track your progress, and keep you in the loop with new workshops, coding tips, and platform updates.
You'll also be the first to know about upcoming launches, events, and exclusive discounts.
No spam—just helpful content to level up your skills.
If that sounds fair, go ahead and log in to continue →
Enter your name and email to get instant access
##Looks like we found a thief monkey By the way, I liked the trick how you reached till here. You have a good sense of humor. You will improve a lot if you join our course with this passion.
var (function-scoped, outdated)let (block-scoped, modern and recommended)const (block-scoped, cannot be reassigned)_, or $let let = 5; is invalid)myVar and myvar are different)string, number, boolean, null, undefined, bigint, symbolObjects, Arrays, Functions
Subscribing gives you access to a brief, insightful summary of each lecture to stay on track.
00:00:00 We have previously discussed terms like rendering, runtime, and environment, but what do they truly mean, and how does Next.js fit into the picture?
00:00:12 You might be thinking, enough with the theory, show me the code.
00:00:16 Well, we can definitely do that.
00:00:17 In fact, we have already done some best-in-class Next.js project videos for you to dive right into.
00:00:24 You can see some of the videos on the screen right now.
00:00:27 However, it's important to note that simply watching these videos and successfully deploying your application might not be enough.
00:00:35 When you eventually venture into your own projects, you might stumble because you lack a deep understanding of the why behind your decisions.
00:00:44 you'll find yourself struggling with the choice.
00:00:47 So always aim to clear your why and sit back to watch yourself perfecting the how.
00:00:53 In Next.js, there are different ways of displaying elements on pages, called strategies, and the specific times when they run,
00:01:02 called runtime or build time, and the specific places where they work, called environment.
00:01:08 So, let's dive deeper into the rendering process.
00:01:12 It's a process of generating or creating the user interface from the code we write.
00:01:18 React 18 and Next.js introduced different strategies to render an application.
00:01:24 Believe it or not, we can use multiple strategies within the same application to render the content differently.
00:01:31 The god mode feature of Next.js.
00:01:34 Although we didn't talk a lot about it, there are two environments where we can render our application code.
00:01:40 The client, or the user's browser, and the server, which is the computer where we deploy our code.
00:01:47 When it comes to the rendering process on the client, it occurs on the user's browser.
00:01:52 However, when we render on the server, it happens on the server before sending the page to the client's browser.
00:01:59 When it comes to the interactivity and load time, on the client side it provides a dynamic and interactive user experience,
00:02:07 but on the server it provides a fully rendered HTML page to the client resulting in faster initial page load time.
00:02:15 When it comes to fetching an SEO, on the client side, we have smoother transitions between pages and real-time data fetching,
00:02:23 whereas on the server, we have fully rendered content enhancing search engine rankings and social media sharing previews.
00:02:31 When it comes to load and performance, on the client side, we have reduced server load and potentially lower hosting costs as the client's browser is responsible
00:02:42 for handling the rendering.
00:02:43 But if we render on server, then our website is going to perform well on any slower device, as rendering is done on the server side.
00:02:52 When it comes to consistent rendering, on the client side, compatibility and performance depend on the user's device configuration,
00:02:59 whereas on the server side, we will see consistent rendering across any device, regardless of the configuration, reducing the risk of compatibility issues.
00:03:09 And when it comes to security, on the client side, we are exposed to a potential risk of security vulnerabilities such as cross-site scripting,
00:03:18 better known as XSS, code injection, as well as data exposure.
00:03:23 But if we render on the server side, that reduces the amount of client-side JavaScript code sent to the user's browser, thus enhancing security by limiting
00:03:33 potential vulnerabilities.
00:03:34 So, when should we use which one?
00:03:37 Well, if search engine optimization, or SEO, security concerns, and user device specifications are not a priority for you,
00:03:46 and your focus is primarily on delivering dynamic interactivity to the user, then client-side rendering, or CSR, with technologies like React can be a
00:03:55 suitable choice.
00:03:57 A use case where this approach is applicable is in the business-to-business or B2B domain.
00:04:03 In such cases, the target audience is specific and known, eliminating the need to prioritize SEO since the product is not intended for a wide public audience.
00:04:14 This allows you to prioritize developing interactive features without dedicating significant resources to SEO optimization.
00:04:22 And on the other hand, if you're someone who cares about all of these points, well, you know what to choose.
00:04:28 Now, let's go a bit deeper into how code gets converted into the websites that we see.
00:04:34 Once the compilation process is complete, which involves converting code from a higher level programming language to a lower level representation,
00:04:43 such as binary code, our application goes through two crucial phases.
00:04:48 Build time and runtime.
00:04:50 Build time is a series of steps where we prepare our application code for production, involving steps of code compilation,
00:04:58 bundling, optimization and more.
00:05:01 In short, build time or compile time is the time period in which we, the developers, are compiling the code.
00:05:09 Remember that npm run dev script?
00:05:11 It's that command that generated the build of our application containing all the necessary static files, bundling, optimization,
00:05:19 dependency resolution, and more.
00:05:21 Now, when it comes to the runtime, it refers to the time period when the compiled or deployed application is actively executing and running involving the
00:05:32 dynamic execution of the application's code and the utilization of system resources.
00:05:37 In short, runtime is the time period when a user is running our application's piece of code.
00:05:45 It's about handling user interaction, such as user input, responding to events, to data processing, such as accessing data and interacting with external
00:05:55 services or APIs.
00:05:57 Now, there's also this thing called runtime environment.
00:06:01 And don't confuse this with the runtime we talked about just before.
00:06:06 That was the time period of an application, whereas RTE, or a runtime environment, is a specific environment in which a program or application runs during
00:06:17 its execution.
00:06:19 It provides a set of libraries, services, or runtime components that support the execution of the program.
00:06:25 So, Node.js, what is it?
00:06:29 It's a JavaScript runtime environment that allows us, developers, to run JavaScript code outside of the browser.
00:06:37 Similarly, Next.js provides two different runtime environments to execute our application's code.
00:06:44 The Node.js runtime, which is the default runtime that has access to all Node.js APIs in the ecosystem, as well as the edge runtime,
00:06:54 a lightweight runtime based on the web APIs with support to a limited subset of Node.js APIs.
00:07:01 Next.js offers the flexibility of choosing the runtime.
00:07:05 You can swiftly switch by changing one word, export const runtime, edge or Node.js.
00:07:13 It's set to Node.js by default.
00:07:15 And you just put this at the top of your file.
00:07:18 Isn't this amazing?
00:07:20 Just with a simple word change, a whole new ecosystem emerges.
00:07:24 It's like a snap of Thanos' finger and suddenly a completely different world opens up.
00:07:30 And at the end, let's talk about rendering strategies, which is the core of this lecture.
00:07:36 Depending on everything we discussed so far, such as rendering environments, the time periods, build time, runtime and more,
00:07:44 Next.js provides three strategies for rendering on the server.
00:07:49 Static site generation, incremental static generation, and server-side rendering.
00:07:55 So, let's discuss each one in detail.
00:07:58 Remember the build time.
00:08:00 Well, the famous SSG or static site generation happens at build time on server.
00:08:07 During the build process, the content is generated and converted into HTML, CSS and JavaScript files.
00:08:15 It doesn't require server interaction during runtime.
00:08:19 The generated static files can be hosted on a Content Delivery Network, CDN, and then served to the client as is.
00:08:27 The result, the rendered content, is cached and reused on subsequent requests, leading to fast content delivery and less server load.
00:08:37 This minimal processing results in higher performance.
00:08:41 Although SSG handles dynamic data during the build process, it requires a rebuild if you update anything, as it happens during the build time.
00:08:51 An example use case would be any documentation or blog and news websites.
00:08:57 All the articles or content are static 90% of the time.
00:09:02 It doesn't need any processing.
00:09:04 Once built, we ship it as is.
00:09:07 Whenever we want to update the content, we can simply rebuild it.
00:09:11 But that's still a limitation, right?
00:09:13 Because even though a documentation or a blog site is static, from time to time we want to change it.
00:09:19 So, to address this limitation, Next.js introduced incremental static generation.
00:09:26 It allows us to update these static pages after we build them without needing to rebuild the entire site.
00:09:34 The on-demand generation of ISR allows us to generate a specific page on-demand or in response to a user's request.
00:09:43 meaning a certain part of the websites or pages will be rendered at build time while other is generated only when needed,
00:09:52 at runtime.
00:09:54 This reduces the build time and improves the overall performance of the website by updating only requested pages for regeneration.
00:10:03 With this hybrid strategy, we now have the flexibility to manage content updates.
00:10:09 We can cache the static content as well as re-validate them if needed.
00:10:14 An example use case would be where we use SSG, what we discussed before, which is static, for article details page, and then ISG for showing a list of articles.
00:10:25 Because sometimes new articles might appear, we're going to statically render them, but then the list has to be dynamic because from time to time,
00:10:34 new articles can appear.
00:10:36 And last but not least, we have server-side rendering.
00:10:40 Dynamic rendering, in a nutshell.
00:10:43 It enables the generation of dynamic content for each request, providing fresh and interactive experiences.
00:10:50 But if we have SSG and ISG, why do we need SSR?
00:10:56 Well, both approaches offer valuable benefits, but their suitability depends on specific use cases.
00:11:03 SSR excels in situations where a website heavily relies on client-side interactivity and requires real-time updates.
00:11:12 It is particularly well suited for authentication, real-time collaborative applications such as chat platforms, editing tools,
00:11:20 and video streaming services.
00:11:22 SSR involves heavy server-side processing, where the server executes the code for every individual request, generates the necessary HTML,
00:11:32 and delivers the response along with the required JavaScript code for client-side interactivity.
00:11:38 Due to this dynamic nature, caching content responses becomes challenging, resulting in increased server load when compared to SSG or ISG.
00:11:48 However, the benefits of real-time interactivity and update content make SSR a valuable choice for specific application requirements.
00:11:59 But hey, we have the freedom to choose any of these rendering techniques for any part of your page code.
00:12:06 Yep, you read that right.
00:12:07 By default, Next.js uses static site generation.
00:12:12 However, we can easily switch to incremental static generation or server-side rendering depending on our requirements for different parts of our application.
00:12:22 The flexibility of Next.js allows us to pick the most suitable rendering approach for each page on our website.
00:12:29 Okay, okay, but when do we use each method?
00:12:33 Well, we have to ask ourselves a couple of questions.
00:12:36 First, will this page or content display the same information for each request?
00:12:42 If the answer is yes, we use static site generation or SSG.
00:12:47 If the answer is no, let's proceed to the next question.
00:12:51 Does this page or content require frequent information updates potentially every second?
00:12:57 If the answer is yes, we use SSR or server-side rendering.
00:13:01 If the answer is no, we use incremental static generation or ISG.
00:13:06 And, my friend, that wraps it up.
00:13:09 By understanding what it is and when to utilize it, we can make informed decisions that will impress your managers, bosses,
00:13:17 or just clients by how quickly their websites load.
00:13:20 The how of all of this is following in the next chapter, so keep watching.
00:13:25 But before you go, as usual, try to answer these questions.
00:13:30 What does rendering mean?
00:13:32 Explain different rendering strategies of Next.js.
00:13:36 What is build time and runtime?
00:13:38 Explain the difference between them in a web application life.
00:13:43 What are the benefits of rendering content in a client versus server environment?
00:13:49 And imagine you're developing a large-scale e-commerce platform that requires a rendering strategy to handle a high volume of product listings.
00:13:59 The platform needs to display product information, pricing, availability, and customer reviews.
00:14:06 Additionally, the platform aims to provide a fast and interactive user experience.
00:14:12 Considering the complex requirements of the e-commerce platform, discuss the trade-offs and factors you would consider when choosing between static site generation,
00:14:21 SSG, and server-side rendering, SSR, as the primary rendering strategy.
00:14:27 These are some questions you have to think about, and I would highly recommend pausing this video on each one and maybe even writing your answers somewhere.
00:14:35 I would even suggest keeping an active Notion document while you're going through this entire course.
00:14:41 Whatever your text editor of choice is, maybe it's a pen and paper.
00:14:45 Keep it open while going through the course or book or any kind of materials and write everything you learn down.
00:14:52 All Next.js 13 concepts, all gotchas, all tips and tricks, and maybe all obstacles you encountered.
00:14:59 That way, you'll be able to create a library of your knowledge sometimes often called a second brain, and you'll be able to utilize it to increase your
00:15:09 productivity and knowledge as a web developer around the topic of Next.js.
00:15:14 Great work on coming to the end of this lecture.
00:15:16 I know we covered a lot, so if you need to dive a bit deeper into some of these concepts, take your time and do that.