Building decoupled websites with GraphQL and Next.js

We're going to talk about an easy decoupled site building with GraphQL you'll and next yes as said we're quite a quite tight on time so I will compress things quite fast hopefully I'll actually set the timer that I remember to finish in 15 minutes and then continue for a few minutes more but in any case so this will by default presume that you know a lot more about JavaScript than I do that's the first thing that you need to remember because I have done JavaScript for a long time but I kind of understand it but not really.

So first a few things about me so I've been doing web development for over  even before for fun so I'm interesting all kinds of things related to technology so not only what page is and so. Pretty much everything currently I mostly work with content things mostly because I hate to do forms. I do application development I have to create forms and forms are horrible still today. I do have a working knowledge of of TypeScript and JavaScript which is pretty much the same thing and also mostly then also symphony in PHP so those are the languages that I I do do type somewhat fluently.

My day job is at easy systems it's a company who creates fantastic content management tools for companies such as the Financial Times, the Economist, Comcast and Telefónica for example. As you can imagine the enterprise-grade content management can be quite boring, so I do other things as well during night times at small business which pays the hosting hosting for my hobbies.

This talk today is one of the things that I have experimented with, but I thought it would be useful to share because it might be useful for somebody else as well. If you see this image this image is me it's my personal branding I created with Gimp so it's great I don't know let's see but in any case that's enough about me because we need to move forward so we will talk about a bit basic so decoupled site-building what is it then a brief introduction to GraphQL And Next.js

What are they then we'll take a brief walkthrough of the actual Hello World application which I've created with these two technologies and then finally hopefully I will have take the time to actually get to my experiences kind of as a layman of these things, where I might have gives some value on how they might actually work in my opinion or not so first of all a decoupled sight building, as discussed websites have been around for a long time. You don't get rich by building a WordPress site.

Introduction to building websites with decoupled methods

Unless you build the WordPress site in five minutes then you can be rich but in any case so for decouple building decouple site building it's technically that you have some kind of API from a content management system that you get only the data and in somewhere you create a website or even a mobile application something like that that then will be consumed and traditionally its REST-based or some kind of JavaScript clued guest so you just have you know output some kind of JSON instead of that kind of academic rest where you have to get everything for everything and so on we've all probably taken some shortcuts there.

But anyway so in any case there's been obviously for for a number of years there's been a buzz around you know do couple things and you can build things with rest api's and so on which is nice but so far it's not the standard way of creating sites probably if you have a 9 out of 10 web sites in Finland probably are nowadays probably something like WordPress or Drupal but very few actually built in the decoupled way.

If it is it's kind of a boutique thing that we've just decided to build our own website like this and because this kind of basic content management stuff is very bulk stuff you can't really like spend time on a customer site to make it very fancy and then or you can but then probably you won't make much money of the project so in this case obviously then you have specific groups where this can actually build you value that you have an outstanding content driven website but for many cases it's actually nobody cares how you built it as long as you build it fast you build it fast and cheap.

That said so to the brief introduction to these two technologies which I am an amateur but I think that's also where I can give you value, because I don't know these so anyway these are two separate technologies that I think work very well together. Both are very opinionated they don't leave space for let me just figure out how I would like to put these things together because that kind of thing is then the time that takes time away from the things that you need to produce very quickly and efficiently and in this case the end result is just the website.

It's a website but the key thing here is that the first load is server-side rendered (SSR) React in this case and then subsequently if you click around then you jump into the API driven thing so only the first time you get all the the boilerplate HTML and so on and as said specific cases for example the Economistsite has been now for six months or so it's been right driven by similar approach it actually uses GraphQL but not Next.js. This is one case where if publishing is your thing then this can be valuable.

Since I don't want to tie myself too much into any technology so there's a few different ways that you can obviously build similar things at least if your interview you can use Next.js and then something from from I think it was Netflix to GraphQL there's Falcor, which is a similar kind of thing from them. Who knows what's coming outside because you can render JavaScript both on the client side and the server side just as well nowadays.

Introduction to GraphQL

Most of you know about GraphQL at least by name so from from Facebook released to only two years ago it's it seems like it's ages ago but only two years ago so it's an alternative to REST and it's a query language for your API it's not a SQL for Graph Databases (actually it can be because there's a Dgraph GraphQL database that actually uses this syntax for its system lancuage.As said you can dive into these later if you want to get more information.

