SSR GraphQL with Next.js & AWS AppSync

Next.js makes building server-side rendered (SSR) applications a breeze. With the newest release of the AWS AppSync Apollo Client along with next-apollo-appsync, SSR support has been added & we can now use AWS AppSync with the framework.

Many developers are exploring SSR for a variety of reasons including improved performance & better & consistent SEO. Next.js is a popular lightweight open source framework for server-side rendered React applications.

In this post we’ll walk through how to create and initialize a new Next.js project, create a new AWS AppSync API, and wire it all together to demo SSR with GraphQL. The cool this is that this will only take us a total of around 50 lines of code.

To see the final codebase, check out this repo.

Creating the AWS AppSync API

The AppSync API will be for a basic todo list app.

Visit the AWS AppSync console and click Create API.

Here, we’ll give the API the name of TodoApp, choose Custom Schema & then click Create.

In the API dashboard, click Schema in the left menu, add the following schema and click Save

type Todo {
 id: ID!
 name: String!
 completed: Boolean!
}
type Query {
 fetchTodo(id…