 Presentation about pre-rendering media sets have not just been notified. My name is Wolfgang Ziegler or Fago on video talk. My Twitter handle is the real Fago. You might know me like from some of my Drupal contributions already. Like I worked a lot on Drupal 8 entity API for Core. I'm also like maintainer of the type data API for. And in Drupal 7 I wrote quite some popular Drupal content modules like rules entity API of your collection. I'm running a small Drupal company, Tonomix game behind Vienna, and I'm working there as CEO C2. So what's pre-rendering actually? So pre-rendering is like basically when you have a data source like in our case Drupal and some sort of pre-rendering process which generates static files. So that's very convenient because static files are really fast. So why would you do it? It's fast. And it's also like very robust static files. Once they are up, they are up and there's like no way of that. Basically breaking it very easily. And then pre-generation is also a very easy way to decouple because like all of the modern frontend frameworks are also like tools for pre-rendering so you can use them. And that way you can decouple also without any SEO concerns or you can also like really keep the hosting constant, the complexity down because you don't have any Node.js zero set rendering stack to maintain around. So that's like really a good and simple way to get started with all the modern frontend frameworks. In this presentation I'm talking about Node.js. So what Node.js? It's a progressive VJS framework. So what's VJS? VJS actually is a very approachable modern frontend library. It's one of the main alternatives to REC I would say. And we decided to use Vue because it's like really an approachable library. So it tries to stick to the HTML standards. It makes it very easy to get into. It has great documentation. Also it's very versatile. It's easy to get started on it and it's also incrementally adoptable. So there's like a Vue router, a Vue store like all of that kind of official companion libraries that you can just decide that you can use together with the main rendering library in case you need it. So it's like less choices compared to REC but makes it also very convenient to work with because it's just all there and integrated. And finally it's also very fast. The library is not large. It also uses a virtual DOM similar to React. And then Node.js, it follows basically the Vue.js principles but it's like a fully-fledged framework which includes everything that you need for web application. So it has all the web back, JavaScript translation set up all the CSS prepossessing and everything configured. It's like an easy way to configure your routes which automatically get automatic code splitting for optimal font and performance and so on. It's built modular so there are modules like for progressive web apps or Axios which you can add to the stack very easily. And in the end, yeah, it's just performance and very enjoyable to work with. But then it also has a nice feature of different rendering modes. So by default what you can do with many frameworks very easily is that you have a single-page application which means you have some small initial HTML page which just delivers the JavaScript application and from there on everything is JavaScript and you just use the APIs. But then it also has a server-side rendering mode which means basically you have the same code running on the server and on the client to render a site which is very convenient and good for SEO. And of course there's the static generation mode which I'm talking about here. So you can use it to pre-render stuff into static files so you don't need a server to host things. From there on actually you can also combine it with the single-page application approach to use APIs. Then Netlify is a hosting or like a general platform for running static sites. It's integrated with Git and GitHub and there are also things like Bitbucket and GitLab so it reacts in the webhooks and automatically deploys your code from there. It's really nice and convenient. It's also integrated with the branches, pull requests where workflows can get you an automated preview on your pull requests and all those things very easily and it does that by basically just running the pre-generation in the build process for you automatically. And then at the end of the pre-generation process there are the static files which basically it puts into the CDN and serves for you automatically and it does that by leveraging atomic deployments for your files, you get SSL, it's automatically managed all in a CDN and it even has a free tier so it's really easy to get started and work with that and it's just convenient to use. And in particular, it's also very convenient and easy to work together with NUCJS so basically when you want to try and get a feeling for those things you can just recommend to follow those three steps, it's really, really quick so you can just run that command like npxgridnuxapp you get a new project you push it in the GitHub repository then you log in to netlify.com you can connect it to GitHub you basically paste that build command and then run generate and you can deploy it it's really everything that's needed to get it going it takes about 50 seconds to build I just tried it yesterday quickly and you'll get up a page which you don't see that's basically it so that's a really great setup for serving content when you have static content to serve you can have Drupal as an editorial application in the back and like once something changed you can just trigger a new netlify build and the whole site gets rebuilt there's also an API so you can also like provide a button click for your editors to rebuild the site or even determine automatically when there are changes then from there the deployment just happens automatically via netlify and you get all the benefits like fast and reliable hosting and CDN so that's quite nice but how do you do like with that setup like how do you do instant updates when netlify changes get a quick update or handling large amounts of content as you can imagine it might be difficult like pre-generating like really large sites also like handling personalized content of course it's pre-generated so it's the same for everyone so for personalized content you basically you can just use the APIs you have a general pre-generated site basically as Google would see it and from there on you can use JavaScript you can use JavaScript based logins and login via API and then also you can fetch additional data via APIs and based on that data use Vue.js to handle the or let it handle the updates to the DOM and have updated content for the user so that's actually a good way to do that for instant updates basically what you could do is like just yeah, regularly pre-generate static sites it depends on how instant you need the updates if it's just like every five minutes and you have a small site that might be fine but still that might be not fresh enough so what you can also do is basically is that you then have the APIs look for more recent content after page load and fetch that and then update the site of the initial page load that's also like a quite easy way to get some fresh content on a static site in addition but when it comes to handling massive amounts of content it actually turns out to be a little bit more difficult so yeah, pre-rendering huge amounts of content as you can think can just take time so with Nuxt.js it's about like 12,000 pages it would take about 20 minutes to pre-rend all that so the ideal setup would be if the framework would know okay, something changed so only those 10 pages changed so I can only I only need to pre-rend the dose and update those but that's actually not there so that's not working I don't know if from any other static chat generator to have that feature right now actually I think Tomer, the Drupal module which is a static site generator available for Drupal can do that but I never tried that I must say but in that setup what we came up with as a solution basically is just say okay we take the pre-rendering for the pretty much static parts and then we deliver the main content via Drupal so we have the benefits of both worlds so if you got on a typical media side what you usually have in the footer and the header and all the navigation it's pretty much the same across all the pages so that actually makes sense to have pre-rendered so what you can do is basically you pre-render that, the header, the footer navigation and then you take the dynamic content from Drupal and then you put it together and have your complete page like with the header and footer being pre-rendered and the main content being dynamically served to Drupal so you might wonder so yeah okay then you are back to rendering on the backend again so there's the benefit so what we figured what we can do is that we don't do a full rendering on the backend still so we just render simplified markup that turns out to use so-called custom elements and that custom elements then we can very easily render on the frontend on the client side with UJS so on that slide you see two examples of custom elements for like a quote paragraph and the footer paragraph and that's actually the markup that we decided to use with those paragraphs so you see the quote it just has the regular quote content there's some nested HTML and it also uses some special tags like the offer tag to denote like a special slot which then the frontend can use to work with and to style it accordingly and the same way for the Twitter paragraph where the main thing actually is just the source to the tweet and then the rest can really be done on the frontend already so given that combined like the static breed-generated page share with the dynamic content and custom elements basically what we figured what we are grading is really a new way of decoupling Trooper so we called it basically lupus decoupled Trooper and I'd like to show you that a little bit closer and explain it a little bit more how that's working so as mentioned we pre-rendered the page share but the pre-rendering and the dynamic content needs to be combined at some stage so in the beginning we have a front box a small application which pre-builds the page responses for the users so when a request comes in it will fetch the pre-generated page share from the static site hosting like from Netlify and it will fetch the main dynamic content from the API from Trooper and will give the response to the user so the user will get basically all the full HTML the pre-generated site with the dynamic content in it and actually it will forward all the headers the cookers and the sessions to Trooper so what turns out quite nice is that all the form submissions call the sessions and everything it's just working so you can still use it so you get the decoupled rendering but you get still all the Trooper features so we have a small package on github which does the front-boxy handling it's actually quite simple PHP package nothing special really but the way it's working when you have a user coming to a URL of a certain path it just requests the same path with an API prefix from Trooper and it also requests the statically pre-built page share, combines it and returns it for getting the API response from Trooper we did a small module which we called the lupus custom elements render module it basically leverages the possibility from Trooper to switch out the main content renderer that means instead of a regular page response when Trooper would take the main content and take it to your blocks layout and put it into your blocks page it will not take the blocks layout but just deliver the main content in a small chasen response which in addition to the main content has some necessary page metadata like the page title meta tags, breadcrumbs everything basically the frontend would need in addition to the main content to have a full working page and given that it's also possible to do client-side route changes so the first page request as explained is just handled by the front boxy but subsequent page request can be handled by client-side application change client-side route changes so the client-side server script can just fetch the via API the content after clicking on the link and then can take in the content from the appare response and also the page metadata like the title and add it into the page and still the page will be updated as usual as like the framework features will be taken care of handling the updates and that's actually quite nice since it results in a better user experience and performance as it helps to avoid the full page reloads. Speaking about custom elements so they are actually the key part of like making the dynamic content rendered properly on the client-side and that's actually something that you cannot only do with futures you can also like work with web component with what is actually exactly that approach but also like reactors also library which you could use with React together so there are many different approaches actually for rendering custom elements on the front-end and you could use that approach with any kind of front-end framework which is able to do that and what's also nice about the custom element is actually that they are SEO friendly without you having to do any Node.js server-side rendering since the HTML responses they come with all the regular content in there as I've shown before it's also like the content is like just part of like nested markup so it's all in there and also custom elements it's like not just an invention of some library there's also like a standardization process as it's like standardized as part of the W3C as part of the web component movements so custom elements is one of the specs which are part of the web component spec essentially and what you get in there is really nice simple and clean markup for your content but actually also really convenient and speaking of SEO makes sense that you also like take care of rendering essential data with standard HTML type attributes so like for example links are really SEO relevant so this is how we make sure like if you have a teaser on a site that usually links to another Node so it makes a lot of sense that Google is aware of that so that is working by having a special attribute is which like view understands to tell you this actually is a teaser wide component and it will know how to render it and how to pick it up but at the same point it's like a regular anchor tag and also Google will know to interpret that so for that there's the custom elements module which helps you with rendering entities into the custom elements markup it also comes like with custom elements evermere sub module which turns it all on by default and it works it has a similar API like the symphony a civilization API and it's also compatible with the build a module which makes it quite nice so with that we basically have a simple novel approach for progressively decoupling Drupal it allows you to decouple your font and rendering from the backend very easily while you still stay in control with the backend so you still have like all the routing the URLs, pop aliases, form processing or sessions so that's actually quite handy to not lose that so you don't lose all the things that Drupal provides to you and speaking of that you can also leverage all the caching capabilities like easy caching and scalability as usual with Drupal you just need to take care of caching your API responses which is a regular single Drupal response so you get to use the advantages of the decoupled frontend editors and site managers can still stay in control, you can even use things like the layout builder you have good performance like you don't need to take care about cache tags for things like the page shell it's already breed generated and you don't have to do like Node.js hosting if you don't want to down there of course you have a custom architecture that your team needs to understand but if you're really into it you can also as I mentioned there's Node.js rendering as an option so you can decide to use that and turn it on I won't go into details here since we're out of time so thanks for the presentation join us for the contribution opportunities and don't forget to read the session if there are any questions I don't know if you have snow so you can catch me on in the hallway I'm happy to start today