Comments and Server-Side Rendering
Get the project source code below, and follow along with the lesson material.
Download Project Source CodeTo set up the project on your local machine, please follow the directions provided in the README.md
file. If you run into any issues with running the project source code, then feel free to reach out to the author in the course's Discord channel.
Lesson Transcript
[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.
This lesson preview is part of the Fullstack React with TypeScript Masterclass course and can be unlocked immediately with a \newline Pro subscription or a single-time purchase. Already have access to this course? Log in here.
Get unlimited access to Fullstack React with TypeScript Masterclass, plus 70+ \newline books, guides and courses with the \newline Pro subscription.
![Thumbnail for the \newline course Fullstack React with TypeScript Masterclass](/_next/image?url=https%3A%2F%2Fs3.amazonaws.com%2Fassets.fullstack.io%2Fn%2F20220425171607321_CoverImage_FSReactWTypeScript_Masterclas.png&w=3840&q=75)