As said GraphQL is a rest alternative, and the key thing here is it doesn't use verbs. Everything is a POST you POST you want to update you post when you want to request you don't have the verbs that you have in rest and implementations already exist in in realm of CMS for many CMS and content api's for this presentation or demo I also tried at least Cosmic.js as well as GraphCMS both of which were Fisher-Price toys to me so I chose not to use them because I didn't feel comfortable then with them.

Anyway that one of the key things which you can get an advantage as opposed to REST is that you can embed resources within a single request. So instead of sending give me all the members 50 members and then for each of those you want the the profile image you would get a total of 51 HTTP requests. One of the key things here is obviously then that you can do that in one.

Introduction to Next.js

Next.js first release was in 2016 it's not even a year old, but it's moved  forward very fast. It is a JavaScript framework, not a library - it's a framework that is universal it handles rendering and routing both on the client and the server side it happens to use React.js currently for the view layer. You can use Preact.js, if you don't like patents or whatever about Facebook software.

In any case so you can probably use a lot of other things as well but the key thing here is that a framework has already made a lot of decisions for me. That's what I like I don't want to invest too much thinking what is the best routing way, because somebody decided well this is how you route well this is how you route and so on.

It is very simple to get started with Next.js, but it is also very customizable so you can use different Node.js frameworks you can use Express or Koa to do your back-end stuff and so on and enough about that again you can find more information one note is it is actually from a company called ZEIT and there's some Finnish guys also working on this product so I'm not sure if they're here but anyway I think it's a really really nice product from my experience then we'll go into the kind of demo.

Demo of decoupled CMS with Next.js and GraphQL

Because I like to do Hello Worlds because that's all of my attention span is enough for is for this session I created something which you also had the source code so you can see how it's built but it's technically any example of how you can use this technology pair together it's a conference site for fantastic the largest Finnish speaking react conference in the World is this October. Welcome everybody!

Technically this is just a simple website where you can go to EwXR.JA and you so you can go and you can click the links and from within this network you can see different things so if I click here it only does that the GraphQL request and you can also see other pages, but then that the point here is that what you have is a server-side rendered application. I did not need to know how this is built. That's why I like it that's why I think it can be useful for content management, which is very low margin business.

Rhis is kind of the the the core thing which I wanted to just do a hello world on and it's together with GraphQL I think it was quite interesting to do so in this case for the back end. I used what I used daily at work so I use the eZ Platform tool which is a content management system which is based on a tree structure and obviously a lot of other things as well. But I have a root node here so just you have a rough idea on how the backend looks like. It's a very simple content structure but I also have a GraphQL view of view into this. If you see an interface like this this is GraphiQL it's a client to GraphQL which is very good.

One of the key things which I didn't mention about GraphQL is that the API sends its documentation over to the client it's called introspection or some fancy word but introspection well I can't spell it now. In any case I can open any GraphQL API and see what kind of queries I can make. I can also do modifications my queries are here this query or whatever you can do here is always dependent on your application domain obviously.

GraphQL doesn't mean that everything will work in the same way, but for example in the case where we had this example I can look that we have this is location ID 68 I know the domain how this works so have a child so we have location children and because we get a lot of information from the API. I also get auto completion so I can write location children let me see if I can get a little bit bigger then. I get ID nothing because it's I didn't send any ID so what I need to do is send.

What I'm doing is I'm now getting location children by default it gives me ideas because IDs are required I can also get more things I can get the values or content. This is a location object location doesn't have any fields I can expand from here and then I can get the values here or fields.  I can get the fields here if I want from the field I want the individual values I can get them like this.

You can see basically that it works like this so any kind of request I make to the backend it will return it in the same exact shape as said it's only a syntax and you need to obviously have all the implementation for your application as well but the key here is as opposed to REST you will have kind of different responses depending on your query and so on.

Good that was quite fast hopefully so one thing that we can then take a look that is just a quick look at the functionality so one of the key things about next is that if I have a here it running so if I have just on my local if I add one single file it's an entry point which will then boot a single component, which in this case will be about. All I need to do is to write a very simple stateless component and the the framework will now already handle everything for me in the sense that this about page.

