Adding comments to a page

[00:00 - 00:18] Adding comments to a page. We're now ready to add the comments sections to a page. Open the pages, post, IDTSX, update the post props, add the comments, comments, an array of comment type. Now we get an error in the get static props because the comments is missing on the return type.

[00:19 - 00:26] Define the comments. For now it's gonna be an empty array and pass it along with the post. Okay, the error is gone.

[00:27 - 00:56] Now update the post component. Wrap the post body into a fragment and below the post body add comments section, get the comments from the props, pass them to the comments section and passing the post post ID. Alright, now let's update the statically generated page to use server side rendering. Change get static props to get server side props. Change the type to get server side props.

[00:57 - 01:21] Here as well, import it from next. It will work quite similar to get static props. So we can leave almost everything as it was before. Just change how we get the comments. We do await, fetch, comments for the params ID for the given post. Impertate from the API module and we are done. If you open the site in the browser, you will get an error.

[01:22 - 01:35] It is important to remove the get static paths because they cannot work with get server side props. Let's remove it. Now if we open website in the browser, then we should be able to add a comment. It should reload the page and we should see it updated.