00:00:02 So far, we explored different ways and approaches of increasing the view count and at the same time having discussions on how data fetching and rendering

00:00:12 and just general optimization works with the Next.js.

00:00:15 But after all of these approaches, is there another approach that might be that perfect one?

00:00:21 And thankfully, the answer is yes.

00:00:24 And it comes in a form of a new Next.js feature called After.

00:00:28 Allowing you to schedule work to be executed after a response or prerender is finished.

00:00:34 This is useful for tasks and other side effects that should not block the response, such as logging or analytics.

00:00:41 In this case, updating the view count.

00:00:44 It can be used in a server component, including generate metadata, server actions, route handlers, and middleware.

00:00:51 And calling it is super simple.

00:00:53 The function accepts a callback that'll be executed after the response or prerender is finished.

00:01:00 You simply put it at the top of your component, after, and then equal a function that you want to execute.

00:01:06 In this case, increase the number of views.

00:01:09 Sorry for this widescreen flash after staring at a dark screen for such a long time, but I had to show you this diagram.

00:01:16 The after function in Next.js is a part of the middleware API, allowing you to execute code after a response has been sent to the client.

00:01:26 So let me explain this diagram right here.

00:01:28 The process begins when a client, like a web browser, sends an HTTP request over to your Next.js application.

00:01:37 Middleware can then intercept that request and perform tasks like authentication, logging, or request modification, the middleware then passes that potentially

00:01:48 modified request to the Next.js server.

00:01:50 After that, if needed, the Next.js server then interacts with the database to fetch the required data, and finally, it generates a response.

00:02:00 Then that response is sent back through the middleware all the way to the client.

00:02:05 The client is finally happy as it can process the response.

00:02:09 And now here's the cool part.

00:02:10 After the response has been sent, meaning your user is already happily browsing your website at this time, the after function is automatically triggered,

00:02:21 hence the word after.

00:02:22 The after function accesses the details about the response that was sent, And it can also send out additional analytics data to an external service without

00:02:33 delaying the client's response, like maybe updating Google Analytics or something like that.

00:02:37 Or it might update the database with information about the completed request, such as what we want to do, which is increment the number of views in the database.

00:02:47 And finally, it performs cleanup tasks.

00:02:49 So, here are the key points to remember about the after function.

00:02:53 It runs asynchronously after the response has been sent to the client.

00:02:58 It doesn't affect the response time experienced by the client.

00:03:02 It's useful for tasks that don't need to block the response, such as logging, analytics, or cleanup operations.

00:03:09 And it can access information about the response but can't modify it.

00:03:14 This flow allows for efficient request handling while still enabling important post-response tasks to be performed.

00:03:23 The keyword here, after and post-response.

00:03:26 With that in mind, let me show you how we can implement the after function in action.

00:03:30 Head over to our question details page.

00:03:33 So that is the question under ID.

00:03:36 this one right here, where we implemented parallel data fetching.

00:03:39 Instead of that, let's once again split them out, so we'll have the increment views first, and then we can just have the getQuestions called separately,

00:03:48 not within the awaitPromiseAll.

00:03:51 By saying const, destructure the response.

00:03:55 is equal to the call.

00:03:57 So once again, now we have just two separated server action calls.

00:04:01 So what we can do now is we can call the question details immediately at the top, but only after we render the initial data.

00:04:11 So after we can import this from next server, we can then call an asynchronous function within which we can simply call the await increment views.

00:04:22 So even though it seems like this is happening first, this is happening second, and the return is happening third, actually what'll happen is question

00:04:32 details will get fetched.

00:04:33 Immediately, we will render this without blocking the UI, and only after it has been rendered and shown to the user, only after we'll actually increment

00:04:43 the number of views.

00:04:44 So back in the browser, it seems like this post currently has 41 views.

00:04:49 So if we click on it, Oh, it's still 41, until we go back and then it updates to 42. But in this case, I would even be okay with that.

00:04:59 I mean, just think about YouTube.

00:05:01 You don't see the views immediately going up, but only after some time.

00:05:06 And that's because YouTube tried to balance the quality of the user experience and performance.

00:05:11 You can use the use effect or parallel loading if you care about showing this single number going up, But if you care about the performance of rendering

00:05:19 this entire page sooner and showing it to the user, well, then we have the obvious choice.

00:05:25 But in any case, the choice is yours to make.

00:05:28 So now if you open up the network tab and the reload, you should be able to see fewer amounts of requests being made, or rather seeing the website rendered sooner.

00:05:37 And after it has rendered, we then try to increment the number of views without blocking the main user response, so your users get faster page results.

00:05:46 Every method has its pros and cons.

00:05:49 By using the after, you may not see the view counter going up immediately, but you get much faster performance than before.

00:05:55 As I said before, the choice is yours to make.

00:05:59 But the most important thing is that with these types of lessons, even though we had like four or five lessons now on just incrementing a single little

00:06:07 number of the page, which doesn't really matter, let's be honest.

00:06:10 What matters is that you get to make the choice because you have the underlying knowledge of how Next.js works under the hood.