Server Side Rendering - getServerSideProps() in Next.js | NextJs Tutorial for Beginners #22
Aug 15, 2023
Server Side Rendering - getServerSideProps() in Next.js | NextJs Tutorial for Beginners #22
In this video we will talk about ssr in nextjs. Server side rendering renders and hydrates the HTML on the server before it is sent to the client!https://codewithharry.com as and when available!www.instagram.com/codewithharry https://www.codewithharry.com https://www.facebook.com/CodeWithHarry https://www.instagram.com/codewithharry/ https://twitter.com/Haris_Is_Here
Content
0 -> Today we'll see how we can use getServerSideProps
4.73 -> to generate HTML through the server.
7.217 -> That means the client will send a request to the server,
9.217 -> once the server receives this request,
11.577 -> then hydrate the page through all the APIs,
15 -> apply all the logic needed to generate the HTML
19.047 -> and finally, send the generated HTML page to the client
23.079 -> which has all the written content.
25.925 -> In this way, the client won't have to work to fetch data through APIs
30.316 -> and the first contextual paint will be very little,
34.305 -> the page will load a lot faster.
36.305 -> Let's go to the computer screen
37.691 -> and see how we can use getServerSideProps function
41.617 -> to perform server side rendering.
43.617 -> Let's get started with this video.
45.334 -> [MUSIC]
54.634 -> I'll write yarn dev again
57.015 -> and tell you how we do server side rendering.
62.359 -> So, I'll close all the components I'm not using.
66.496 -> I'll click close to the right.
68.496 -> And let's apply this to blog.js first.
71.258 -> Suppose my blog.js, I'll open my server first
76.073 -> so that we have a good idea of what we're doing.
80 -> Suppose I have this page and I want that
83.058 -> the server generates in such a way that
85.524 -> I have how to learn flask, how to learn Next.js,
87.868 -> right-click, view page source.
90.228 -> So that I have all of this in my source code.
93.223 -> I don't have it now, there are 0 search results when I tried.
97.805 -> If I search for JavaScript,
102.408 -> no results whatsoever, you also saw it.
104.81 -> Even when I search for flask, there'll be no result.
107.445 -> I want it to be displayed on visiting view page source
113.423 -> that means, become a part of my HTML content.
116.185 -> Now, we'll quickly write a function here
122.566 -> and that is getServerSideProps.
124.312 -> I'll also show you the relevant Next.js documentation.
128.492 -> nextjs getserversideprops
132.82 -> I'll also tell you what getServerSideProps are.
135.751 -> getServerSideProps are that you implement a function.
141.285 -> I'll copy this here.
143.179 -> It's not copying because it's an image.
145.496 -> Why did they add an image?
147.496 -> They should've let us copy it.
150 -> They added an entire image, why is this happening?
152.614 -> I'm unable to copy it, maybe it's due to dark mode.
156.476 -> Yeah, this extension was creating an issue.
158.476 -> I turned off dark mode, so it fixed itself.
161.534 -> Okay, I'll enable it again.
163.28 -> This is the function getServerSideProps.
167.502 -> I have to implement it.
169.29 -> Now see what I do, I'm writing harry Good boy.
175.226 -> I wrote the props harry Good boy here.
177.226 -> Now I can accept these props.
180.877 -> And I'll do a very simple thing.
184.401 -> I'll console.log the props.
187.925 -> Now see what happens here.
189.756 -> And I'm doing console.log to the props on the server.
192.243 -> By the way, how to learn flask etc. are also printed here.
198.052 -> Let it be for now, what we'll do is
200.835 -> we'll revisit it and immediately harry Good boy is here.
205.29 -> What does this mean?
206.507 -> It means whatever you'll export here,
212.147 -> it'll be available here as props.
214.147 -> That means whatever you put in props,
216.951 -> that will become available here, in your component.
221.044 -> These props run on server side.
223.047 -> The function runs on server side, sorry, not props.
225.703 -> This function runs on server side.
229.163 -> I'll zoom in, but I don't want to do this, it's boring.
232.708 -> harry Good boy, there's no meaning to it.
235.216 -> I mean, it does but not in the context of this blog.
238.592 -> I am a good boy, you all know that.
241.46 -> I'll copy it, in fact I'll cut it not copy,
245.894 -> I'll finish use effect, I won't use use effect.
249.65 -> That means I won't populate through JavaScript
252.941 -> on client side, I'm populating on server side now.
255.449 -> Now see what I do in it.
257.322 -> I pasted it here, I said console.log,
259.83 -> useeffect is running, I'll remove this too.
261.703 -> And I fetched it, and then what I did is
265 -> I did this, this function is async and it returns promise,
268.989 -> so the syntax will slightly change here.
270.799 -> So, I'll write let data = await fetch
274.809 -> and I won't use .then.
277.169 -> I'll only do this much and then
280.121 -> let myprops = await data.json.
288.3 -> Now I'll do something like this.
290.3 -> So myprops will have my props, now see what I do.
297.548 -> I'll return the props in this way, I'll say myprops.
302.955 -> And you'll see that as soon as I visit this page,
305.823 -> when I reload it, you can see
308.119 -> an error saying error serializing props returned
310.097 -> from getServerSideProps in blog.
313.061 -> Received object array, one minute, I made a mistake.
316.796 -> In props, I'll have to do it in this way.
320.679 -> If I reload it now, see what happens.
324.097 -> when I reload it.
325.843 -> Why did I remove console.log props? I need it.
329.134 -> When I reload it, you'll see that all the blogs are here.
336.107 -> Can you see them? They're in myprops.
338.573 -> That means myprops contains all my spices.
342.139 -> I'll change the name of myprops to allblogs.
355.863 -> I've written allblogs here.
357.863 -> Now if I reload it, it'll say allblogs.
361.81 -> So in my props, there is allblogs, I'll show you.
367.048 -> Myprops, this is the old one, see this.
370.487 -> Allblogs and it has all the blogs in the form of an array.
374.519 -> These are my blogs where I had done useState,
379.778 -> so I'll useState props.allBlogs.
383.534 -> And my blogs will be set.
385.534 -> I think this should be it and my work is done.
388.148 -> Now if I right click and view page source,
390.423 -> and show you the JavaScript, then it'll be there
393.312 -> and along with that, flask will also be there.
399.65 -> Flask is in my HTML, dev h3 everything is here.
403.851 -> So, this was server side rendering.
405.851 -> I hope you understood how server side rendering works.
409.777 -> Basically, why did we do this? You'll ask this.
412.645 -> The page looked fine before as well.
414.243 -> We did this to populate request on time,
418.507 -> to generate HTML on request time.
420.507 -> When we do it, the data will be in HTML page source too.
429.279 -> I hope you understood how this works.
431.66 -> In next video, we'll see how to do static site generation.
436.453 -> But before that, I want to show how to do the same here.
442.685 -> I'll be a little fast for this.
444.452 -> All of this work that we did in useEffect,
450.494 -> I'll cut this entire thing from here.
455 -> In fact, I'll cut this much from here.
457 -> I'll implement a function called
461.591 -> async function getServerSideProps.
464.417 -> I'll put the entire thing in this function.
470 -> Now I'll format document and paste this here.
477.291 -> After this, blog setblog, that's fine,
482.042 -> and useState, no I'll have to put it on top.
485 -> I won't make a state on server side.
487.466 -> So I did that, router = useRouter.
490.757 -> And I'll remove useEffect from here.
493.032 -> I'll simply use route= useRouter here.
499.836 -> I'll remove this statement from here and this from here.
503.233 -> Then it'll be slug = router.query.
506.143 -> Then done, format document, save.
509.836 -> I'll see if there's an error, there is.
512.556 -> Hooks can only be called inside a body of a function component.
515.085 -> So I can't use useRouter here.
517.085 -> Then how do I bring a slug?
518.895 -> If I type here console.log and context,
524.281 -> let's inspect this context object and see what it has.
528.735 -> If I save and reload and then peek at the console,
533.338 -> then I'll get to know what my context has.
536.184 -> See, there are a lot of things in context.
538.755 -> Cab you see? There are a lot of things.
541.665 -> So I'll see if I can get a URL somehow.
545 -> If I find a request, it'd be such good news.
547.889 -> So I'm searching for it and its request has a URL.
551.815 -> So I'll write .request.url, context.req.url
559.825 -> and it'll work, I don't need useRouter here.
564.153 -> I did this, and as soon as I do that see this.
568.079 -> I have an error but what I printed here, context.request.url
576.301 -> I want to see if I can see it printed.
578.957 -> I reloaded it, can I see context.request.url.
583.306 -> I had done next div
585.412 -> and yes I can see blogpst/how to learn flask.
587.983 -> So the thing that I was doing with router.query,
592.565 -> I'll find it context.request.url.
595.433 -> But we want query, so this won't work.
598.131 -> I can see this query but where is it?
601.147 -> I'll look at context.query.
603.147 -> I'll see if it's in context.query or some other object.
606.713 -> Maybe it's in response or in query.
609.433 -> .request.query if I'm not wrong.
613.676 -> I'll reload and then it shows .query undefined.
618.639 -> request.query is shown as undefined.
620.639 -> Where is it? I want the query, the URL is here.
624.84 -> I don't want URL, I want query.
627.835 -> This one, query.slug.
631.655 -> So if in context.request.query.
634.713 -> I'll print context.request and see if the query is there.
637.983 -> I know I'm taking a lot of time but see,
640.66 -> no one remembers which thing is in which object.
643.76 -> So even I'm going to use trial and error here.
648.024 -> I can't see the query here.
651.378 -> That means I've to write context.query directly.
656.214 -> Not sure.
658.447 -> If I write context.query then yes, context.query.
663.135 -> We wanted context.query, it took so much time to find it.
667.928 -> So I'll comment it out here.
669.738 -> And we don't need useRouter for now.
672.331 -> I'll erase the .then syntax because we don't need it.
676.341 -> We simply need to fetch and after that,
681.029 -> we'll use await syntax, so I'll copy this from here.
686.161 -> I'll copy it as it is.
688.394 -> And I'll just change the call for fetch.
691.558 -> Control X, control V.
695 -> And here I'll return myblog, not allblogs
699.581 -> because there's only one blog here.
701.412 -> There were a lot of blogs, if you remember.
703.666 -> So, myblog.
705 -> So I'll write props.myblog here and props here.
711.931 -> I hope you're understanding this
714.735 -> because I've done a lot of trial and error here.
716.989 -> But according to me, it should load now, and yes.
720.089 -> See, it has loaded.
721.518 -> Now if I right click and view page source,
723.518 -> see here, I'll use control F
725.878 -> and if I write something from here, like flask
728.809 -> or multi paradigm or even drivel,
732.185 -> see it showed up in HTML.
735.18 -> It wouldn't have earlier, you can try it if you want to.
737.921 -> So in this way, our ServerSideProps function works
741.127 -> and this process is called server side rendering.
744.122 -> We did server side rendering.
745.508 -> I hope everyone understood server side rendering.
749.201 -> If you haven't accessed this playlist yet,
751.688 -> which many haven't, open it right now.
754.45 -> Don't just ignore my words, access it
757.275 -> because if you have the whole course while watching,
760.715 -> then your learning will be optimal.
762.482 -> Open and bookmark it, access the playlist.
766.789 -> And watch the videos in a series, not from the middle.
770 -> Because there's a reason I've made it into a playlist.
772.762 -> That's all for this video.
774.466 -> Thank you so much guys for watching this video
776.466 -> and I will see you next time.
778.678 -> [MUSIC]
Source: https://www.youtube.com/watch?v=ZvGoW9p9at0
