technology

URQL (makes graphl request on the client side) docs
next.js server rendered frontend template docs
chakra-ui for styling examples
graphql code generator (looks at queries and generates typescript types) docs
URQL graphcache (cache endpoint data after a response is sent from Backend)
URQL next.js, allows us to optionally server side render pages. routing docs, server side rendering is better for seo results, it does not need to evaluate JS. Client side rendering has to fetch the data, inside source code the data will initially be set to null. Server side rendering allows us to skip the fetching on the client side and directly insert the data. check index.tsx file. If the data needs to be found by google then we should server side the queries.

how server side rendering works

client(local:3000) makes a request to the next.js server -> the servver makes a req to the graphql server on localhost 4000 -> it builds the html -> sends back to your browser

first test the query in the graphql playground
copy and paste the query and paste it inside a new file inside the graphql folder.
run $ yarn gen , which will create types for the query and a hook on the client side
use the hook thats being exported to use the endpoint.