Fetch Data Server Side using withSSRContext
To get our data from AWS, we are going to use withSSRContext. This will fetch our data on the server-side so we won't need to rebuild the site every time we get a new blog and the front end will be more performant. Server-Side Rendering is an abstraction built on top of GraphQL so we don't have to write GraphQL queries.
Instructor: [0:00] I want to render all my blogs on the home page. First, I need a few imports. I'll import withSSRContext from AWS Amplify. I'll also import SerializedModel from AWS Amplify DataStore server-side rendering. Then, I'll import my blog model from my models directory.
[0:29] I'll create a getServerSide props function. This will allow me to perform the data fetching on the server side. We won't need to rebuild the site every time we get a new blog. Also, the frontend will be more performant if we fetch the data on the server side. We'll create an instance of withServerSideContext. This will allow us to interact with AWS Amplify on the server side.
[0:48] I'm going to create a variable for my blog data. Then, I'll add a try-catch block. Inside the try block, I'll query for all my data. We'll be using data store to interact with our data.
[1:05] It leverages offline and online data storage without any additional developer work. It's an abstraction on top of GraphQL so that we don't have to write verbose GraphQL queries. If there's an error, we'll console.log that error. We'll return the blogs as props from this function.
[1:28] We'll use the serialized model function to convert the blog data into a true JSON so we can pass it as a prop to the home component. We'll destructure the blogs from the props object. We'll map through our blogs and render them on the page. The key will be the blog's ID.
[1:47] We'll render the blog name in each header. Now if I view my app in the browser, I'll see all the blog posts that I created. We fetched our data from AWS Amplify using server-side rendering with Next.js. We then displayed our data on the page.