I will clear this if I click here so a lot of consultant will miss money because they couldn't spend I don't know 20 days on server-side rendering because well I just created one in five minutes so it's natural progression and probably there's some opinions make which you may not like but it is very efficient if you want this kind of thing and then that was obviously very simple and had nothing to do with GraphQL.

Well it was just a very basic Hello World, but then if you do want to send parameters - to the backend so in this case we have react now and activity 73 if you want this back-end to receive parameters which it can't receive when if just like index dot PHP you would like index dot PHP and question mark it ID equals 73 it's very similar.

So you do need a custom server but the custom server technically you just pass some parameters and then you can hook on to those parameters and then perform some actions there as said you will have access to the full glorious layout and all of the the code for your own experiments and and so on as said the code base of next is actually very nice in the sense that they give you examples of how you would do things.

Some of the things which are very simple are not very simple to do in an environment like this like Google Analytics normally well I just want Google Analytics just paste the tag but here no no no you need to make sure you download everything because it's it's JavaScript it's fancy. Iin our index.js, because you can list multiple different queries into a single query within graph QL here I get the main content here.

So this is technically just this but I also do get the navigation menu here so going back here the Next.js has its a React class or component class or component object when you add get initial props then this is the one that will initialize it and so on. Here pretty standard stuff I'm using the ES6 template literals. Then I get the ID then I pass that this is my GraphQL specific to this page it has some because we I could also serve something else than HTML.

I can also get the activities so in this case a single request will also yield the child objects so I will only do one request which is very good and obviously. Whatever you kind of feel like doing is is been standard you know React.js work and so on. With the navigation obviously then you can reuse your components across different pages.

The benefits of using GraphQL and Next.js

Then to the actual meat of it so what I kind of view as valuable. I kind of work everyday with this kind of so I think this does allow good thing. The best thing is that it allows you to try new things because you can get really stuck in like well I can just create a website really fast well yeah you can create it like 55 times but this will allow you to create it again and again.

It has some structure which is defined so instead of one person building a website and then nobody ever will know how to update that because well that person left well it's just the website yeah but it's so hard it can't be updated okay and we'll go to somebody else I do like React as templating engine because it forces structure it's like XSL. You have to have it valid so

It's good also you can export HTML from the Next.js, it supports that you export HTML so then you don't even need to run Node.js on a server  - you just run HTML on a server somewhere which is really good. I don't know how you would do it with a dynamic setup like this, but technically you can do it.

I did find that it's opinionated but for me it was flexible enough maybe if you have some thought or but this is wrong. This is how it shouldn't be done maybe it's not good for you it does allow you to have no-compromise SEO because the server renders the HTML for the first time so the robots will get the full HTML. Which is good and and then of course you can use whatever React you can you could then pick up from there.

I think for even more than sites I would say eCommerce is where you actually make money of the site so for e-commerce this is probably really good because you can have horrible Magento thing with an API, and still create a great front-end with a horrible back-end. Not to say that it's something like that but anyway yeah so you can use whatever things you're used to and so.

Of course you can take this up or not you can integrate some kind of mobile or other state management tools like MobX, which you may may like. From my understanding it's quite standard JavaScript practices that are are being applied.

Disadvantages of using GraphQL and Next.js

There's a curve for JavaScript JSX. if you just want to quickly get up to it of course you're thinking it's easy. But if you ask a man from the street how do you code in PHP well you just echo and then it works but hey in JSX well this but then you know of course you know need to know a few things. So it's there's a more higher learning curve than in doing WordPress templating for sure.

Then you'll lose a lot of CMS capabilities. CMS is content management, but it has a lot to do with layout management you create forms to feedback and all that kind of thing so it's you know you have content full but content will only give you forms you need to do or forms about data so you need to add a lot more.

And so on another thing which can be complex to do is analytics so of course you need to pick it up make sure it blows on each virtual request or whatever you want to call it big when you use just the API but also if you just put in something some random script and then if it gets to React but then it's marketing paste at something which is not valid JSX. Then it will put and then everybody is calling that why the website did break.

When we had WordPress it never broke because HTML is very resilient you just you know put whatever and the browser will figure it out it won't black or get a horrible screen on you it will kind of look like shit. But it's still good yeah.Obviously regular HTTP caching strategies won't work because it's POST.

