[Destination:Web] Server Rendering with React & Next.js

cool so Guillermo you're so talk about a server and static rendering yes okay it's thank you what an amazing presentation and one of the thing things that speaker mentioned is a lot of people have they need to quickly create new react applications based on a set of components that already out there like Kepler GL so this is one of the problems that today we're gonna describe how to solve we created a

tool called RIA and next years on top of react to sort of make this process of starting at react application very seamless and one of the key things that you can start this react application with is what we call server rendering so I'm gonna give an overview of next yesterday of server rendering why server rendering and together with this introduction I'm also gonna share some of the lessons about surrendering that

we've learned so far so this presentation is server rendering would react the next is lessons learn so our company builds now we're called site you can go to zydeco to learn more about us which is the simplest way to server lessly deploy any programming language everywhere in the world nearest to your customer so the program works like this you have your terminal and for example as a file with folder with static files you enter now and this is gonna give you

a URL to your deployment so I created that an index.html file called uber and I'm here to go into it I said hello uber so I recorded everything as videos because they're gonna do my live demos on my laptop but I also deployed a little nodejs application so you go there you right now and you get your link to your application so one of the interesting things about this is we're embracing this idea that you can sort of

build a CDN for both the static files and also code with the idea of reducing latency at every step of the way so here I just deployed a simple JSON micro service but in order to reduce performance if we have this ability to execute code in a server the the thing that follows is that we can actually start pre-rendering your templates your JSX etc ahead of time so by the time a request arrives we

can start producing what the end user is intending to see so we wanted to build out UI for a platform built and react that took advantage of our platform itself so this is what our dashboard looks like today what it builds I make this very easily with react and have the ability to sort of render why surrender so if we think of a timeline of a user arriving to your website arriving to a

path inside your website you sort of realize that it's not just about search engine optimization that you want to either server render or pre-render so it's really about performance so we have the typical application having the user input potentially some server processing typically what happens is you download a really large amount of JavaScript for sufficiently complicated JavaScript applications and then at the very end of that we can begin rendering and processing even though that at every

step of the way we could have started streaming data or code to the client and then we get the result so you can think of her job as developers that optimize to sort of try to bridge this user input her intent and result and minimize the time is spent in the blue part right or even battery we can try to guess what the user is gonna want and suggest what they need before hands so it would be like the ideal scenario so in a more