---
title: "Unpack the Stack w/ Lucie from Prismic"
description: "Livestream guest: Lucie Haberer, Developer Experience Engineer, Prismic https://twitter.com/li_hbr https://twitter.com/prismicio Livestream Host: Tim Benniks"
date: "2023-04-28T05:16:12.000Z"
url: "https://timbenniks.dev/videos/live-uniform/022-hveoqtpoimk"
youtube_url: "https://www.youtube.com/watch?v=hvEOqTpoImk"
playlist: "live-uniform"
duration: "1:10:15"
image: "https://img.youtube.com/vi/hvEOqTpoImk/hqdefault.jpg"
tags: ["composable-architecture", "cms", "content-ops", "frontend"]
---

# Unpack the Stack w/ Lucie from Prismic

Livestream guest: Lucie Haberer, Developer Experience Engineer, Prismic https://twitter.com/li_hbr https://twitter.com/prismicio Livestream Host: Tim Benniks

Watch on YouTube: https://www.youtube.com/watch?v=hvEOqTpoImk

## Transcript

to mute we are live and while Lucy is still finding something I can just start by introducing anyways um welcome to unpack the stack one of those um really cool streams today because we're gonna go deep into some nerdy business and that's going to be a lot of fun so with me here is Lucy who um is oh there are so many things next core member developer ex no you you better just say who you are okay I know some words but I'm not gonna misname them you go for it okay sure well I miss you ever I'm a French developer I'm working for Chris nikayo Atlas CMS and Page Builder as a developer experience engineer and I'm also a next core team member um so yeah I've been working with next for ages now and it's a lot of fun to like make the framework better and every day exactly so how many core team members do we have in next nowadays uh we're here we have royalty in the house hey Alex what's up sorry I interrupted no no it's uh we are about like seven Court team members um some of us are working full-time on it uh some of us are like uh working as open source contributor right yeah exactly and then you also have next labs and that's that's another team right uh yes of course next Lab is the company like uh not behind decks but like next to next to some extent uh there are people making next at next snap and there are people making other things at next Lab all right awesome I'm just going to put a few really nice comments like you have the strength of Three core members which I think you do remember a long time ago we we just met only virtually and I was like okay I'm gonna hire this lady to be the lead on some project and she's like damn I'm still in school what the heck I remember that that's a while back but there you go you have the strength of a bunch of people and I like that and so we have you here today because you did something that at least in my day everybody did we all made our own PHP CMS back in the day all the developers I'm like why because right one of those and so you actually made I would almost call this like a meta framework it's not as big as others but you have built something that can create really cool websites both static and SSR so why don't you tell us about what that is yeah of course some well basically I have my own website like my portfolio website of some sort like my tool website of some sort and um well I had it like since ages it has evolved this time like it has changed Technologies that's changed shape and everything and um well basically well I don't know if you can share my screen already Maybe yes so well basically this is what my look website looked like last year it was like well it was fine it was all right but the issue very artsy I like it yeah well the issue for me that it was presented as a Blog which well I'm terrible at blogging uh regularly and so what you can see the next bus was from 2021 oh boy yeah I know that one yeah so well the issue like well this website wasn't serving me well because it was presented as a Blog and while I'm not blogging but well not blogging often but I'm doing a lot of things on this side like I'm a guard team member I'm doing projects stuff like that and website was doing a poor job at representing that so add two options it's not okay update website at tabs anything like that change your own page or I just redo it from scratch which a lot of us like doing all we all do I'm really I do that too often I've rebuilt my website I think five times in the last three years or something part of the game yeah so I went on the board of rebuilding this website uh in order to just more represent what I'm up to these days and uh share it with everyone online yeah um so that website before was the next two website made with uh JS it was all right over like for like working on it wasn't really fun uh at the end because it became a bit like cluttered and everything and Ikea it was also next tools like it was craving to migrate to next free anyway at some point uh but well I wanted also to explore like other kind of stuff because well this is like a mainly like aesthetic website like uh well I use view to create this page but like do I really need to well is there anything interesting on this page that requires JavaScript was the answer to that is many now like young there's like maybe three lines of JavaScript to animate the navigation oh the hero the header yeah maybe some analytics or something yes an antique script also but that's pretty much it um so well like why do I need you for all of that and why do I need like if I look at the network tab here I might have like a 100 gigabytes of JavaScript of some sort um yeah so it appears to be more than there you go it's crazy 681 kilobytes yes but it's a bit biased because I might have like a Chrome extension in the mix uh oh yeah there's a few payload ones with real data in it but this is the next way at least in next two exactly well I don't know no big deal Erics first I was like looking for a way to remake my website and one of the first thing I went to work to review my website is 11t and um events if you don't know it it's with um interesting like um like static site generator that um as an emphasis on like a templating languages so it's using OSD or I call them like old school templating languages but they're on Souls school and that's like nunchucks liquids and like all those like uh yeah exactly like my stage and everything uh I remember when something else that I used became perk and we were very annoyed because we had to change it everywhere I don't even know what it was before yeah also really yeah you can have like view template in Peg which I find a bit too funky for me it's a little that's a little funky let's be honest so so yeah it eventually as with some phases and the um Tom petting languages like um choice you want it doesn't really lovely Community also over eventually like one major drawback which for me was quite like a deal breaker that's 11c doesn't have any kind of great typescript support so like basically whenever you're working with something you're working blind and whenever you're working with one of us not templating language that is not JavaScript you're also working blind because you don't have any kind of intelligence Universal just like uh eyeballing whatever data you might have so yep so yeah that was my my main like uh like killer for me like uh that's where I moved away from an event then I tried then to think about other Solutions I could use uh there's this really popular one right now solution like a lot of people like to use to make calls for your website like urgency website which is Astro um the the new kid on the Block that is on fire essentially it's amazing exactly it's it's really cool it has a great developer experience it's like production rate and everything um I almost considered using it um done it for any reason that uh made me like not choose it really and is that um basically astronauts like um really modular server-side rendering support which is some which was a requirement for me uh for my website which we'll see later away um so yeah that's why I uh Nick bonus tourism intuitive for me did you kind of steal their Island architecture because that is like so crazy yeah well architecture is like really cool and like practical um although like the question from you is like do I really have a need for that and well as written on my website on my old websites here next on the onion page on JavaScript I need is really like just a few lines to make a header like paper upper parrot well like you can just do that with that vanilla JavaScript in your page like true because with an island that will add 100 lines of boilerplate for sure yeah you don't actually need that yeah Alex has been saying that your audio is cutting out but it seems to be totally fine in my end are you seeing any sort of issues in your connection or well I can try speaking better in my mic but thanks Alex for the heads up nice oh look look he says it seems to be on his end there you go solved I'm next [Laughter] Okay so so yeah well that's that's one so basically yeah I have my website in next uh two I could updated to next free I consider the events it didn't make a secret I considered asteroid in a Mexican and so that's when I decided to make my own framework which sounds like a lot of reasons like what what the heck because nothing made the cut for me like nothing at both great typescript integration and a great server-side rendering support which rnic two main thing I need while also like having a clear assertion that is like mini mode because of course like next and like uh next JS both have like great typescript and um SSR support but they have they're like a bit of not below it because like it's it makes sense like when you create the next website or like next website to have this blood but for me for building like a just like a really simple portfolio page I was like no I wanted to change to see like well can I do better than that can I do like just something that is like really minimal and that suits my style shoots my need and I can make me happy to develop with it and wow that's when I started to explore doing my own framework and that's how I made active which is um so yeah look at this comment this is essentially what you did uh iPhone and pixel didn't make the cats I mentioned on my own smartphone exactly you know what this is just what developers do and I like it it's part of the game because also if you have done this you have so much more experience and feeling about what others do that build stuff like this the community backlash all the things right so it's really interesting to actually go through the motions yeah and then you get to make like a marketing website and messaging and design there's a whole bunch of things there it's very cool yeah exactly it's also like wow it's exciting like to build something from scratch and uh it teaches you a lot also like because my my daily jobs like to make the SDK at prismic and to work on next and well like making that kind of like small project to make something like teaches you like sound like a base skill that like are to some extent involved in those more every day like real jobs so to say what is interesting to me on this is you have to have overview of how people would use something how it's perceived um did the message that you said on this page actually cover the context of what you're doing there's a whole lot of different life skills kind of that you need to be able to do this well and so I would tell everybody to do this maybe not publish it in your case to publish it but not for everyone but there you go so tell us a bit more okay so where does the name come from uh well all right so the name comes comes from a German white actors German for fail basically and act is basically a file generator um nice what I mean is that that with act you can generate HTML file because that's what you need to have a website but you can also generate Json fan you can generate XML file you can generate a SVG file anything that is textual basically um so well that well so that's why it's name like F5 in German so to say um and um well so active basically inspires quite to learn from 11t um but the twist is that it has a focus on typescript rather than on templating languages because well I I guess well I don't know we could get started with that but um basically for me what's important that when I template that template with the data that I know I or like I know maybe or like that kind of stuff and so well that's what acting enables you to do and um so basically Act is just like a really nice small framework it's like uh it's like well I guess it's written someone yeah it's a 16 it's a six kilobyte Frameworks like it's really tiny but it's just like yeah but just the size of the Tool uh to make the website it's not something that ends up on the website because Act is just like a fat generator it's not like a framework like a view that ends up on your website depending or anything so right by default actually will just like create files from you it's uh some kind of like glorified CLA to create files in a manner that you configure or essentially what 11d does as well exactly yeah that whole tool doesn't end up in your website but it is a way to kind of convert a template with data to something exactly that's the thing and I guess well we can get to cinequat uh at some time it looks like really quick um basically yeah it's it's like this so when you define like a campaign accurate you can define an about page for example you get like the path you want it to be generated at and then you just render it and you return like whatever string you want to be written inside this file and well that strings just happened to be HTML because that's what what they're made of exactly and yeah you can write anything you want here and the thing is that well of course like when you make a website like you need data from it and that's why you have those data function here that allows you to do like all the I think every listing of querying data from whatever Source you want on your website so well so yeah so that's how you define a fine with actually and then you can run it through the CLA to generate this file however as developer like we might need a bit more than just a CNA to generate files because well Nick when you're building websites you need CSS and for CSS you might not use libraries like Tailwind or things like that exactly you also need chat usually JavaScript but actually you don't want to write JavaScript you want to write test scripts that compares down to JavaScript it's really like a wall like tool chain above actually to make that work and that that will change has happened to be with uh because that's what it is why not that's what this is amazing at it's like just like burning anything to whatever workspace and to do it really fast so act integrates with jit as a bit plugin and from here you're able to create a full blown like a website with the fancy typescript that is compared to JavaScript with like minified bundle and anything same for CSS and you can use any kind of Library any kind of video plugin that you want and so will feet also give you your SSR then um so vid doesn't give me cssr but with gives me also see um like uh development environment because again Act is just the CNA just generates files but that gives you all the odd module replacement the HTML anything that makes developing your website Cool Stuff essentially cool exactly so well I'm not sure if that's clear enough as a as like a primer for everyone but maybe we can jump into the code of my website to see more what this looks like in practice on a real deal I think that's cool one question on my end does do you have some sort of a router or file based routing how other stuff work okay so I'm like Firebase roasting is like amazing it's uh it's like intuitive it's great for users like everyone is used to it now that's great also I I like to keep things like a simple stupid when possible so imagine both are implementing like a whole like a fancy file system based routing of any sort with acting because well it's do I really need that not really like I can organize pie on my own so instead what I did like active as a wall like rooting um framework that is based on Radix 3 which just happened to be one of the library we're developing at next as part of uh yeah exactly yes yes so basically uh next free is using also red X3 to Virtual to Virtual pages so so exactly um and from here when you when you declare like an active file or multiple active files you can just write your route that you want it to be generated at so you can say like or post and then you want um some kind of like parameters yeah and yeah then it works if you look at that bulk data function that returns all these URLs that's so that's essentially just get static path from next but simpler I imagine exactly well exactly that's the same deal as um next.js on that matter um there's like uh some like subtleties to it because as you can see I have both like a data and a build data function exactly um basically well okay so basically we have two kind of active files we have single files and collection of files so single files are like Pages like for such about like no query parameters nothing just a static path so for this kind of pages I can just have a data function because I know that like whatever is returned into the data for this very page because sun is generating one page but for collection not files it's a bit more um is a bit like more complex in the sense that when you create because it's Dynamic like here's like a post page with a stack because Dynamic like when you render your website you need to know which page is to render so that's why you need like this box data function that returns like all the paths that needs to be generated with all the data you need to generate and because it's just one function generator returning like all the pass results the data needed to render these paths this allows you to make some optimization when requiring your CMS or whatever because you can say like yeah like give me all the posts because I will need all of them anyway to render on my page and you can do that in one query instead of doing like as many query as you have blog posts on your pages that is very interesting I like that so that's this kind of optimization but then when you're on server side rendering context so if you want to server side render a post for example don't want to create all the posts you just want to create the data necessary for one post so one that you want to start say render that's why when you're generating like Dynamic files you have the option to like you can optionally Implement an additional data function that will that has just to perform the lifting record to render one cost and this data function looks more like next SEO data that receives query parameter and with both query parameters responsible to create data to render that post on Thursday render but that's that's optional you don't have to implement them twice but you can do so if you have some performance like requirements of some sort or like bottlenecks that you need to overcome this is an option cool okay so yeah well I guess we can if that answers the question I guess we can make a champion it does to the site I have right now so well this is my site here right now this is the development server um and I was a bull named Paul I just did it to title it uh because not that usually let's unpack this stack I like it let's do it so wow this is a nice tag this is my site right now it's a lot more simple than it used to be um I'm zoomed in here for the purpose of the uh stream but well so as you can see better but yeah and as I said like the main pet peeves I have like with my previous website that it was a Blog now it's not a Blog anymore it's more like highlighting everything I do from talks to past to projects and all sort of it's kind of like a list of cool stuff that you do essentially yeah exactly it's not like a team of cool stuff I do and well I'm really happy with that because it's why I'm presenting much better right I'm up to these days to people and yeah I have different design taste these days so it's also like more closed white and like um so yeah like let's get that on like a dual screen and so here I have the source code of my website which is public and available on GitHub so if you want to have a look at it you can and um yeah so well let's dive into it I guess yeah let's go I'm ready to rock so as as we discussed like um I'm running it for vid like right now I have like a vid server running um that can just my page and this is what gives me like this local channel and this is what allows me to get uh SSR on my pages so if I go back to my index page here I can change the title to just like a 18 and chat and if I save that it renders on my page and I can well keep working like this so the hot module reload speed you actually get this from feed which is super cool exactly and well it works really well and I'm out here is that so well if I want to just and yeah so that's your own page of my website uh as we've seen before it's an active file so that I'm defining it here yeah and um yeah well this is a static fact like it's just like so I'm saying like well next PATH of that it's just forward slash and then I have my data function which is like similar to next async data function and inside it I can do whatever I want to get data from for this very page so as you can see I'm making multiple promises I'm like reading some Json I'm like getting data from prismac because I'm using prismic on my website yeah so like all the blog posts on my website for example I came from prismac and I've also like some other uh file I read from the file system and all of that is getting typed so as you can see here like talks which are like a record of talk we have first uh which are prism documents and we have project which is a record of project and because of that it's typed and I return it from my data this means that when I'm in my render function here I can make access with data so if I go like here like context.data yeah you can see like I might post my project my talk oh nice um quite automatically by typescript uh for me and this is what I want when I'm working so I can see I can go to my post I can click next oh it's so nice and easy and you can navigate and neck render whatever I want so you can go through data and oh I'm sure recognizing all the the prismic data types exactly and yeah deep into those cool yeah and so well that's what I'm really happy about because I can I know what I'm working with and like when I'm rendering something on I can like talk and the date of the talk I can it gives me synthesis and I'm I know the daytime working ways I know if data might be there so I can can like render it differently if they're not there and anything like that and wow so is this like a jsx style template or what is it yeah exactly I was coming to that and you might be fine oh sorry no that's perfect thanks for the Segway so yeah like this looks like uh js6 uh basically it's like HTML inside JavaScript but actually it's not j6 it's a string uh we have like the back six year and year so it's just a string and the reason we have defense chtmlating that we you can add like those fancy like uh comments on top of them that gives you the highlighting and intelligence and everything that you expect in HTML so if I were to remove that you can say it's not like all strings oh wow is that vs code specific doing that uh I didn't even know very nice yeah foreign [Music] people we're fine but I'm pretty sure it works on live stream too uh yeah yeah sure ideas might not work in the video you might spend hours configuring it to work uh I don't know yeah but that's if you use film you want that we're good yeah all right so yeah and so instead of j6 and j6 when you want to interpolate data you have to lose uh just like one pair of curly braces to get back to JavaScript in visual someplace is like two pair of curly braces that's well a year because it's just like a template string you can just use the dollar um yeah just the normal stuff to get back to JavaScript and what I like about this what I like every safe project because it's all JavaScript like well there's no JS expenses but still it's all JavaScript so you can create components of your own to like render your website and it just functions it's extremely simple exactly and well vessels well technically my crack components are just render functions also and so yeah I can like here I have my editing function for example that is many components as you can see it's just like receiving like some arguments and with both arguments I'm also returning a string that is the data I want to return uh no no need for a fancy framework here because you can do it with just JavaScript and string and I love that you use the word slot because it's what it is it's just a few things and a uniform thing yeah like yeah yeah exactly I'm a view person and like in uh in view like those are called if I run like if I were like if in another life I would have been a correct person like I could have just called them children and I just wanted to say children exactly yeah you might have been abused a bit well I imagine person so I stick with slide it makes sense I like it yeah and why it's behaving like a basically for me and you see how simple it gets like the s that you have one of the properties the header one thing you just concatenate the string essentially again it's so simple yeah it's not that barbaric actually no exactly yeah and well I added a fan developing my side this way it was like fairly smooth and like uh well as I said like I'm using uh well I didn't say it but well I'm I'm using talent to do my CSS and well like thanks to those fancy comments like when I'm trying to write something I get all the Italian increases also so in fact really that's nice that is those are my colors for my Thailand concert and yeah yeah okay I'm not like giving up on anything like there's no compromise not at all you know what's interesting to me looking at how you do the templates like when we had this I think this was es 2017 or something when this came out with the backtick template thing and when that came out I thought okay we're just gonna see these kind of templates now because before I was really annoying to do any of this and then I've never seen any framework use the native um string concatenation like this they all use jsx or some version of it why not just do this I actually really like this yeah I I don't know and but but I'm not like you're casting shades on j6 or whatever like uh no no sure there's another reason which ethics uh has to be this way and it works also great so well so well you know what what's cool about this is the fact that you haven't had to kind of figure out your own alphabet of what is now a few code like a template language you don't have to because it exists already yeah exactly and that's you just use the basics yeah and and that's why I said before like like that I didn't have like file system rooting um I don't want to like well I want to keep things minimal and like uh I I don't need first time routing like I can just give the path here and I can generate whatever I want and uh yeah your CLI just finds the files it looks at whatever the path is defined and it just creates that file for that path right and actually it didn't even find the file because uh I have an XC config file that you have oh you literally tell it which one yeah you understand like well like this is my active app and the CLI I just hit like well like build this application here yeah well at first I was also like trying like to pull everything and next to like register them everything but well like do I really need to code on this that's all and I can't I just like import them you know what in the end the Simplicity thing like Alex is saying it really matters and so there's lots of like DX things that you could do to kind of you know make things a bit more magical but the moment you go too far with that like next two modules it becomes Blackmagic and if something is broken you don't know what to do yeah so if you just make it so simple that people actually like okay this is my file let's put it in done I I'm kind of for that that's cool I'm also for that but um I don't want to like uh overshadowlady also like GX convenience of having like things like Auto Imports on like fine Discovery and things like that which which do which which do Marvel like uh inside like bigger project or like things that like internet to be more like if you look at like that next three stuff and all the magic that's happening inside it makes the DX for bigger projects across different teams always the same and that's and if you have that you can make this lovely developer tools in the browser and stuff all that stuff works because of the same way of doing the magic yeah there's nothing against it right so it gives you like standards um which actually like which well which takes the drawback to my Approach so that there's no standard like you set you on standard uh oh yes like for example for me like one of one one thing I ended to do on my page is that um I need to have like a layout so I can interactive editor like a footer basically and so well like my standard was that like I had like a base function which is like a base layout function that [Music] um and I just like renders like you will like HTML stuff oh yeah exactly add and everything and on every one of my HTML5 I I call it in this base function with the content or like the slot of this page basically and that's like a convention I said for myself that I stuck with for my website but someone else using active might not choose this convention might use something else instead and well because there's no convention like this can make it difficult like to like work like switch between X2 teams using active and that's why we need those bigger Frameworks like next or next that says like a strong conventions that like everyone is able to switch from a next to an X Project and next to a next project knowing like where things are like all things are working I think that's the one big distinction where this works for you very well or for me when I build my website but my other experience is that I had a team of 120 Developers that I had to they all worked on different projects with similar things that were overlapping if we didn't have the the strictness of Q2 back then it would have been a complete nightmare and so and this is funny because I'm not throwing shade here but we had like I think especially 2018 and stuff if you were a freelancer you could become a react project fixer because all the react projects were different back then with the you know the react script stuff literally everybody did it in a different way and you can just go around and make money by fixing people's projects because they're all kind of like all over the place so there's a drawback to the flexibility I guess I I for my own project I'd like to try this I think yeah I just released my website maybe in a few months uh all right so so yes that's all I'm working on these Pages um I guess I can share some I can start sharing like some well tell me well maybe that's slug.ts that the one with the special name okay so what is this exactly uh that's like that yes is my link uh rendering like any kind of pages so for example Dynamics yeah exactly sorry for like my uh terms and conditions of my website um it's like a page that I have on Christmas so I have it like let me I have it like here somewhere here yeah terms and condition so that's like content even prism and I want it to be rendered on my website here and so basically whenever I create a page I just want it to be rendered like to forward slash whatever the strike of it is yeah exactly and so well that's what I'm defining here I'm saying like I want to page which has like the path of strag and well as I said before like I want great typescript intelligence so if I go like to my data function here I can I can send a context that parents and eras like an Universe like oh yeah this is very clean yeah yeah and you can do crazy thing with statue because basically I'm telling like well I have a strike parameter by adding it here like I said well I have a stack parameter right here but like you can also like check that kind of thing so if I had if I didn't say like well actually I can also like a taxonomy parameter like we are you can say like typescript we start to wind because like my path here like doesn't have like a taxonomy parameter inside it so like I'm making an error and so as long as it's not fixed it's like a text and I'm here it will win and now it starts to like it yeah that's so cool and you can like validate string like that so basically like I have stuck here but if I like to make a typo here into mine because like well it's not like it's stroke yeah exactly so yeah well you can make a lot of fun things like this with typescript um so how do you make sure that when you go to slash about imagine slash about is an actual file that you do something special with which might be the case I'm not sure how does it know that it doesn't have to go to slash about but fall back to like the the dynamic slack one sure uh well that's available thanks to Radix 3 yeah I just know this too so I don't know yeah well basically Radix 3 is like just a routing Library like you give it like a lot of routing paths and like it builds a router out of that and uh when you give it a path to result like it would like to look up a path like it won't perform like the priority on its own uh to make sure that like like if you have like a static page that's the priority of Veronica parameters which has the parity of our capsule rules and yeah yeah so I love to see the contributors part oh yeah but this is all I thought this was this was yours but this is actually erratic it's like looking at these people oh yeah no well I I haven't had any I don't think either contributor to act yet I might have one I don't know I'm alone but foreign [Music] [Music] [Music] it's like documented anything it's like production ready it's used on two websites the documentation right here and my own website uh for now I might make more website with it um but yeah like it has been like more than like it has been like formal that is fun monster four months is that it's not it's on my website and um yeah it's working well I is a few small sites like links.10 bendix.dev that just shows a few of my Social Links which is a it's a nice small starter I I might just use it and try good fun you can and well again like to chime back it's like oh it's fun to create a framework from scratch you have examples on the website and like your next tag bits example so you can like get started from your next unack well like that's or you make like something with bit and act here and like have like multiple kind of pages getting rendered exactly and cool that's that's another fun to make it is so the time is flying so what would be the next thing to talk about SSR stuff or are we not ready yet uh yes we can talk about SSR because actually well we just touched on the pages here and service pages are managed by prismic uh and on Christmas really cool features it's actually a preview feature you can like preview a page but like audio run a preview on the website it's static like if I go to my exactly to my production website or like this is all static like oh can I press your content on that well that's where I need SSR and so well SSR works great um with acting as I well actually to you before but basically yeah like this page doesn't exist on my website so if you go to internet this is like a preview content from prismic uh and here we have all the links that we have but I guess like you can share the link I shared your team on the chat earlier um to people and well if you follow this thing you should be able to see this page that doesn't exist on my website if you actually just put that in the comments for people to follow sure and so so yeah so is this also like when you change something in prismic now let's let's re let's change like whatever the title is yeah do you then need to hit save or publish or how does that work again oh if I go like to prismic here like at this title here I haven't saved it yeah if I if I were to save I'm saving with all my refresh here on on its own I haven't touched it and uh I can't see my kids updating with Timothy so is that like a web hook or how does that work uh well this is pretty preview feature it's just like cool barriers that looks a bit like broken on my website because I'm yeah I love the phones what's happening wow that like this is like a some kind of a 3D Edge case back we have like with the two long prisoning for some CSS leakage basically from your website to the toolbar and on my website I'm using uh form feature settings which basically allows you to toggle the way the function is rendered on the website I'm using words on my website for example well it's hard to see I guess I can like um magnify no I don't have a magnifier I have a magnifier oh no that's nice and so while it's hard to see this here like you see and I have a t i just like oh yeah nice that's a little slope so this rock is great inside um it's like title because it's big and like you can see the letters great but unlike small text like here and like you can see like it doesn't oh there you don't have it because it's hard to read every right and same like for letters like see a later here like on title it works great to have like just a big a big like a like this but on small texts it's often better to have a a with like a little like a slope like this exactly I'll take all that and because it's just like molding here but I get it because this way you don't don't like mismatch like a A4 or basically and so some phones have this like uh like variation from that you can have for letters and you can activate them with font feature settings in CSS and so well because I I do a lot of things resolution settings because they bought a fancy phones for my website um yeah like basically uh it breaks a bit next toolbar with the piece I like it because it is kind of like a toddler spelled it it's really funny exactly so so yeah that's why it's a bit like funky but it works and well as you can see here it's not rendering the page on just forward slash this look it's running out it's rendering it on forward slash preview for search this slug um and that's basically like how I do server side rendering so if we go back to my career you can see whatever my face here so I have like my file and this is this file I'm rendering service that render like on a server and actually I'm rendering it on a serverless function so while there's no server actually um and it's my preview function here that is um this is a netlify serverless function I imagine yes yes sorry yeah yeah the local node function or whatever yeah um right now like this is on the production website but yeah it's um it's an it's a my website is still on Netflix and so well I have like serverless functions there which is like a search and have some feature to use with version yeah it is and so while I have my preview function here and um basic internet free function they have an actify NXT application definition which is quite the same as the one we had like for the website that is built but you are just like a boy don't one where I just imported the files that I want to search I render and I throw them inside my application and then I'm about like here inside my uh service Handler I just check it like we're on a get request to um well if it's not to get request like it's not anything that I want to handle so just say like but if it's something I want to um to handle like a preview station on prismic I do like those two like funky function that I've able here which well okay um the result function is basically just a way for for me to resolve prismic previews it's not really interesting to look at it's all like prismic specific steps is your token and stuff like that right yeah which document it's it's looking document and anything it's not really like well it's not really interesting to look at so you can actually ignore it just like this stack just like opens up a previous session for me and then here we have this get one this is a bit more interesting this is where I service I render my application and here what I do well I do like some like um like boilerplate things for serious function but basically the magic happens here when I do my like I want to render a file because like this is anything fine exactly and to do that I have my active app here that is imported from the preview.acti app files that I showed before yeah so I import my app and this app can be used programmatically to perform two like perform thing with direct applications like active app and then you have a lot of methods that you can use to programmatically interact with your active application and so what I do here I do first an active lookup so like I look at the path I want to render so this is like based on the event path so ercm would be next for Slash and thanks to stack with steam I look at this path inside my application this returns me um this returns me uh a match between the paths the path parameters if any NC active file responsible for rendering this path and then I do an active.render of this file like I do it in one line or I could do it in two but then yeah basically exactly after that I end up with a string and like this is my file and I can just send that as the body of my website so you're literally just creating the HTML on the Fly rather than with the CLI build and just return it as the body with the 200. it's relatively simple yeah well that's basically like a really low level server side rendering and well you don't need more than that um and so if this is that simple can you just add it to an edge somewhere um yeah because like every one of your fires of employees strike files needs to perform like query uh this should work but maybe like if you're afraid of hitting limit on edge like it might be a trouble but yeah like it doesn't take more than one second to render it anyway um yeah exactly wow actually yeah and so so yes like from this third state function and just return whatever I need to return and where that's all you we can have like previews like this with like uh anything and so potentially you could make any website any page SSR like this yes exactly uh yeah I can do it but you could yeah yeah I just imported like the ones I want to SSR uh but uh if I don't want uh two SSR like if if I want to add more I can add more iPhone to it less I can add less uh and we're happy with them exactly as long as you you like it yes and talking about like this being somewhat fast and I've been able to like run inside service function I guess we can now talk about the build time effect which is also something fun it's time for the fireworks now I think so I as I said my website is just still notified it's right here I have it on netlify and I have my production I have my build here and well that's that wasn't an objective of mine but now that it's available doing it's quite funny for me and so basically what's funny is that when you're done building your website with bits so here you can see I'm building like um the website with with build it's building my website it started here and this is building everything and it's done here and well building my whole website with active takes less than two seconds which is ridiculous which is like how many files did it render like 49 or something uh it's just a bunch of copying and rendering I think at the same time yeah 49 modules I'm not sure what that means but well I think it's well basically it's like about like 20 pages and like some assets that gets boil down to yeah well just think about this this is not even feed 4.3 that's even faster yeah yeah this is 4.2 I guess right yeah this is 4.2 uh well like see SQL Legend Of Z is not to have like a crazy fast build time but because I narrowed down everything like two really simple things just like type Town template string in JavaScript like really don't but not bothering with like five systems and anything like it shaves down a lot of like tests that I need to run because I I'm just important to SQ5 and like running them uh like all simultaneously so this is literally just a big import and there's no scraping of files there's no async or sync rendering of files it's literally just there's the import run you don't have to go files so like the main over is mainova red two first two seconds is mainly just querying content from remote apis I'm using my website yeah exactly because you like for example your prismic articles your blog posts that might be a query that takes let's say 400 milliseconds and that's including inside this build time yes exactly uh and screwing all of that like you know really Swift manner which is cool but the prismic API is really fast as long if it's guest it's really really fast so that helps a lot yeah we well that's our job delivery yeah exactly it's the only thing you really have to do make it super performant and uh stable yeah uh so when you now go to click on posts here on your local this is actually a query now to prismic right uh yeah everything you are is squared from prismic yes and so when you click on like shaping the dev XP team the first one yeah so this is a query and that's how fast the query goes uh it must have been cached and yeah actually right now it's cached locally because I'm on the development server and I know I haven't changed anything on my file so it's already like built and everything so like this is just service oh this is ah this is cool so but when you do a local build you in your active folder it just returns whatever is in the folder I imagine um your DOT active folder is just getting there yeah exactly like well exactly we can dive a bit into it uh this is more like see in terms of the framework so to say let's say inside I'm caching is the data so like what is returned like by uh an infection like civil data from async data this is a bit like what next is doing with the payload stuff some questions I'm caching all of that and I will show you why and I'm also catching caching all the build uh oh the output also okay cool yeah uh because bad session essentially like what uh gets rendered by fit um so and the reason I'm doing like those two layer cache so to say uh is because that if we go to Warrior we're on a post we can go edit the past well like for example when I'm in the render function and I do an update uh to um I joined update like inside the render function like I said my character mirror this will change this part here so I'm saving now and it's updating now it's changed it changes fast so like I can iterate this video chronic fast well it changes fast enough for me at least so I can iterate like as a developer with that but yeah like when I'm performing this kind of changes knows that I didn't change equal to prismic so it's just like using the cache data already to not query prismic again because there's no need however if I go above here and I think like I do a change like to I perform a change to like the data I get from prismic um then it will uh well I don't know I could perform a change actually uh yeah maybe the order of the renders and the order uh I can go and do like path that um and select uh uh I love that this is typed it's so easy yeah uh I guess I can change the category uh category equal make careful bar so like this will change all the category ER to Fubar and also like when I save it will take more time it should take more time to render let's say okay it didn't do it because well here it's using like the data one which you know is the optimized version of it that happens when you just need to render one file so let's do the same like modification above and we'll see oh yeah exactly it should take a bit longer and we should see a full barrier instead um first if that is longer in your book I'm happy that is that is definitely sub 500 milliseconds yeah well please make your pens to appears appears to be fast yeah well that's not bad we're in France and probably the server is very close uh well no our server is in the U.S because we use Amazon okay uh uh actually I didn't know because it's uh well we're using cloudflare to Cache our API so maybe it's like replicated on actually it's replicated and it's then like much closer to me yeah so I imagine you're getting it for pair from bears or Frankfurt now yeah but still I guess we could do like this if anything like uh awake uh new promise let me do like a set timeout um of like a few seconds and we'll do something like a resolve and we resolve that so this will be like an artificial delay to it yeah and I will add back my quick like a password that category or futon and so what we'll see on it will take it should take two seconds to write update so like I'm saving now now we wait we wait we wait 10 years then there you go yeah it's cool so well and you can see like well it took two seconds here but like Twilight the optimization if I go back to my template and I just make an update to the template so let's say I just get rid of the lid this will be faster so this was without the two seconds yes because it knows the difference between you choose the cat when you know that when you don't update your data it uses the cache instead and it just renders your file with the cache data and so did you build that logic or does that come out of feed no I'll be at that allergic into actor and act is still only six kilobytes about that yeah maybe you should be in the field court more and then well um I I don't have that pretension but uh because as we say like the changes are different like uh here I'm just building Furniture small thing just that that suits my needle that has like some drawback like you need to Define your own convention and like versus on the flankboard or plate stuff like a little bit stuff you need to understand objectives the thing is if you build a whole let's say you're in Little Agency right and you're building a ton of like campaign related Pages there are small simple apps that are all static with a little bit of like you know SSR here and there with a serverless function this listing is amazing if you make a quick framework but let's say if you have like a design library or something you add it to this and you always do the same thing with a boilerplate this thing is rock and roll yeah like if you want to well you can leverage that to to to do business with it if that's if fetchum fits your jam uh of course like no problem it's production regenerating for me like one of the benefit of like building this little like a side project like a small framework of mine that also like uh it tells me to experiment like for example like if it's the Dual like render or caching things that we just uh showcased like it's an interesting idea and that's something I couldn't like um looking on next site like if there's like an opportunity to like also Implement that in next because when we yeah it's like tested here it works great and so maybe we can also leverage it next attack when you're in development and like iterating on your template you don't get to fetch data every time and you can just use like cache data and have even faster without time so it's also like quite like um like um some kind of like sandbox to like try ideas and see like one like that kind of musicians into interesting so maybe let's get to the next so like everyone can benefit from it exactly you need a Sandbox to kind of experiment and dog food your own stuff somehow and just try and see if it works yeah and it does you build a cool website and so um time is flying literally it's almost seven do you have maybe the last thing I want to see is maybe your contact form sure okay well uh contact form is like uh well you can do a lot of things with context form so this is my contact page um can explain to me or to contact me I'm like well I would have guessed um yeah exactly but I I have this format and which on like um is a form and when you submit a contact file on your website an example you have like a thousands of possibilities to what you can deal with with data and like first of all like where do you stream it was Data what you do with them do you use a service for that there's a lot of services for that I don't know what you use for your website team on your contacts I killed the contact page because I got so much spam that I felt like this is not worth it and I just put like go on Twitter on LinkedIn and that works very well I get a lot of content that's why I add that here because I'm like well if you're like a serious person you're more likely to contact me for vismin but if you still want to use the contact form it's here for you yeah I removed it but actually maybe I'll use your approach but what kind of stuff what you're showing us okay what Nick do you remember what kind of service you are using for your contact forms okay yeah wow so well you can see like netify from is one of absorption um but well like the thing is like Netflix if I remember court is the capital like um like a Android for from submissions I think 100 a month somehow and they don't they have some spam prevention with like um Honeypot fields and stuff but yeah it didn't work that well for me but if you need forms properly netlifies and if you're on netlify that is it works extremely well surprising I just got people who wanted to do business business with me but they were very shady okay I just didn't care care for that so well it's like 100 per month it's not bad for a personal site you're good yeah but well if you go about it's quite a lot of money for forms yes so instead what I like to do with pharmacists to handle them myself uh with serverless function and so here I can see like a contact service function and well I have something that might please your team um so well basically what I do is forms like when you submit a formal name website so let's do it um why should I not this one because we'll see why I cannot choose this one uh let's say at least it ever a president that I know and I feel like uh you know from Impact the stack and so let's submit that oh I'm on okay well my bad I was in the world local um let's just go which is the real deal quickly and so uh here we go now if I submit that it will tell me like well it's amazing cool but like where did the for where did it ended well we ended on my personal site um nice so when you submit a formula just send it to me on slack here and again you only have three slack um spaces I like your life well I I I get rid of them as soon as like I'm done with them yeah smart move okay I I I have a lot of conference like but as soon as like I'm not needed there anymore just I can sign from it and I know it's like we'll send you a message like mainly if anything happens this is true I actually need to do that anyway sorry for the interrupt nice so yeah everything I contact from here and sometimes as you say this gets spammy especially since well it's just like your service function of mine so how do I limit that um so well first of all I am a service and lawyer which like uh kills anything it is not the best method because well I know that's not me uh I have a small rate limiter here which is a an in-memory in rate limiter I discussed about that on my uh one of my last blog posts and I greatly meeting without a word with Netflix read this this was your last post you have to post again it was one of my last posts and it was pretty cool basically it explains you to make really simple contact forms like without using any services on your website and that's what I'm using here I'm using like a quick thing that like limits you to six submission every hour basically so does this mean that this surface function is always awake because how can it remember yes um basically our service function like doesn't have any kind of memory so to say but when you spawn a service function it stays online for like 10 minutes or so yes um and well 10 minutes or so that he can get longer if there's subsequent call or whatever basically AWS is like managing its resources like to its best at like well when it when it's like worth it to like keep it alive it keep it alive and so well most of the time it's smart yeah and so like most of the thing like your serious function like you only have one instance of a training except if you get like thousands of requests per second then it might spawn more of them but in my case uh well mostly every time I only have one running and so I can average with rate limiter here that is running in memory of node and so normalization gets spawned next the rate limiter memory gets spoon also and I can leverage that to like track usage between requests and um so at least the amount of spam is is fixed by this yeah at least like quality first that well it's mainly like um preventing like any like a smart I see people like to spam me because I don't I don't want to spend like my my day like cleaning ABS it's like from like messages uh no exactly only extreme so you're just preventing bad it's just preventing Bad actors from spamming me but it's not preventing like uh spam like to just like send me a message so well Nike or just kick people if they have reached their rate limit but then uh I think I have something yeah here so I check like the body I check it that's like uh long enough and like um not too long well I checked like everything you send me is actually at your main it's like looking like a male now so check if you're blacklisted so okay I have a blacklist of males uh you you have a few that always I like it yeah and so well I add this to when everyone like I noticed like someone gets like black like spammy and so well one fun thing you're like for like there's a lot of spam that actually like just choose your website domain as a main domain so yeah it's generally fine so yeah that's why I blacklisted myself from my email because I don't want to remind I know all of us like are unsent by me and so they are spam but well then I disconnect other people like a result of SEO people that tries to scam you oh yeah I've been with those a lot yeah and yeah and then there's a lot of like uh well people using random icon that it's hard to keep track of but well basically with that I'm not receiving too much spam okay so you're quite good so but if I send you an email now about weight loss pills it's gonna come through yeah but um because you probably don't get that many anyways yeah I might get like uh one per day or something like that I don't mind it's not too bad it's not it's not a worry for me and anyway I still have like my uh my email availables well anime available so I also want to get some this way but it's manageable exactly all right nice so um thank you so much is there maybe one last thing you want to talk about or have we covered almost everything now um well I guess we went over like the main stuff uh we could still talk about it for hours but I well I guess that's that was already alert uh yeah it was and I'm excited to actually try this so you did a good job there thanks um so where can people find you well you can find me on you see that red uh which is uh just like a short and my website um so it's not this one then so I put a banner on so this is your website but you also have another URL uh it's just like your short and your it's an aliens that I can communicate to people like vocally so this one yeah so you can go to when you see the thread or you can go to nihpr.com uh well it's the same same thing okay cool and then of course acti js.org yes and actaj.org you have the link at the near the bottom of my website oh yeah exactly and yeah and uh well if you want to follow what I'm up to you have me on Twitter again there's the link on my website but you can also find me on Twitter at nihpr like it's written on the um yeah we always have to find the way to point yes right yeah perfect and yeah well next next gig I'm doing is that I will be in London with you for view JS nav conference May 12th it's gonna be fun exactly because um what is your talk about May 12th um May 12th I'm talking about the next three modules at London uh in London cool well it has been refreshed and it's uh well it's cooler like every time it's getting cooler so well if you don't know what next three modules are and how you can leverage them to make your everyday life easier well you can join my Tokyo it will be live stream online also and well I will be in physics on London also for those who will be like I think my talk will be the opposite of yours I I say it's using view but I'm not actually showing any code like nothing yeah but it's uh a nervous talk and I know it's really great it's weird but fun I've tried it a few times now it's it feels like I'm on tour because I'm playing music on stage it's just using um viewer anyways but this is not about me um people should actually watch that live stream because I've seen the new venue they have it's looking really good so I'm hoping for a really really cool event yeah anyways um we went on for one hour and nine minutes and I still wanted to hear like three more hours I think I think you have a lot more to say but we'll do that next time um thank you so much and um people know where to find you now and then on to the next stream and for you you're whatever you have other streams at prismic as well I imagine yeah we have the product Meetup every end of the month on Wednesday and uh this is what we discussed like well we you know we have invited and our guests and like uh people joining us and I can talk about development and what we're up to these days all right um people should find that because these streams are awesome and also Lucy's boss gave me this yeah a long time ago but there's some um really nice friends there anyways cheers everyone and um have a lovely evening or rest of your day if you're not in Europe like us Cheers Cheers