In addition you have like two different things you had one server-side rendered view, if you cache that then what if your feed is not cached and then you can end up probably in a new world of of issues especially if you're thinking of sort of site building.

Still like server plus browser development can be quirky I noticed this when I was doing just basic GraphQL things the course obviously the server didn't mind that I didn't have CORS headers it just got that but the browser was like what. So this is the kind of thing that most of the things. Ff you look now there's really good utilities for isomorphic fetch so you can do or the GraphQL library that which I use so you use it both on server and client which is mostly very good.

I can imagine you will have some kind of headaches which very simple thing will actually be very hard yeah and of course it's a from Facebook and there's patents so I don't know GitHub uses it so maybe they're fucked also, if they use it for patents I don't know.

The dangers of using GraphQL and Next.js

A decoupled site doesn't really provide any value. I don't know because you the initial page load paid the initial volume is higher if your user will never serve only that one page. Well, that doesn't really matter so it's kind of well it's not going to be any kind of fantastic experience. You can have it without this.

Another one is obviously the first load especially if you don't use caching for your your back-end generated React.js code you will need to render that each time for each user using React, which is not like even if it's Node you still have to do a lot of work. Instead of just sending out an HTML blob so so it will kind of create your CPU boud server load.

And also then the API calls will block if your API really slow then the initial response will be really slow because you kind of just wait to get the graph queue or any response. In the first time so it's a kind of can be even worse and then I can imagine like the caching stuff, which I briefly talked about can get really hairy and difficult and hard to find bugs.

If you go really fancy fancy regarding login or then you just don't cache maybe at all for logged users is one option then one thing that I can actually think about is the GraphQL - you all you could see that is very open it tells you what exactly what it can do so it's also a security hazard.

Because I tell you well you can find all users here then like okay let me try if I can find all users oh I can find every user. so if you really just like tells you that what you can do so probably if you do want to expose a public Public GraphQL API I would create a separate endpoint which use basic specifically select what you want to show not have like a default one.

Like this because also another thing regards to security is that do load-pull to GraphQL injections, because I can imagine then that if we take a look at this code maybe here yes here so what I'm writing here is a GraphQL inline. So I don't know, probably this ID I didn't sanitize it at all.

It's like you'll just escape and do SQL injection but in GraphQL so I can imagine that's one thing that if you just kind of are intoxicated with the power of graph QL then this will happen. Then somebody will be angry because things were work fast but were shit good.

Conclusion

We're a bit over time but you can find the slides they're easier easiest way and best place to find them is obviously by clicking React.nu. Then there's a view source link so you can find the source and you can find the whole application not the API the API is locked down so you cannot find it. but if you're interested in how it works this is where you can get to the details and obviously .

Then yeah the slides are also there will probably be shared by the organising team for for the event so thank you for for this time hope.

It's done yeah all right um so yeah I think like thanks thanks for the talk it's interesting we've been actually building a publishing website for the past nine months with this exact stack except for the Next.js we have a home-brewed Express app doing this. At the Finnish publishing company and we're actually using PHP as a back-end for the GraphQL server so if you're into PHP you should try the Youshido library.

Yeah then it also has a PHP back-end currently okay I know there's two bundles but I didn't come here to talk about PHP. No, o all right so um so for us like your the concerns you had hasn't been that much like there's being like at least known performance issues. We have like a very very quick responsive API and there's no blocking actions or anything like that.

But of course you have to kind of put your mind into it like how you build it but I would like to ask a little bit like quickly about what's open yet opinionated part about Next.js What's the most opinionated part that you found because? I have maybe limited amount I didn't really find the only opinion it has to be really kind of like React so one thing. You can't use react router probably order I think it uses react routers probably by default.

Obviously longevity is one question but I think this is one of the example cases where they have actually used Next.js and if you use it on NPM maybe somebody else also uses it. Yeah, but for me I said nothing came into my way. But then again I only build websites without forms. Yeah we have some forms. They'll have been working like pretty well yeah because mutations.

I imagine that you could integrate any kind of React thing into the flow yeah if someone's like interested in this stock you can come ask me we're using a polo for the client so that has to be working really well I'll be glad to talk about it if you want to hear more um so yeah thanks I guess anyone else all right good okay we're we're probably twice the time but is that enough thank you.