TL;DR: Server side render websites using Next.js and GraphQL APIs over postgres using Hasura GraphQL Engine. Instant setup. Tutorial/boilerplate -> nextjs-postgres-graphql

Building server side rendered react website is hard, next.js commits to solve this problem beautifully. Hasura GraphQL engine makes it a breeze to setup a GraphQL server on a postgres database. In this post we will take a look at how we can put the 2 together, to use GraphQL APIs to fetch data on the server and use this data in server rendered pages using next.js.

Next.js

Next.js makes building server side rendered websites fast. It is developed by the awesome peeps at Zeit. This is how it works:

Pages: Next.js comes with its own opinion on how your project directory structure should be. It assumes a directory called pagesand every .js file inside it becomes a distinct route. It cleverly makes use of the filesystem as an API to generate these pages on the server side.
Server side data fetching: Next.js provides a way to fetch dynamic data required for a page to completely render on the server. It respects a static async function called getInitialProps. This function resolves to data which is passed as props to the page component which then rendered on the server and returned to the user.

GraphQL & Hasura

GraphQL gives you ability to fetch the exact data you need for your UI and is great for building UIs with encapsulated data requirements. Hasura gives you a secure GraphQL endpoint instantly on your Postgres database, which allows you to focus on building your website with data from your database and not worry about setting up a GraphQL server.

next-apollo: GraphQL in next.js

Adam Soffer has come up with the amazing next-apollo library which uses getDataFromTree from react-apollo to SSR pages that are configured with a GraphQL query.

Next.js + Hasura + next-apollo = SSR react apps with GraphQL!

I have put together a boilerplate and tutorial so that you can get started quickly!

Check it out on github.

Take it for a spin and let us know what you think. If you have any questions or run into any trouble, feel free to reach out to us on twitter, github or on our discord server.

Loading...