---
title: "Unpack the stack: next.js app directory with Steven Tey"
description: "In this stream, we dive into the new Next JS app directory to see what it is all about. We discuss the new approach to building websites with Next, and we show off how Uniform fits into this new shiny way of working!"
date: "2023-03-17T06:25:03.000Z"
url: "https://timbenniks.dev/videos/live-uniform/017-8ju8znzjoh4"
youtube_url: "https://www.youtube.com/watch?v=8Ju8znzJoH4"
playlist: "live-uniform"
duration: "1:00:13"
image: "https://img.youtube.com/vi/8Ju8znzJoH4/hqdefault.jpg"
tags: ["personalization", "performance", "cloud-infra", "frontend", "product-strategy"]
---

# Unpack the stack: next.js app directory with Steven Tey

In this stream, we dive into the new Next JS app directory to see what it is all about. We discuss the new approach to building websites with Next, and we show off how Uniform fits into this new shiny way of working!

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

## Transcript

comes reacts of our components instead of having to do you know a Motorway function that routes to a different page you can do personalization on a component basis so makes it so much more resource efficient as well you don't need to like exactly generate thousands of variants of a page you can just generate three versions of a component that persists across all pages so a lot of those are still in the works but I think the future of next.js and personalization at the edge is going to be very very exciting and interesting and actually have a few questions on that in our list for later but we are live but we were mid conversation I just press the button um let's do one step back uh Stephen please tell us who you are what you do where you're from stuff like that sure thank you so much for having me first of all my name is Steven I uh Stephen Tay I'm at I'm a developer Advocate ever sell I've been here about a year and a half now I think closing in two years in about three four months it'll be my two year mark um I joined resell uh before that I was actually doing my own startup and I sort of got to know Guillermo got to know at the time I think yeah they already rebranded from the result but that's a number so I really loved the product and uh when I was about to raise around to do my startup game I was like why don't you join Roselle instead and come here and learn about open source about B2B sales about hiring managing people and that sort of it was a no-brainer for me because I was quite like in terms of starting a company it was my first company I didn't want to like jump too quickly into the founder boots I want to get more experience working in a larger team and Versailles sort of at that sweet spot between a fledgling startup and versus like a you know large company like Google where there's a lot of like red tape and stuff like that so it was a very perfect moment for me drawing it was right before the CDC um so yeah I joined Roselle uh here at Roselle what I do is basically I create a bunch of starter kits templates uh that people can clone and deploy and learn about Versailles Technologies like nexjs SLR versus L OG that allows you to generate OG images at The Edge Edge functions Edge middleware all those fun stuff uh that we're going to talk about later so yeah that's basically what I do I also maintain our templates Marketplace which is kind of like it's kind of meta if you think about it because it's a it's a a Marketplace of all of these templates that I built plus folks templates that other people build we basically compile all of those into one spot that people can easily clone deploy view the code and learn more about xjs and resell so yeah that's what I'm doing on the side I also maintain this fun little site project called dub it's um link shortener open sourced basically open source version of bitly also uses Edge functions and dark Foods a lot of the versatile technologies so it's a great way for me to understand more and provide feedback to the team at the same time uh you know get to work with a lot of different customers to use the product so yeah that's a bit about me awesome thank you for that yeah you you're basically patient zero for all the new stuff that comes out exactly yes I go I'm basically the lab rat they test a lot of stuff on me and I'm like if this sucks I'm like this sucks we gotta change it if it doesn't like this is really cool but yeah that's me awesome all right thank you so much so today we I actually want to talk about the new direction that next GS and for sale are taking with building projects and it seems like the landscape is changing really fast and things are sometimes grabbing back to how it was but then with the new flavor and so just to kick all that off like my first question would be like just talk to us about what like react server components actually are sure so reaction for components are basically react components that is rendered on the server side and when it's fed to the client it basically a very minimal amount of JavaScript is sent over which improves performance and also allows you to several random components several render your pages on top of that it also allows you to do data fetching directly inside your component which is unheard of before that like if you want to fetch you need to inside an xjs for example if you want to fetch data in your component you gotta create an API route you gotta like call that API route and then get that data which is a lot of steps but we reacts over components you basically just do a weight db.fetch whatever inside your component directly so that sort of changes up the game when it comes to personalization when it comes to building multi-tenant applications or even just building you know applications that have like a lot of nested components like if you're building an app for example there's a sidebar that's a menu bar that's a I don't know like another Nest menu bar and menu layout all those become super easy to build with the whole react server components paradigm so it's essentially just the same as like an isomorphic app that next GS was if a few short years ago but then with some extra flavor and so these components can also be hydrated on the front end I imagine correct okay but you can run them without hydration it's just pure SSR no window object just run yeah so obviously window and Navigator all those different client-side libraries I mean functions they're now available on the server side so what you could potentially do if you need to use those or if you need to run a client site function is you can use the use client directive uh basically it converts that into a client component and then you can basically run that on the client side so this allows you to to do a match like basically mix and match both server and client components to build our application and a good example for that is if you're trying to use firmware motion for example which is a very popular animation Library so that's not that's not available on the server side so you gotta Mark your components as use client turns into a client component and you can start using animations uh and all those fun you know now we're going in the rabbit hole so let's say I want to do Progressive enhancement right so I want a server rendered component that has like a little bit of a frame and some Basics but then on top of that when this when the client loads I then want to animate it but I don't want it to be just a client component because without JavaScript it should still look good because of course when you're when you have a slow browser and slow connection yeah you should you should see it yeah then later on I want to add the animation how does that work yeah so what the the app app router right now that's what we're calling it the app router in Nexus 13. what that allows you to do is for each of these nested layouts for the nested components that's the layout for each of them you can specify a loading screen so a loading companions for them to handle slow data you know slow Wi-Fi situations and what that happens is every time when the server component is still had like it's still fetching the data it shows the loading the loading component that you built and then the the basically the server components gets hydrated onto the under the client and uh with that there's another thing as well is that you can actually Nest a server component inside a client component but you got to do it the right way it's a bit tricky uh and that the reason why you would do that is because if you want to do like you know animations for your server components you gotta like put that inside a client component and have that animate uh we have all of those that's written out of the dock so I highly recommend checking it out uh but you can definitely there's a lot of ways that you can you can navigate this new paradigm here oh wow that's really interesting and it gets really far but like so the main thing I'm thinking is okay so I can do a fetch in every component right to just get the context for that little thing which is really cool but wouldn't I just get a page where I have to do 16 HTTP calls happen how do you make that fast that's a good point we have the cash directive which is uh it's basically an API for you to reuse connections uh for example there are two types of caches though first one is segment level caching and that's basically the same if you're familiar with the pages uh you know Pages approach with nexjs12 and before it's as similar as get service uh get static props or ISR incremental static regeneration that basically allows you to pre-generate those pages if you have 16 API calls it all gets you know rendered at build time and therefore your pages are still instantaneous bam it just loads right away because it's already hydrated already rendered it's all done on the ad build time and then you can basically you can easily revalidate those if you need using ISR uh revalidate actually already works in the in the app router which is amazing it didn't work like two months ago yeah I've seen that I think in my my personal app is like revalidate 60 or something exactly so yeah that's super cool that's that's one way to do it that's an interval-based validation that's also on the mind revalidation which is you don't need to set that 60 anymore you can put it forever and then if there's a change to your database to whatever row you just revalidate that page and that's it and then you need a web hook I guess yes you will need a web hook to evaluate that page right now I think we only support page-based validation in the future we want to separate component level validation yeah which is possible with react server components so that's the first one is it essentially yeah I'll get there in a second is it essentially basically just a server-side rendered app that on the first render caches everything yep and that then becomes almost your SSG or is it on build time already SSG it's on build time SSG it's all rendered during build time and that's why I mentioned the on-demand revalidation aspect which means that after build time you can easily make sure that the page is that are rendered can be revalidated and the data can be fresh so that's one way that's called salmon level caching that's also I believe it's called request level caching and that's for if you want to fetch data via like an API function uh on the client side so that basically we also have a cache API if you're using fetch inside the app router it already has cache built in and what that does is basically reuses the cached results for a certain time frame throughout the entire session so for example if you're going through different pages and there's the same API call being called between page a and Page B the one that comes second will reuse the cache from the first call so it basically improves your saves on resources you don't need to invoke that function so many times at the same time provides a better experience to your users as well wow so many cool things and so these cache keys can you set them yourself or is it just Blackmagic it just works yeah you can actually set this is actually quite uh I believe it's still in development uh we're still like exploring how this is going to work but we do want to make in such a way that you can set a certain key so it's something that actually I deal with a lot because I'm building this this starter kit called the platform starter kit and that a starter kit that allows people to build multi-tenant applications what that means is if you're building like a Blog blogging platform if you're building like a newsletter platform each of your users have their own domains right and therefore uh sometimes what happens is if a user wants to say you know change the logo of their blog that logo is used across all pages right and when you when you revalidate when you revalidate those pages what you want to do is able the ability to revalidate a certain cache key that basically triggers your validations of all the pages instead of having to send like a thousand revalidate calls you just send one exactly targeting that cash key so that's what we're working on right now it also depends on how component-based revalidation would work because in that case all you need to do is revalidate the layout or the header component that's it so yeah a lot of these are still basically being under researched it might have changed in the last week I'm still following up on that things move very quickly here at here every sound and actually has team so yeah I think um we basically would want to go towards the the approach that makes the most sense it's the most intuitive and also saves the most resources for the developer uh yeah yeah I think what is happening here is like it's the DX to the max we love that stuff right because these kind of toolings that they have existed but they have never integrated with your developers process like for example on Akamai you can actually perch the cache of a thousand Pages just a little thing that's wrapped in XML tags called an ESI tag we used to use that back in the day but that was not connected to your front-end development workflow yeah right so it's all these things kind of just exist on their own and you have to somehow integrate yeah and now when you look at next 13 but also nux 3.3 that just came out they have all these similar things and now it's all in your hands as a developer and it's probably dangerous as well because you might be able to screw things up quite badly yeah on the other hand like you have some smart defaults in most of these things yep so I guess it works that's a lot that's the reason why we were a huge proponent of using eslin controls in typescript to provide the best developer experience so that people don't mess things up like if you're specifying a value that's incorrect or could lead to like an infinite Loop or something like that will throw an error or throw a warning so that the user or the developers are like aware of the potential repercussions of of what they're writing the code that they're writing and I feel like this sort of is a good segue or or even like a transition to to what you guys are doing at the uniform because it's like you're you're you need to connect all this different tools you mentioned Akama you mentioned before when we were talking about culinary all these different tools and how you connect that to your front end so like nxts we have all these nice Primitives that you can tap into at the same time uniform provides that unified API layer that you can use to to Plug and Play all your different data sources so yeah we can't really talk about both but I'm very excited too first I have one question and then I'm going to show you but I'll show you directly now let me just share my screen and show you a website I just built which is actually I think I'll just share a Chrome tab let's see if that works okay so this page here this was actually built with next app or next app um um folder right and my question is actually by the way can you not see it I mean my mistake now there we go yes there we go perfect sorry about that so basically this website was built with next 13 all the latest fancy stuff nice and so what I'm used to when I use next 12 and I use SSG you see those links on the top like impossible without compromising back the stack those are link tags from next link and they get pre-fetched and there's a whole bunch of stuff going on when I click on one of these links it's essentially a single page app yep so it's hyper fast but now when I go from this one to let's say this page this is a full reload and you can see it took a while to load actually let me just go to the next this one is a bit faster but somehow I don't think these are pre-fetched so is there a way for me to do that because I we didn't do we just followed the docs it's very simple stuff with next I'm wondering if that should have happened because now when I go back you see this one took a while but now they're super fast so it had to just kind of warm up I guess right yeah but I was kind of wondering shouldn't that have just been pre-fetched and it then becomes like a single page app somehow or maybe there's been a choice you go SSR you fully go SSR yeah so it I think this also depends on if you're using uh like what mentioned earlier about second level caching if I believe all page um by default all pages in the app browser are statically rendered so they should be fast so I'm definitely very curious why this is happening if you're using next link you should pre-fetch the Json and like all the like stuff behind the scenes for that page and when you click on it it should happen instantaneously and uh the only reason you could see a cold boot which is what you mentioned the first time in warm up that can only happen if you're using on demand like generation of the page using something like uh if you're selling it to no cash for example and that means that the page it the page is being generated at request time which could result in a cold boot business likely what this looks like because I'm not using get static paths or get static props and stuff like that so it's just but I'm now looking at the code and it's my mistake there's an ATAC it's not a link tag there you go that was an easy solve that's a big one yeah I should make those link tags okay that's cool I think I believe in Nexus 13 uh with the if you're using eslint it should warn you that attacks are not as performance versus um like if you're using the native image tag it will also tell you that okay so this is now not telling me anything I'm not doing my sharing no not yet here we go okay oh but wait it might actually no it did not yeah that if there if there's a warning they should be in like yellows quickly yeah exactly but of course it should be this and then suddenly things start happening yes that's that's an easy fix right yeah the cool thing about link the new link tag is you don't need to in the past you needed to do link and then Nest like an a tag inside but now then you remember yes exactly but the new I never understood that to be honest it's a bit confusing so in a new link component it behaves and and and you write it the exact same way as you would a regular attack you can put class names you can do anything you want yeah so it makes a lot more sense so let's move on to talk a little bit about what uniform does and how we fit into this because um we see a lot of customers that are very interested in doing the all the surface ad rendering stuff but also static but server side running is getting more and bigger and bigger because we work with Enterprise customers that have thousands of pages and multi-tenant multi-language there's lots of things going on and so setting everything up with rendering sometimes it's just it's not the thing and so essentially what uniform does is we like to help you out with if you have a whole bunch of data sitting all over the place in different systems okay we call that your domain data shall we say so your CMS let's say you have an events website like this I can actually just let me just share that screen again I'll just go for the full screen so you can see everything so basically uh this one right so this is the website I built for uniform and this is essentially an event based site right so we have our streams and things like that I don't think you're sharing it yet okay very interesting if you do this with one screen this is my this is my my feedback thank you so essentially um lots of this content could come from different places right so when I go to let's say unpack the stack that's literally the thing we're doing right now these actually come from YouTube but that calls could also easily just come from a CMS for example right but how they are shown could be very different right we could actually make this one a featured event for example show it bigger whatever what you don't want to do is Muddy up your data model in the CMS to add a checkbox to make it featured you kind of just want to do that in some sort of design system because you see all these components here this is just a design system in uniform right and they all link out like this this list actually links out to notion it's yet another system that has data that we want to use right and so we have certain projects like for example if you go to this website um this comes from YouTube this actually come from contentful this comes from YouTube again this comes from def.2 so when I click on one of those I just go to def.2 and so in uniform you kind of connect to all these systems and we can even connect to Legacy systems if you want like old stuff like sitecore or you know whatever you want but for example you can also connect to algolia I have a website like this for example where I have all my tutorials like these tutorials are essentially all in um contentful but they're matched and linked into an index in algolia so you can search through them yes this data is all external and uniforms make sure it's designed a certain way and these pages are compositions that you can attach to your design system and make it look good and so um you might sometimes want to do that with SSR sometimes you want to do it in the client you can do a whole bunch of different things here and so um what's so interesting is that you have all your information of all these tools and all these services and sources together in one place and so I can show you this is like a little demo that I I just spun this up right before our stream nice and it looks really good well the point is we need to be able to do that in like 20 minutes or less right and so that's essentially this project and so in uniform here well let me just go into the to the start because I'm just jumping in the middle because why not right but anyways this is the dashboard and so when you go to Integrations here you can see a ton of things we integrate with but you can also see some custom ones that I made myself right I want to have markdown files on GitHub that I use as my database because why not right after you can select these or you can go algolia the stuff I just showed you or Akamai or well like if you of course we have for sale here and so we integrate with a whole bunch of different things and if you have a for cell integration you can send webhooks directly from uniform and it all just fits nice you can you can trigger releases you can see your status whatever but you can also say let's just go to CMS for example like there's a ton of CMS as we integrate with but also things like cloud and area for images and so essentially what you do you have a whole bunch of components that you can create okay and these are connected to your front end right so this is a hero and you can see here this little little image of the hero that's the one we just looked at right that's this one yeah and so all the props that you would have in your react component you put them here in uniform right and if you now have a CMS integrated there's just a little integration that says hey this this this parameter connects to your CMS entry and you select it and you're ready to rock right so for this project the Integrations that we have we have like the starter kit and we have a fake Commerce because why not right it's just easy for a starter it's like a little mock and so if you now go to let's say the home page here you can actually inline edit everything so when I select this this is not a hero and these are my props here on the right yeah and these connect to react so if I change the node if changes to centered it just renders it differently um it's amazing um and we have some different image variants that we just hard coded in because front-end developers can just choose whatever this is yeah but you can also say not new but let's just type it in best and so what's interesting about this is this hero is kind of stuff that you might want to put in uniform right so you can start adding some stuff because this thing might change next week yeah so this is not something you might want to get from a CMS because on its own it doesn't mean that much but when you go to a product let's say like this one this actually now makes more sense to get these products from an external system here right I love how easy it is to basically preview whatever changes you make exactly this is literally my next application it's very simple so oh so so uniform basically integrates directly with your next app and yeah actually click this here so now I just clicked on preview it and so this is literally that for cell URL you just saw wow in here and so we have an SDK that figures out hey you're in your editor so the SDK just figures out okay these are my components that I have so let me just select one and so all these properties become changeable and then you can hit save and if you hit publish you can have a web hook to rebuild for sell or do whatever you want to say right that's amazing and and the thing the cool thing about the ISR that I mentioned briefly earlier is you don't really need to you don't even need to rebuild your resell application exactly all you need to do is send like if you're changing like a copy on the on the home page all you need to do is send a rest Dot revalidate and you can basically just regenerate that one page only yes instead of having to rebuild a thousand Pages we have that set up but I don't think it's in this demo right now but it's a very easy setup to add for us beautiful so um what's interesting about this is this is now an SSG site okay but because I have all my information here and so for now the integration the only integration that we have with these products is just this like little mock store because this is a starter kit yeah but imagine this is Commerce tools or something or Shopify right and you can add algolia for search you can add five cms's and assign them to one component and just fill different props here in the with the cms's if you want it right the thing is what we output is saved on the edge so your front-end components don't actually need to know anything about the connections to whatever they're connecting to right they just need the props they're just we aim to make your front-end stupid right no data mapping no modeling nothing just use your fancy next features and make the best site you can without having to think about all the content right and what what makes this really fun is this you see here there's a little personalization tab right so because we work with Enterprise a lot and a lot with e-commerce and things like that personalization is extremely important right it essentially gives you like 20 more conversion if you really do good personalization and so but what happens if you have five different headless sources where you get your content from how do you build personalization that's crazy hard to do because you can do it all in your code you can just use different cell um Edge to say hey I'm in France or I'm in San Francisco and do something in code but then content editors can actually not build your personalized shopping experience it's extremely complicated but we build it in here because we have access to everything so for example these are two variations for personalization right so when I click on beans you get coffee beans right and otherwise and so when you look we call this context right so this is the default variant but here there's a signal called beans so let me just quickly go into how that looks when you go to personalization for example you can have a whole bunch of different things from different audiences or failure stores but this is just a quick signal that says I'm interested in being so this is a query string so if I do a UTM campaign it equals beans um well you can imagine that you have a new campaign for next week where you want to sell out all your latest beans because why not right so you make a campaign on YouTube or on LinkedIn or wherever you sell your stuff and people click on that campaign link well based on that campaign link signal we can make different design decisions so we now go to oh do you track the results as well exactly so what we actually do is the moment that happens our SDK that is super light actually just tracks what the user is doing and then based on that score some points so actually when we go to the home page like this hero if there's actually a query parameter that has beans in it you can see if the signal beans is hit it's going to show you this one so we can do is now say UTM I have done it right so UTM campaign is now beings and now this is the hero wow when I go there next time it has scored some points against this being signal now I'm just seeing beans right and you can do it you can go so far as when I scroll down and I go past this component I can score some points against machines and then the next time this is a different list you can go super far and it's all hosted on the edge while this is actually an SSG page if I turn off my JavaScript now I have a little button here right now I have no JavaScript or it would be nice if it didn't show this bug wouldn't it yeah you tested this wait maybe that it works on this one oh yeah on this one it works okay my apologies basically I have no JavaScript now my lazy loading images somehow don't work that's interesting but the personalization happened right and this is like a 50 millisecond page load maybe less it is yeah yeah and I turn it on again oh there's my image I have to check what this is this might be a client query yeah yeah um so what we we built like this little tool that you can actually say Okay um let me just clear everything so what if the signal beans is very strong it directly with hydration just changes this wow so you can do it from the edge when you have no JavaScript and it just shows this thing that's crazy but you can also do it on hydration so when I go to other Pages like when I go to coffee makers and I scroll down and I maybe go to this one a whole bunch of things can have been tracked and then it's going to show you different related products if you want or a different query to a CMS or whatever and in here you can control all of that that's incredible that's I feel like this could have been very very useful I I how I wish that I've learned about this like a year ago because that was when we were doing a b testing for our new templates Marketplace at resale and I had to like hard code the middleware to understand like oh if the user falls into the pocket a we show them the variant a and if not show them the other variant and we have to easily done it right with code but it's kind of annoying and so yeah we've kind of just normalized this yeah with the school and so we need to kind of figure out how do you do personalization on something that's static in nature well you have to see DNH we just have a little middleware oh I actually haven't even shown you that middleware we can show it as middleware okay yeah I also want to kind of touch base a little bit on the on demand ISR thing uh yeah we need to talk about that one as well because that's a very interesting one for that one yeah um let's see where do I have this one oh yeah here we go um so the middlewares it's actually relatively simple we have a manifest file that holds that this this file is created on build right so you don't have to dynamically load this so when you hit build it just clears uniform in a in you know a simple npm script and that basically gives me all the information um about whatever personalization I have right so this is the beans personalization which is a cynical for a UTM campaign and it scores you 50 points but it's a maximum of 100. so my my middleware knows about this stuff now and then we have a context Edge for cell package that understands the first latch and what it does it's just it gets the information from the page it Alters the thing basically and returns it it's just literally a response changer I have a good I have a good um recommendation for you if you scroll up to lines 540 I think no up up up up yeah right here between lines probably 25 to 38. we have this actually you're already using it the middleware matcher function that you could do inverse matching so you can say that if the path is not something you then Magic so it's definitely better yeah I can send you the code after this but that's what we're using for uh the platform starter kit actually so yeah I think it would be really useful oh that's great thank you for this that basically also helps you save on the middle bit invocation because if you're doing this right if I start with whatever whatever you don't run it you're still advocating middleware on all those different paths but basically a negative matcher you just don't invoke anything so that could be much better oh that is definitely better because right now it's kind of looking at all these things and essentially every file that's that's loaded goes through the middleware right exactly exactly so instead of that I can show you a quick way right after this to make it work anyways sorry keep going no that's all good um we essentially have these kind of middleware functions and these npm packages for all your competitors essentially like we have this for Akamai for netlify for cloudflare all the stuff because this is just a very interesting way of having a super fast website and then enhancing it with something on the edge right so we know all this Edge stuff now we love this stuff and so that fits so much in the new Next app directory approach to things because we actually love being able to do it all on SSR and then hydrating it just a little bit for this personalization tracker yeah right because what it does it looks you can configure it to look at like if you scroll past something or if you click a certain button it fires an event and we can push all of that in your Analytics tool of choice but we also track it for you and we store it in local storage if you want or in cookies or just memory you can also just refresh your browser and personalization is gone we can do whatever you want yeah a bit of hydration for sure I think the cool thing about another cool thing about htmlware is you can easily track like the location like location Geographic um language all these different like personalized aspects of the user so you can basically do like if the user is from Canada show them a different route or show them a difference you know we have actually integrated that into uniform so if you have a virtual integration when you're configuring your personalizations like right now the one you just saw was just a UTM campaign query string but we can also say hey if there is something we call a quirk which is a key failure store that's been set by an edge or buy something else then do personalization so we have your location all the stuff it's fully integrated inside uniform already that's incredible yeah that's exactly what I was talking about but uh let's let me show my screen so I can show you this uh no I think I'm on this okay is probably gonna have to build this now because he says the Showcase hits me right at the second time well Janos I expect you to show me some stuff soon a perfect um so I'm sharing myself perfect what I wanted to do just quickly touch on is just the negative matcher so in this case oh yeah exactly instead of having to do all those like you know unmatched underscore next seven things all you need is just match all paths except for and then you do this negative matchup which is question mark I don't even know that what this syntax is but no honestly this is just a regex I guess well not just it's a bit above my bakery I learned about it from one of my like the edge experts and I was like holy this is amazing this is a game changer so yeah just do honest like question mark um exclamation mark and whatever you want to unmatch and that's it this last one is a bit complex but uh what it does is like this one right here it basically just unmatches all the root files inside public folder so if you have like Ico sitemap dot XML or like I don't know exactly webmanifest.json or whatever you cannot mesh those as well um but yeah that's basically what we're doing for for platforms and speaking of platforms I just wanted to quickly demo what platforms is it's basically um uh like what I mentioned earlier it's a multi-tenant platform that allows people to in this case write your own blog so we have the demo wrestl.pub it also supports custom domains so platformers.com is a custom domain that maps onto demo the result so if you go to Steven over sell the pub there's also a Blog there it's basically what I just used for my demos oh fast dude exactly crazy it's all statically generated which is why it's really fast and let me show you something cool um revalidate checks right so this page it's already cached at the edge at build time and I can verify that by going into this little two that we built every cell I don't know when but you can see that it's a the cache is hit right it's a cache hit and so and right now if I were to edit that page if I were to add something to it instead of having to rebuild the entire app I'm like add stuff here instead of having to reboot the app when I click publish what it does is it hits this API route that revalidates that particular page so right now you can see the page is already revalidated and now it's is it now rebuilt by for sale like the CI tool or is it actually a cache in the state of the running next app it's not rebuilt it I mean it is technically re-rendered the page is re-rendered but the first time and then it just cached yes exactly it's just that page that is re-rendered so if I go here and it's just that single page so it's very resource efficient when you're running a blogging platform for example or like a a sub like a sub stack clone like a newsletter platform you don't really need to rebuild an entire application every time one of you users makes it change right all you need to do is invalidate that page and serve a new Fresh static version of that page so what this value function does it allows you to do exactly that and moving on that's really cool man yeah so it's it's something that once you guys integrate it into uniform you basically help your clients save on a ton of like resale build time I think this part if you if you look at like um like SSG with ISR we have this in place already oh beautiful yeah that's already there so in here well I'm saying that are my CTO is here in the chat so Alex tell me if I'm lying but I'm thinking we did that yeah we've had that before yeah I mean it's it's it's as simple as calling away rest revalidate and specifying whatever URL path that you want and it happens in Magic happens within I believe it's the 300 milliseconds it's really fast so if someone pushes a change in New York within 300 milliseconds you can get that change in Singapore it's already updated so it's really really fast that way in 300 milliseconds you spread it across your CDN Network correct it's propagated across I believe you have 20 plus regions uh so Alex says we have this stuff oh awesome that's amazing this is also not the hardest thing to implement like what we realized is when we did the the app folder right looking at that is our SDK just sometimes depends on some browser related things because of the personalization it's all kind of one lovely package of magic and then so that gave us a few issues but I think we just have to iron out the Kinks on that side and then so to your mind like having this whole new app router for example and all this other stuff yeah should it just be the same as how you would use it in next 12 or should you just remove all that like get static props functionality what what would be the right way to use next 13 now you have no you have perfect timing that's exactly what I was going to talk about right oh there we go I like it so I'm actually working on um so I work I started on it a while ago but it got got a little bit distracted but I'm working on this migration towards app directory for for the platform starter kit and the reason behind that I think I have a proposed on that I'm not sure if I can show it but let me try and see if I can rip that out show us your internal br's go for it let me see if I can I think I can um actually I probably shouldn't because there was a bit of um spoilers in there but basically what what the reasoning why we want to transition to that directory is because it's going to help with both performance and also scale like for example right to give you a really simple example if I were uh to run this as an actual business and I have thousands of customers each of them have hundreds of pages so if for example if one of them were like okay I want to change my logo here for my site I don't like it and they have a like 100 or 500 pages of like blog posts if I were to do it in today's age with the pages approach you'll need to send a revalidate request you probably need to batch that but you got to revalidate all 500 pages because that logo it's spread across all 500 pages yeah so that would be like a full rebuild essentially exactly it's a full rebuild of that you might as well just push a new belt on yourself right exactly yes that's what you tend to do now anyway yeah yeah exactly so the same thing goes with like stuff like fonts for example uh with with this you will need to basically if they were to change the font for the entire site you'll have to rebuild everything but with the new react server components and app router Paradigm all you need to do is revalidate that header component right here let me see if we can show it but this header component right here right all you need to do is validate this component yeah the rest can stay the same so it becomes very resource efficient because in this case you are setting that header component to a certain like revalid time frame or you can use on-demand ISR but yeah all that's being changed is that header component it still persists in the cash and uh yeah that's that's gonna be a game changer and so you can still render it as a static app essentially with the same performance same performance same static same like time to First buy everything is within 100 milliseconds you can get that page and you maintain that dynamism of being able to change the logo the font the name whatever within 300 seconds it's essentially just version two of how you would do a gem stack site it's just another iteration that's smarter exactly it's smarter it's faster it's more Dynamic you don't need to and it's more resource efficient you save on compute either need to rebuild 500 pages instead you just rebuild that single component um if you think that yeah it's it's especially very useful for for a product like the platform starter kit and which is why I'm very excited for version two um there's gonna be a lot of new exciting updates to it as well uh I don't want to spoil too much of it but uh just for us just give us one just give us one thing the the coolest thing is going to be AI integration I want to add like just a simple like AI writing assistant to it because of this whole AI hype train that's going on yeah we've also done something like give me a product description in uniform click and it will just do it click and it just generates yeah we have that stuff it's really cool that's beautiful I think that's I feel like that's uh that's a very that's the direction that the world was going into like just every single app right now has to have ai assisted aspects to it just to improve the user experience obviously if you're building like I mean even if you're building like what I'm building with dub a link shorner tool there are aspects that you can use AI for example we have this feature that you can you know add like a custom meta description or meta title for your links yeah that's actually a good move to have exactly so for those you can easily use AI to generate those titles descriptions you can even use mid Journey or something to generate this the custom OG images so there are aspects to be added so yeah there there's definitely a lot of um a lot of room to add AI especially for you guys too if you're if like what you mentioned earlier you can't even give it like an affectionate name you could call it Genie you can call it I don't know exactly something that matches to the uniform brand that's I feel like it's a way to go now like we we have something we like to call the glue code monster we call him gluto because basically what we do like imagine you didn't have uniform you had all these sources that have to come into the front end right you have to write a lot of code to query these sources from your components and then map the data so they fit your props right or maybe you don't map and you just change your components but then you cannot use them next year yeah and so that's we call that glue code so you're literally gluing all the things together so you can no longer change so you had this lovely heartless composable system that the developer just meticulously picked together and then you're stuck yeah so uniform completely kills that because the props that you want in your components you just map them to data in uniform and so if you want to change the CMS or add something else the the code is not even different that's amazing I love that metaphor right there I think that's our blue cloud monster so maybe that could be some sort of AI nice nice yeah is there like a mascot or like the animal that you guys use at our uniform like to battle that let me show you I can show you amazing at Versailles we have a very funny I don't think it's very public but we have an internal animal that's like our spirit animal it's like the the lizard because versus real I didn't know that versus this is glucose monster oh no way that looks really cool and so we basically in our when we have zoom calls he's like there creeping on the side into your background that's hilarious yeah it looks like something that's generated with uh I don't know mid-journey or like Dolly stably Fusion oh we just have a fairy Talent designer who did that all with illustrator and his lovely pen and stuff wow okay that's that's props props uh hats off to that but yeah going back to the the lizard aspect and the reason we call lizard is very stupid it's just like it's not stupid it's kind of funny it's kind of affectionate thing but versaillian that's that's how we call it people who work resell oh really sounds yeah reselling sounds similar to reptilian and that's what I recall that we have this dancing lizard that's right I don't know it's very funny so for on next conf I expect Guillermo to have a lizard on his T-shirt or something he'll be in a dress in a lizard mascot just jumping around us that's even better there you go but we actually have very exciting events coming up uh in May uh I saw you guys were already recording Guillermo on his own In Like An Empty Apartment exactly exactly so yeah keep an eye out for me I think there's going to be a lot of cool uh things coming out that actually would work so one of the things we're launching I'm not gonna say what it is because I'm gonna get freaking I don't know NDA stuff but one of the things we're launching actually will work really well with um uniform given what you guys do so you can start guessing what it is but but yeah we only have a lot of ideas about what it is but let's not speculate for sure yeah I think that's going to be way more room for us to collaborate in the future and um we are official partners and we're we're doing a bunch of things together already because like right now for example a lot of bigger companies are running on a CMS called sitecore which is essentially it's a really cool CMS because it's a great editing interface people are used to it you've had training all that stuff but the front end is it's quite challenging to make it run well right and they have you know they've taken a lot of steps forward to make it better but it's it's a bit challenging and so we we partner with for sale to make these cycle websites amazing because in uniform we can just we can make any cycle website gem stack with nextgs and then connect it to uniform and you can add any other CMS to it if you want and then suddenly you have a way to move away from your legacy wow while still using it because your content editors have trained for six years in this right you're not just gonna Big Bang remix entirely yeah for sure we essentially just make it a data source that you select in your front end and then use nextges to render it okay so with that we have lots of freestyle related stuff going on nice we have a lot of I I believe we have a lot of sitecore customers and psycho is one of the largest Partners as well so it's great that you guys are in the loop because I can imagine how like I'm I'm I'm personally I'm gonna die on a hill that beautiful ux is always going to win at the end of the day like sure there might be like Salesforce you know like terrible DX but a terrible ux but a lot of like large companies are using it but ultimately at the end of the day if you do not innovate your user experience or user interface and make it beautiful like linear has amazing it's great exactly we love using linear that's crazy exactly so if you don't innovate there are gonna be income newcomers that are going to take away your market share and eventually might even take over like the entire piece of the pie so I I'm glad that you guys are already partnering with Russell and working with folks from sitecore um who knows for me you guys might get acquired by cycle I don't know just to speculate um tell you that is not going to happen Okay based on the fact how many people from psycho we have working at uniform that's not going to happen but I love that you just got like an acquire it's like okay anyways I'm honestly I'm gonna clip this and send it to my friends beautiful beautiful um yeah so this Center here is is very important for them to stay relevant as well for you guys to help bridge the gap between exact developers and content creators content content teams at all these large companies so yeah I'm really I'm glad that yeah we have projects where we have like web companies that had like 100 websites or something all on on sitecore and we move them to for sale with uniform and I think they went from five second page loads to 100 millisecond page loads but on top of that the they were able to just kill all their content delivery servers from sitecore in azure and that is like like their cost went down by 10 fold I guess whoa that's why you guys do see the ends as well like content delivery in this case I think we just used for sale as CDN oh I see so it's it's generated it's a pre-generated build time and then you can do on-demand validation whatever exactly we have all that stuff and so basically we connect to any sitecore version even like 10 year old ones and we just kind of modernize it you know I can imagine that's why the app router is such an exciting conversation for you guys as well because a lot of those like component-based validation that I mentioned earlier it's going to be very relevant uh as you guys evolve your SDK in the future you don't need to trigger rebuild so you don't even need to trigger revalidations of an Atari page you just trigger you know changes so that will basically help your clients safe on cost save on you know time to revalidate a page time to get fresh content and at the end of the day the end user experience is going to be Supreme so yeah so what we have built now in our sitecore product at least is when you hit publish on a certain page it only rebuilds that one and puts it back in nice and it's not using or well I'm not sure but it's not using all your fancy new stuff just yet but because we have to we we don't just do it for sale because lots of big companies are at Akamai for example or on Azure we have to make it work across these oh man like that's what's so interesting about working at uniform is that we can okay we come from this like I think in our company we have like 150 years of CMS experience in all the people like we've been around how these things work and now with companies like for sale changing the game so much man it's really fun and I'm kind of aiming to use all your new stuff and then speak it in the next next conf to see how we can all put it together wow 150 years that means you guys have been around since what 1850 exactly we just combine all the people and then think about it right like me alone I've been working with this stuff for like I don't know 16 17 years wow and then when you have people that are older than me and have done it for longer at higher levels like we have people that we can kind of really talk about it but like we have so much experience in like what should you see like how does content actually flow how do editors use it like between you and me we can talk about developers all day long but without content editors you're nowhere for sure right do you think nike.com would work without content editors not even close yeah 100 and so that's our goal at uniform is kind of just mix those two and make them both happy yeah yeah a happy Synergy between the two it's a happy company what's the so what's the origin story like when did you guys start like before you close off I loved it now like how long ago did you guys start what's the story behind it oh let me think about that so Alex who was just in who did this lovely comment about Alan Iverson he's our co-founder and CTO with two other guys today they used to have um they used to work at sitecore actually and then they had a consultancy company after that and then probably they just had to scratch their own age and build a cool thing and so essentially it started with is make have these all these sidecar sites and make them better for the Modern Age nice that was how it started and then realizing that like all this headless stuff is amazing right you can really easily use Fetch and connect to things but at scale when you don't it's so hard to go to things to connect to all these systems and the side core stuff right in in xgs for example like not everybody is the one percent of our space like where you and I work we know all these things because it's our daily life but some people are not like that they're product owners or developers in an agency who work at mid-level they don't don't understand this stuff so it becomes really hard so that's how uniform as a platform started like how can we connect all these things to make it more friendly for developers and for Content editors I love that and that grew like our messaging changed like 10 times because this is a thing that doesn't exist right now yeah like we call it now it's called digital experience composition so your compositioning like you're composing and orchestrating your digital experience damn and it's a totally different thing because people think hey it's a CMS or it's an API aggregator or it's a BFF it's none of these it's well it's all of them yeah personalization plus Edge rendering plus whatever we want to throw at it right it's crazy because I love the official editor yes agnostic from any tool whatever CMS you throw at this you can visually edit it easy it's crazy stations that you guys have built and and I love it you're like a 30 or something but wow you know it's fun we actually built Postman inside uniform so any API that you can think of you type it in you get your data you sign it to your props you run like wow the website I just showed you that uses next app um folder yeah that has a notion and a YouTube integration that I literally build in uniform there's no code I just typed in my my you know my best token with the API API run that's it crazy I love that I love that you guys are doing this because there's I feel like every day I work every cell like and then on Twitter and Tech Twitter and developer Twitter it's like we're in this bubble you know like we're in this bubble like we just pop one no I wouldn't say top but like that the one percent of people in the world that oh you know next yes Edge rendering all this cool stuff literally we know what these words exactly 99 of the world still are still in that I want to say stone age but like in that age where you know data WordPress like literally runs 70 of websites in the world they don't really care they don't know that they need to care about this kind of stuff yet so uniform is a great you guys are doing incredible work at like bridging this Gap and showing them you know this real world impacts of going from Five Seconds to 100 milliseconds showing them that you know it's important to think about this stuff but we handle it for you you know exactly that's why I love it the fun thing is we're doing it without upsetting developers because there are tools out there that do this that developers are unhappy with but we cannot have that we are developers oh yeah right absolutely that's like look at if you look at for sale all the tools you're making is to make developers happy yeah right we do similar stuff but then also make sure that content editors are happy and that's that's it's the extra challenge but it's working right so it's cool yeah that's amazing yeah it's fantastic how about that's let's end with that bombshell because we did an hour yeah thank you for your enthusiasm um where can people find you you guys can find me on Twitter I'm mostly the most active on there uh it's just Stephen Tay my name in one word um I start posting on LinkedIn as well but mostly reposts of whatever I do on Twitter so Twitter is the best that's what we all do 10 100 so yeah it was a pleasure chatting with you guys thank you so much for thank you so much for having me thank you so much for partying versaille I think we're we're there are a lot of cool things that we can do in the future and I look forward to doing more of these in the future as well I'll be demoing you um one of our SDK is updated for this stuff to show you the awesome beautiful we're working on it as we speak literally there you go wonderful okay I look forward to it all right dude thank you so much for joining us cheers thank you Tim you have a wonderful rest of it day