Razzle: SSR Without The Framework - Jared Palmer @ ReactNYC

hi I'm Jared Jared Palmer if you follow me on github or Twitter and we're gonna be talking about today server rendering kind of tough I've been doing for a little while and a little about me so you I've been doing some open source recently ie my most popular project is called formic it's a foreign library for react I also done thing called backpack which is a little wrapper around web pack but for backends razzle and then today I also just released something called react FNS which is called react functions it's kind of you're familiar with date FNS like a date utility library the idea with react functions shameless plug here is to be like a utility belt for react for modern like Dom API so device and network and media and geo position and like all in one place you know think about it like if there's a Dom API for it there's a react FNS component for it and a higher work component for it so if you have some time later check that out but today I want to talk about project of mine called a razzle and before I get going on that who you here users create react Det everybody right like it's awesome who here uses next Jas all right les what's cool about that it's great developer experience right awesome he just it's like magical if any of you who came to react or from from before the kree agree act that days there was there's a lot of tears of pain when it came to setting things up with web pack and configuring stuff and just really confusing and then server-side rendering is really awesome but again even harder to set up from a tooling perspective and so next definitely helped a lot of that but um I'll tell you the story about where I struggled without a year ago at this time when next to just come out and what led me to build this thing called razzle so razzle is really for dynamic content and let's before we get any further go about talk about what static a static site is and what a dynamic site is so static sites static HTML it's a good old web page and that is really really great for anything or any type of startup that starts at blank comm like that's great for your s.p.a you don't need to worry about SEO and and that covers most applications nowadays but some applications like media sites or like an Airbnb Style app needs to really dynamically render something every single time someone looks at a given route and that's the kind of thing that's the thing we want to be talking about today because by just like throwing all SSSR into one place you really are neglecting some of the nuances towards the applications and when you talk about the tooling required for each specific application as it turns out like you need to have a come-to-jesus moment with like well do I actually need to serve dynamic content on every single page load and the other thing you've to ask yourself about dynamic content is like doesn't need to be on every single route so if you out for a framework like create react app you are throwing all this this conversation out the door it's just going to be loaded on the client you have a very fat JavaScript client if we're gonna need something like Gatsby you're gonna say well I might have dynamic content but I don't need it to be dynamic on the page load I can it can be dynamic just at compile time so I can download I can request all my information and spit out a bunch of static HTML pages if you need more dynamic content every single page load you're sort of forced into a couple decisions you can either use something like next you can use something we call the react server if you familiar with that framework or you can use something called razzle or you can sort of like roll your own thing and roll your own thing is just not a great idea for a lot of reasons ideally you'd like to have your build tool abstracted so you can reuse it across different projects and that was really popularized by create react app and so my goal with razzle was to take this boilerplate that I had with for this big SSRI and I guess our app and roll it up into something that was kind of like create react apps so the goal for the project was to build create react app for a server-side rendering but at the same time next to just come out and I was really into next for a long time it's got awesome developer experience has some opinions about the way you need to structure application some of those are great some of those are well it's it's again it's opinionated it requires you to use a custom data fetching solution a custom routing solution which is based on folders and well you can do even do cool things like route reloading and stuff like that it also server renders every single time so I got into this and it was really it was really quite good for the first couple couple days but um certainly hit a wall when it came to doing stuff with routing and Michael Jackson who's about to talk right after me around like middle of this like just dropped at him and Ryan dropped react router for and I love react router for it's awesome it's like probably the best part of the react ecosystem and reactor out of 4 if you're not familiar with it makes routes into components basically there's no like concept of this like static thing that has to be done ahead of time like routes are dynamic as you want them to be and I saw a reactor out and I was like oh my gosh I have to have this like we need to deal with this and server rendering like let's let's figure how to do this so what I'm doing was figuring out a way to abstract away the build system of my JavaScript application for the universal job shot on location away from like the framework and libraries that were it was I was going to use and then ended up having some really interesting results because once you abstract away the build tool and also like some of the framework decisions it turns out you actually can protect yourself from the JavaScript fatigue that we all like suffer from daily because I've struck in the build system way and being sort of Morton Gnostic about the frameworks and data fetching and stuff like that you actually have a better foundation to build on and so I'll get to show you what razzle feels like to use so it's so let's do just like a create react app you can do yarn create arousal app and let's call this my demo and then it's gonna install a brand new SSR reactor with react router and a couple dependencies hopefully and while that does that I'm gonna get a beer now I'm not gonna get a beer I thought about getting a beer I think it's gonna maybe should've gotten the beer bummer no that's all good I like have that planned out beforehand I was like your wellness installs and didn't work quite work out that way okay yeah so let's deal with that let's deal with that first word let's zoom in on that all right stilling stalling because of a good thing I have a demo so pretend that just installed right all right let's open that up so pretend that just installed perfectly because just did and so what do I get I got like sweet so what I get here I'll pop on my source directory and it looks surprisingly like create reactive oh my goodness I have a PS which is a nice little react router route I my client mounting point so and so this is gonna be where the client mounts and we're in react 16 so we're using the new hydrate function I have my home route which is gonna look surprisingly like the create react app route in a second and then I my Express server I'm like that's it that that's literally all it is and the magic is that through the amazing power of web pack which is as we know like super awesome let's start this thing up let's bust open localhost oh my goodness we have us we have what looks to be like the same thing you always do when you create recreate react app right except read that that's some server rendering in there boom and even better than that crank this open here if I go to home I gonna say I'm welcome to read razzle welcome to you react NYC save boom you have hot reloading and it just works and that's that I know and now right now so how does that work it's kind of cool there are two web pack instance is running one handles the client bundle the second handles the server bundle so yeah we're actually running web pack on the node server and that allows you to basically use whatever framework you want believe or not it doesn't actually just work with react it works with reason react it works with elm it works with view it works with angular because it's actually just dealing with the web pack parts it's not doing anything react stuff well it comes with react and react outer as the default as I'll show you right here let's kill that one this is a oops let's kill this so this is a know if you guys ever seen reason code but this is some reason code and let's start this up with razzle reason react and thus we can see the beside thing so this is a pre instead of a pas right and again the only dependency on this entire thing here that matters is razzle but you can because again let's so it's start a little O's 3000 different app here you get our counters you get all that stuff again server rendered pretty sweet and let's update something when you make edits you make edits boom more hot reloading awesomeness yeah and let's do one more here so in the razzle repo there are a bunch of examples it works with pre-act it works with typescript it works with flow works with because I mentioned Elm and Ferno whatever you want doesn't really matter that's the whole point of it the point is that like as the JavaScript fatigue sort of yeah as you embrace JavaScript fatigue and the new thing comes out you can try it right like you're not going to be locked into some weird like linking system with like one way to fetch data and that's important to me is important to the clients that I build apps for that like we can pivot and move as fast as the ecosystem does that's like a really really big difference between I think even from really create react app philosophy which is like this is the way it's done and I think that's really important for the ecosystem to have like the blessed Facebook way of doing something but just so but unlike that razzle lets you create a custom configuration file and so if you need to modify that underlying web pack I don't think you can just do it it's not like let's pull up that Elm one I think the Elm one has some let's the demo with Elm so you open up a razzle config dot yes and it's just a function so if you view here's use react storybook or something like that yeah it's the same thing you basically can modify the web pack configuration as you wish I give you the config you can do whatever you want add a loader add some crazy babble thing that Henry wrote the back to Henry everybody loved that that was great but uh yeah so you basically have a free-for-all here and and wit and with that like you can do some pretty interesting stuff one of the things that's pretty cool that this allows me to do is something with react router that's kind of interesting so instead of rendering every single skater react let's go to hold on one second here so other things you can do with this with react router 4 which is kind of interesting yeah you can do next generation data fetching if you want it to right so you don't have to go away with this whole like page concept so powered by razzle what you would do is if you wanted to like make yourself that your own next Jas but without what with react router per se you just like specify a route config statically and on the server you traverse your routes oh sorry you can just reverse your routes call like get initial data and then inject it into the page and then you're done it's the same thing so you don't have the vendor lock-in you don't have to churn you don't have just a lot of things are mitigated you're in total control and so for me being a little bit of a control freak when it comes to like decisions about the way my app is done or data's fetched like that's really important and and so I hope that you know if you haven't checked it already you'll think about razzle for your next thing that needs dynamic server rendering again I would urge you though like don't jump the server rendering to you soon I have this habit as someone who's like built a gigantic application with server rendering avoided at all costs and so you have to like build your app client side maybe deal with auth server-side but then like only render on the client and then like the day you launch like then deal with server-side rendering because it is such a pain to deal with it ahead of time and until you know like if you're a startup like until your apps laid out like you don't need to be fetching data like that but if you but if you do what's cool is you can actually move from create react up to razzle pretty similarly because it supports exactly the same CSS it is almost an identical Babel transformation so it's actually quite easy to move from creat react app to razzle if you just decide you need server rendering on one day and I would really really suggest you like think deeply before you could go full-out in on like I need to serve a render every single page of my application if you're like building a new site okay fine your Airbnb okay fine but if you're not like I just would just urge you please next time just think of this presentation think of this moment oh wait yeah Jerry he's totally told me not to do this and then I will smile and like you'll feel thank me later because the pain is is non-trivial so with that just like to say thanks and thanks stash and thanks to Ilya and the whole team at the react NYC any questions so first of all awesome job if that lasts especially like static analysis of the routes and like setting up ahead of time I was literally just talking to Ryan last week and we were like one of us should do this because like I don't think people are getting this yet and so awesome job on that that was super awesome super solid so you said don't do don't do server rendering until like the day you launch right until the very very end yeah what's the story there with like razzle right so if I'm if I go and I build out my entire app client-side how easy is it to just be like oh I need server rendering let me drop this in you know yeah ya know and totally so the I would argue and so my argument to be that the the pain you're going to insuit a refactor all your date so before we go very further in order to do server-side rendering and react you have to fetch all your data before it renders so that means you have to inject it from the top of the application all the way down to all the leaves or is it a client-side application you can basically fetch data like anywhere you want and it's always and so depending on how like hygienic you are about your data fetching with containers and stuff that either could be a very easy switch or a very painful switch my argument is that that switch is less pain than starting from scratch server-side rendering so and it's usually again as it turns out only a couple routes you're going to need to do that on so it's it's on so like your settings like I've never found if I've never found a setting as in any application that ever needed to be server rendered right it doesn't something that never needs to be serve you don't need SEO on your settings pages right so if it's like your home page or a couple of marketing pages or maybe just parts of your application again like my argument is that like it's gonna be easier and faster for you to develop client-side and then when the day comes like go tooling and figure that out like Google but it will take you less time to like refactor then Google will to like pick up that you've just launched your application and I've sacrificed Spain the one thing I will say though is that the move from client-side authorization to server side or isomorphic authorization is kind of tricky you have to set a cookie instead of using a token and so that's probably the biggest like hurdle to deal with but after you do that like it's it's it's not that again I don't think it's as painful as starting from the beginning with server rendering does it make sense yeah yeah thank you just the LeBaron maybe like a point that you ran to be on the server side rendering developer of like a server-side framework engineering people you're both sorry why do it I think the thing that gets me the most sometimes is but I don't use that much Redux but more like a mountain of like it reductions ilet's it's like everything goes in Redux but there's a little bit of Redux in the application that I'm thinking about right now but basically the issue I see a lot that comes up is you have something that's that's hydrator that's like that server rendered and it needs to get some sort of update and that update changes with authentication or something like that and you need to use like a lifecycle method like component will receive props or a component did update and you forget and then you have no idea why something didn't update and you're confused and you have this weird discrepancy between client side and server side and that's like from the react side of things from the tooling side of things that problems mostly mitigated with razzle so I don't really have like massive tooling issues as much anymore there's still some stuff that's kind of tricky like dealing with SVG's can be a little there's like we're using some crazy babble transform for SVG's that that we got to get rid of that from we moved to typescript but that was more like a tooling problem that was like maybe exacerbated by USSR but like for the most part I think the trickiness it gets with the tricky part of this is you have stuff coming in from two places and with a something like next is for example you have to you basically only have one place to define your data it's in that get initial props function right so on every single request it's going to call the same exact function and so but with razzle you don't you don't have that kind of constraint so you can do cool stuff like I'm only going to get my cookie one time I get my like token one time and then I don't need to get it again because I know I have it once it's loaded and so just playing with that those can be both like very liberating but can be also quite painful if you aren't careful but I would say like just managing the difference between serve like server stuff and client stuff is still just challenging at every single moment I think one of the reasons why I say like do it the last time last possible moment if you want to feel like it read a good article that I don't know gets play anymore go to the I think Pete hunt has something called a react out to that was that right like react out - yeah it'll read that and like follow that because he's a genius and like Pete like made all this and made it all possible but yeah it basically tells you like how to get into react and I would follow that like very happily [Applause] you

Channel: React NYC

Views: 6,958

Rating: 4.9432626 out of 5

Keywords: React NYC, React.js, Server Side Rendering, SSR, dynamic server rendering, React SSR, create-react-app, Gatsby, Next.js, Razzle, react-server, React Storybook

Id: 2Vhy5188Msc

Length: 21min 19sec (1279 seconds)

Published: Sun Nov 19 2017

Reddit Comments

[u/trekinbami]

Too bad there isn't an example with MobX.

[u/coreyleelarson]

I would like to personally thank you for building this.

I work for a rather large retail company that has been in development rebuilding our site with React for the past year and a half. Not many people truly understand the shear mental pain I experienced setting up all the crazy tooling necessary for SSR/data-fetching/HMR (and we were never really quite happy with how we did it).

I’ve been looking at razzle for the past few days and POC’ing setting it up for our app. It seems very promising, and I hope to be able to convince management to refactor our app to use it.

[u/Ewers]

Huge fan of razzle! Can't recommend it enough! Thanks Jared!