Comments and Server-Side Rendering

[00:00 - 00:07] Comments and server-side rendering. So far we've been working with content that can be prefished and rendered in advance at build time.

[00:08 - 00:19] What if we wanted to use some dynamic content on our pages, such as comments? First of all, we wouldn't be able to use static site generation anymore, because users can write comments after we build our site, and we wouldn't be able to display them.

[00:20 - 00:25] This is where server-side rendering, or SSR, comes in. Updates on each request.

[00:26 - 00:33] As we recall, with SSR, pages get updated on each request. This is exactly what we need for our comments to be rendered and updated.

[00:34 - 00:42] We will still get rendered HTML from our server, but this HTML won't include comments at build time. Instead, comments will rendered live at request time on the server.

[00:43 - 00:47] Comments back in DPI. Let's create a mock API for our comments.

[00:48 - 00:55] The comment data structure will look like this. Each comment will have an ID, the author field, which is the name of the author of the comment.

[00:56 - 01:06] The content, which is the comment text, time, a string with relative time. In real API, it would be a timestamp or an ISO string, but for our example, a simple string works fine.

[01:07 - 01:17] A post is going to be an ID of the post that this comment is written for. You can copy the comments JSON from the code example attached to this lesson.

[01:18 - 01:22] Open server index.ts. Here, define a new endpoint.

[01:23 - 01:31] Up, get comments post, passing a callback request response. Inside of this function, we'll first get the post ID.

[01:32 - 01:42] It's a number from request params post. Then we get the comments for this post, const found equals comments filter.

[01:43 - 01:52] We filter the comments list by the post field comparing post to post ID. Then we return response JSON found.

[01:53 - 02:00] We load the comments same way as we did with the posts and categories, just by requiring the comments JSON. Open shared types.ts.

[02:01 - 02:07] Here, define a type for the comment. We'll need a bunch of other helper types as well.

[02:08 - 02:12] First, we need to define the person. Expert type person is a string.

[02:13 - 02:17] Expert type relative time. It's a string expert type.

[02:18 - 02:39] Comment is an object with fields ID, entity, id, author, of type person content , of type string time, relative time, and post entity id. In our example person is a simple string, but in real world, it could be a more complex data structure.

[02:40 - 02:53] Relative time is again a simple string, but as we discussed it previously while looking at the comments JSON, in real application, it could actually be an ISO string or a timestamp. Now let's define the API for the comments.

[02:54 - 03:03] Create a new file inside of the API folder comments fetch.ts. Here we expert async function fetch comments.

[03:04 - 03:25] It's going to receive post ID of type entity ID and return a promise of type comments array. Inside of this function, we get the response by waiting for the comments post ID request, and then we return await response JSON.

[03:26 - 03:29] Alright, now we've prepared the API to load the comments from the server.