00:00:00 Are you eager to dive into some Next.js code?
00:00:04 I'm sure you are.
00:00:05 Although writing code is important, we must first build our foundations.
00:00:11 It'll not only help you in clearing interviews, but also in making sound decisions in designing your application.
00:00:19 If your why isn't clear, you'll have no idea what you're doing, And you'll blame it on Next.js by saying that it's an overrated piece of technology.
00:00:30 That will only showcase your lack of knowledge.
00:00:33 It's a foolproof recipe to amaze everyone with your impressive ignorance.
00:00:40 So, perfect your why and your how will come naturally.
00:00:45 Now, let's time travel a bit to see how we were used to doing things before with different technologies.
00:00:52 First, the vanilla approach.
00:00:54 HTML, CSS and JavaScript.
00:00:58 Websites built using the web's fundamental elements, namely HTML, CSS, and JavaScript, function differently compared to the latest technologies.
00:01:07 When a user visits such a website, their browser or the client sends a request to the server.
00:01:16 which is another computer where this site is hosted, asking for the content to be displayed.
00:01:22 Traditionally, for each of these requests, the server responds by sending three files, HTML, CSS, and JavaScript.
00:01:31 Of course, only if JavaScript code is involved.
00:01:34 The client browser receives these files and begins by analyzing the HTML file.
00:01:40 Then, it applies the styles from the CSS file and implements any user interaction, such as event handlers or dynamic behavior specified in the JavaScript
00:01:51 file on the web page.
00:01:52 If the website has multiple pages, the client will send additional requests to the server for each page.
00:01:59 And in each response, the server will again send three files containing the respective content needed to render each subsequent page.
00:02:09 Well, what's the catch?
00:02:10 Let's talk about processing, bandwidth and load time.
00:02:15 Most processing occurs on the client side, meaning the user's web browser is responsible for rendering the HTML page and executing any JavaScript code present.
00:02:26 However, if the website is complex and the user's device needs more capabilities, it can strain the browser and become too much to handle.
00:02:37 When it comes to bandwidth, as the server sends complete files to the client for each page request, it increases bandwidth usage.
00:02:46 This becomes particularly significant when dealing with complex websites containing numerous pages and video and audio clips scattered throughout the website.
00:02:57 and the initial page load time when compared to the latest technologies.
00:03:02 This is due to the complete transfer of files for each request.
00:03:07 Only after the server has sent all of the necessary files and the browser has finished parsing everything will we be able to view the website's content.
00:03:17 Now, let's get a bit more modern.
00:03:19 Let's talk about the React way.
00:03:23 React helped to improve the development lifecycle by introducing components, virtual DOM, and the client and server mechanism.
00:03:33 When you access a React website, the client's browser sends a request to the server for the website content.
00:03:41 In response, the server sends a minimal HTML file, which serves as the entry point for the entire application along with a bundled JavaScript file.
00:03:52 React initiates client-side rendering using this JavaScript file, manipulating the virtual DOM.
00:04:00 Instead of directly modifying the actual DOM, React updates the virtual DOM and then applies only the necessary changes to the real DOM,
00:04:10 resulting in the desired page display.
00:04:13 React utilizes its client-side routing library, React Router, to navigate to different pages within the React application.
00:04:22 This library enables changing the route without a full server request, preventing page refreshes.
00:04:31 React Router re-renders the relevant components based on the new URL when a new route is triggered.
00:04:39 If the new page requires fetching data from the server, the corresponding components initiate requests to retrieve the necessary data.
00:04:48 Now, what's the catch with the React way?
00:04:51 Why don't we stop there?
00:04:53 Well, let's talk about complexity, processing, and SEO.
00:04:59 Building a React application can present greater complexity than traditional HTML, CSS, and JavaScript websites.
00:05:08 It involves thinking in components, managing state and props, and working with the virtual DOM, which may require a learning curve for developers new to React.
00:05:19 Similar to the traditional approach, React primarily performs client-side rendering.
00:05:25 it heavily relies on JavaScript for initial rendering and subsequent requests to update the user interface, which are all handled on the client's browser.
00:05:36 However, this reliance on client-side rendering can delay rendering and interactivity, particularly on devices with slower processors and limited resources.
00:05:48 And yes, if you recall, we previously touched upon a notable drawback of React when compared to Next.js in the introduction lecture.
00:05:58 The issue is that search engine crawlers might not be able to fully access the website's content since everything is handled through JavaScript and only
00:06:08 rendered on the client side.
00:06:10 As a result, it impacts the website's visibility in search engine results.
00:06:15 And finally, let's talk about the Next.js way, which is a blend of both.
00:06:22 Knowing the benefits and limitations of both techniques, Vercell developers allowed us to choose where to render the content,
00:06:30 on the client or on the server.
00:06:33 Typically, when a user visits a Next.js site, the client sends the request to the server, which starts executing React components,
00:06:43 generates HTML, CSS, and JavaScript files, and sends back the fully rendered HTML to the client as a response.
00:06:51 This file includes initial content, fetch data, and React component markup, making the client render it immediately without waiting for JavaScript to download
00:07:02 and execute.
00:07:03 But it doesn't mean we don't receive any JavaScript files.
00:07:07 The server will still send the JavaScript code as needed for the user interaction.
00:07:12 From here, Next.js takes over and performs client-side hydration.
00:07:18 Have you ever encountered the issue of a hydration error where the user interface doesn't match what was originally rendered on the server?
00:07:26 Well, this is what it is about.
00:07:28 Hydration is attaching JavaScript event handlers and interactivity to the pre-rendered HTML.
00:07:36 And when the placeholders of React components, for example, divs, forms, spans, don't match to what's being rendered on the client side,
00:07:45 you can see that error.
00:07:46 This is what it is, the hot topic of web development, SSR.
00:07:51 Server-side rendering.
00:07:54 And for subsequent requests, you have full control over where to render your page content, either on the server-side or on the client-side.
00:08:03 In the next lecture, we're going to talk in depth about different types of server-side rendering, along with client-side rendering,
00:08:11 and when and where to render what.
00:08:14 So prepare your typing fingers, because we're finally diving into the code.
