This week we sit down with Guillermo Rauch, CEO of Vercel and co-creator of Next.JS. We chat about the front end development trends he is excited about in 2021 and how small improvements in performance, down to a hundred milliseconds, can make a huge difference for e-commerce sites.
The title of this week's episode comes from a Hacker News thread where Guillermo argued that the complexity of front end performance goes beyond simplifying your stack to bare web primitives.
You can find out more about Vercel, which recently raised a $40 million round, on Guillermo's blog, where he details what the company has planned for the future.
You can find more info on Next.JS here. It's a very active tag on Stack Overflow with dozens of new questions a day.
Our lifeboat badge for this episode goes to paxdiablo for answering the question: What does .split() return if the string has no match?
Guillermo Rauch Think of Vercel as closer to the CDN than to a VM. Right? Like the CDN, you don't know where things are. You don't know where the computers are. You don't monitor them. You don't do DevOps on your CDN, which is, in my opinion, amazing. One of my favorite mental models and pieces of technology is everything is global, and no one gets paged at 3am because their CDN is down. It's just an impossible conversation to have.
[INTRO MUSIC]
Ben Popper Are you spending too much time debugging instead of writing cool new features? Want to debug up to 40 times faster? In Enbold's code quality engine will not only pinpoint exactly where your bugs are, but also tell you which ones you need to fix first. Find out how at embold.io/better code.
BP Hello everybody! Welcome back to the Stack Overflow Podcast. Hi, Paul. Hi, Sara.
Paul Ford Hello!
Sara Chipps Hey Ben! Hey Paul!
PF Hey! Hey!
BP How y'all doing?
PF Getting by in a crazy mixed up world!
SC Yeah!
BP That's right. This is the place to come and zen out, not talk about politics or the collapse of our republic. This is just a place to chit chat about--
PF Oh yeah! No, it always works really well for separate technology from politics. That's, that's going great in our culture.
BP We're on a quiet period with the tech talks.
PF Free speech, everything's fine. It's all fine! None of this has anything to do with anything else. Just great.
BP I like the way you're unconnecting the dots there.
PF No connection, no connection.
BP So we have a great guest today. Guillermo Rauch, CEO of Vercel and the co-creator of Next.js. Welcome, Guillermo.
GR Thank you. Happy to be here.
BP So you proposed coming on the show, we're glad you did. And the headline was, Year in 2020 Wrap Up, Front End 2020 Wrap Up. What happened? And what's to come? So let me start there. Talk to me a little about what happened on the front end in 2020 that you liked or didn't like? And where you see things headed in the future?
PF Can we define what Vercel and Next.js are for our audience?
GR Yeah. So Next.js is a framework for front end development that's batteries included. In the past, when front end developers who want to do something sophisticated, with React and with style and design systems, they had to configure a lot of things like web pack and compilers and best practices for production. So developers were spending more time working on the meta framework, the part that's not their primary product concerns. So Next.js came along and gave developers this zero config, very instant, real time fast framework for front end development.
PF For people who know a little bit about it. Could you compare it to Gatsby on one side and Create React app on the other? Like, how is it different from those things?
GR Yeah. So what's interesting about Next.js is that it's a hybrid of a static generator, and a more traditional server rendering oriented web framework. So instead of saying, well, you do everything statically, or in contrast, you do everything dynamically. Next.js allows you to decide on a per page basis. So it's a really good fit for sophisticated websites that need to do a mix of these things like e-commerce websites, big content websites, with lots of pages, Next.js is more flexible than other front end.
PF I've noticed this with React apps where you're like, "Oh, but I also need the about page" and then you've created a component that's like 6000 words of text. Okay. So it'll help you, so you can do both the dynamic component based app stuff. And then also, if you need to drop in a lot of content in a sort of classic static webpage model, it makes it easy.
GR Totally.
SC If I'm using Next.js, I'm really thinking about the future of an application that is going to scale. So would you say that you're aiming for like small to large enterprise companies that are thinking about how to use JavaScript in a way that can support lots of users?
GR Definitely. So you typically choose in general, I would say React even. Like a lot of people say, oh, it's a, it has a big runtime size, right. Like when you import react as library, it's, it's not that it's heavy. But it's also not, you know, let's call it, it's not slim. So you typically choose React in the first place, because you're seeking that sort of extra mile of interactivity, power on the client side, customization. So I think Next.js fits kind of the very idea of React really well. You find companies that want to do a lot and a lot of interactivity on the front end, a lot of dynamism, a lot of customization and personalization, and typically tend to have larger sites. But what's nice about it Next is you started with one page, and you can sort of scale to billions of pages. You can think of it as like, horizontal scalability of your front ends.
SC That's great. So maybe now we can talk about front end in 2020. I saw I saw you on Twitter being very bullish.
PF Wait, we didn't, we didn't hear what Vercel is.
GR Yeah. So what we've found about front end is that the way to execute on it in the best possible way, is sort of this marriage between the power of the framework on the client side, but also the power of the cloud on the other hand. There's so many things that a platform can do to optimize the delivery of your front end. So that's exactly what Vercel does is you publish your next JS project to Vercel, and we actually support other frameworks like Gatsby and Create React app and many other ways of doing front end. But we then take advantage of the global cloud to distribute your front end and put it right next to where your visitors are, and then give you a way of continuing to push changes and collaborate on top of those changes. So is that entire sort of development lifecycle, you can think of is kind of escaping localhost, right? Like when a developer works in a front end, they're always on localhost 3000, or localhost 8080. But you know, the world is more collaborative now. And we can sort of get push, Vercel will give you a preview, deploy of your front end, you can share it with your team, you can share with your clients and customers, and then you can push to prod. And sort of all these best practices are baked in into the Vercel platform.
SC That's great. So I don't need to set up a complicated staging server or an environment for all of my developers, I can have production. And then there's incremental change.
GR Totally. And you don't have in similarly to what Next did it for, you know, the configuration of your front end framework, you don't have to constantly want to add the latest sort of feature for image optimization, the latest code, the latest compression, latest SSL optimization. So every optimization for high performance front end delivery is also baked into the platform.
PF What was Vercel's name before?
GR ZEIT.
PF ZEIT, okay. So publishing static sites. So, alright, let's get back. Thank you for digressing and explaining sort of what's up. Sara, what was your question? It was about--
SC It was about 2020. I was, I was repeating Ben's question of you know, what, what front end changes you see in 2020? What are you excited about?
GR Yeah, funny enough. I was just writing comments on Hacker News, which I don't usually do a lot. [Sara laughs]
SC Some of our favourite things to do. [Paul laughs]
GR So I think it summarizes my year really well. Because so the title of this particular post is, My Stack is HTML and CSS.
SC Mmm! Wow! Tat's a that's a catchy title. I wanna read that.
PF That's a bold move for 2021. [Sara laughs]
GR And I swear, I swear, I wasn't just going there to like defend Next.js and why you need more tooling on top of the bare primitives of the web. But I kind of called out a slight oversimplification of that blog post, I think it's kind of the summary of what we would summarize 2020 to have been in terms of the evolution of front end and our company. So the author posits that you can get a 100 Lighthouse score, so the score of how the industry has been measuring front end performance, if you just stick to the fundamentals, like he calls out WordPress is as I deleted WordPress, and now I'm just using HTML and CSS, look at how great my score is. And I think, you know, I think WordPress has done incredible things for the web. And one of those things is definitely not performance, like the average web WordPress blog doesn't perform. But that's not because they didn't use HTML and CSS. And they just, you know, they added, they added a radioactive material. I think what we discovered in 2020, we call this sort of the iceberg of front end performance is that developers are constantly looking at oversimplified models, to try to understand why things perform or don't. Like the most common that I've seen in software, engineering industries, programming language. If I choose the right programming language, I'm going to get performance for sure. And I think that kind of happened in front end too. If I delete all JavaScript, I'm gonna have great performance. Actually, that's not true. Because what I point out in the comment is, even the image tag is responsible for like lots of bad performance, like not giving it a width and height will make your layout shift. So it is when you go to a website and you see it all shift around and sort of you don't you can't even begin at reading the text because you got pushed down by a gigantic image that came later. So we saw this with jam stack in 2020 too. Like people were saying, well, if you use a static site generator, you're definitely going to have great performance. Or if you use a CDN, you're going to have great performance. And the reality is actually more complicated and boring, which is all of these things help, like we talked about with Next.js having hybrid, static support, static and definitely help. Perhaps you have a slower server, perhaps have servers in one location. And a static page could be published worldwide. And that gives you some more performance. But then even the CSS that you use can hurt performance, the elements that you use. The third party things that you embed, that when you embed the Twitter embed, right like that tweet that you see on all this websites being embed, I think I read there they say 2.5 megabytes of JavaScript are backed into that.
SC Woah!
PF Yeah. Embeds are just like "let's just help ourselves" That's just those clients, right? Let me, let me go in a different direction. Because as you're talking--not at you. But at the web and the way we've built the web, I'm slowly losing my brain. So like, the thing you're saying is real, right. And we've known that if you have the width and height of an image, you can get a faster page load time for like 22 years, and computers are able to look at the image and know how many pixels it is, they're really good at that. They're really good. And yet, for some reason, in our godforsaken industry, that is just, just like justified type, it is just a miracle and we can't solve it. We can't have images that are already responsive, built into the platform. And like you're seeing this right, like this is something that you're thinking about and responding to, like, how did we get this bad? And how do we dig out of this? Because I can't believe we're still having this conversation. I can't believe we don't know how big an image is in 2021.
GR Yeah, yeah. That's, that's fantastic. It's a fantastic way to put it. I think it kind of goes back to your previous question, like, why does Vercel exist? Why don't we just write Next.js and evolve it as an open source project that only knows about the boundary of a client side tool that you download from NPM. Right? And the reason is that when you have a platform, you can start automate--you know about the framework. So we sort of understand, oh, there's Next.js there or there is a view, or it is svelte. And we can start marrying cloud capabilities with sort of software construction capabilities.
PF Give me what would a cloud capability be, like an example.
GR So in this case, Next.js gives you an image component, that is almost a perfect substitute of the image tag. And then when you push, we do a lot of optimizations to your images automatically, while still preserving that kind of like super ease authoring experience of like, Oh, I'm just using an image tag. And we're going from like three letters, img to the React component version, which is five, Image with an I capitalized, right. So for those of you that are not familiar with react, React almost looks like HTML, the components are typically capitalized when they're not HTML tags. And they can have behavior, not just, you know, what the browser supports, but we can add behavior on top. So in this case, Vercel has an automatic image optimization layer at the edge. So we serve the right sized image to each device, which is also a huge deal. And you know, the emergence of the mobile web has added complexity to to developers equations as well.
SC In the world that you're looking at where so much focus is on the front end, I'm thinking in terms of back end developers, it sounds like almost like they're working in more of a DevOps capacity, where they're thinking the most about how they're serving up components? Does that ring true to you? How are you seeing people adjust to this world?
GR Yeah, I think a forcing function to this adjustment has been the emergence of mobile. I said mobile web is desperately needing a lot of enhancement. But mobile in general, has driven companies to create clients like on Android and iOS that consume API services. So API services are off the shelf. Now, it's so easy to integrate, you know, sign in with Apple, and then that service is maintained by Apple. Or your team maintains a graph qL, or Rust API, that is a perfect insertion point, this world this configuration for Next.js to exist, because each Next.js page can say, it has a data fetching function hook. And it says I'm going to fetch data from this API, or this API, or this combination of API's. So I think, you know, this division between front end and back end has already been happening. So it's a good place to be right now. And sort of identifying all this problems with the web. And this opportunities for improvement. Especially because we serve, you know, a lot of industries like ecommerce, that any measurable improvement in front end performance helps them dramatically, whereas an improvement on the back end might not really move the needle, or perhaps it's already been solved, like their API p 99 response time is 200 milliseconds. So from 200 to 150, you didn't do anything.
BP Yeah. For people who don't know, like when you're talking about ecommerce on a mobile app, and being you know, so reactive, what, what kind of difference could that make a half a second, you know, is that the difference between a purchase and just flipping to something else?
GR Absolutely. Yes. So we're looking at you know, 100 millisecond improvement, lifting conversion by 1%. A lot of our customers have home pages. So like when you land on Dior.com that If you improve something measurably there, that homepage, that just one page is represented sometimes, like 7%, 10%, sometimes even more of their aggregate revenue, because you have returning visitors, you know, what are you going to recommend for me today, right? And whether you render that fast, whether you got your images, right or not, it's a transformational difference.
BP Right? Having a great experience then makes you want to repeat that experience, that makes sense.
GR Totally, and not abandoned cards, and many, many other things.
PF What's throwing me here listening to you, is that you're seeing this stuff in a different way than I do. And the framing, let me see if I can give this back to you and see if I'm accurate. So the web to me is to be, you know, I've got a server and I download some HTML, the browser interprets it, I look at it. And then I go to the next page, like I don't, there are a million ways to add color to that. But that's roughly it. Apps have come along, we're on mobile devices. What it sounds like you're creating and building is almost the web webpages and web frameworks as almost like apps, in that you're going to bundle up all the static resources that I need, I'm going to download that to my browser, it's going to interpret it. And then much as apps do, when I get them from the App Store, I download a binary bundle. And it starts to call out to API's, and it starts to call out to analytics platforms. That is what you are translating to the web. So instead of providing dynamic services, you're providing a service for creating static app style versions of web apps that can get more and more efficiently onto browsers. Especially mobile browsers, and then go talk to all the other things that now make up the web.
GR Correct. And there's a hybrid situation here, because what do you mentioned about the 20 years ago web, has been a huge inspiration for Next.js because one thing we did differently four years ago, everyone was going towards single page applications, which basically what they do is they download a spinner. I always put it in those terms. Imagine going to a NewYorkYimes.com. And when you first get is sort of this animated spinner of the New York Times logo, you'd be like, is this Flash? Remember Flash?
PF No, this is what--oh remember Flash--this is what--[Guillermo laughs]
SC No, no, no.
BP RIP. Never forget. Never forget.
PF This is what Create React app really sort of pushes you in that direction, right?
GR That's why we're controversial, right? Because we released Next.js, at the same exact time as Create React app, almost. In fact, when we saw create react app come out, we already been working on Next.js internally for like a year, because we would found this developer experience problem that great reactor was also attacking. But we were creating web pages. So the example of the about page that he talked about is like, I was so frustrated with the idea that I'm gonna create pages that are always mediated by a loading screen? I was like, that's not what the web is about, you know?
PF Or you're ruining your component model by creating these weird one off components that are filled with content.
GR Exactly. And then there's a lot of pressure on the device, you drain battery life, you make it slower to render, because like the browser could have, sorry the server could have already given me a pre-rendered version. But I didn't want to give up on all the other beauties of single page applications, like the next step always feels immediate, state can be retained offline, you can create rich interactive components like image resize and figma. So we wanted to merge those two worlds.
PF Okay, that's how we get to Next.js. Alright.
SC What are you excited about? What's coming next?
GR Yeah, so one of the cool things about Next.js, especially when you use it with Vercel is, every push that you make, gets deployed to the cloud, and you get to test it immediately. So think of it as you mentioned earlier, not setting up staging. It's like infinite staging. So what we're seeing that's really cool is, again, we can empower the developer with the with the infinite computational capacity of the cloud, not only to get instant builds, like, you know, the other meme in our software industry is, you know, "I'm compiling and just go away and come back 30 minutes later." So what we think that's really powerful on top of this is, we can amplify the power of the front end developer, to enable collaboration company wide. Because now you have this live version of your product or your page, how about I send it over to marketing or IT or security or design, so everyone can sort of come together. It's been really fascinating to see because, you know, there's been a lot of discussion about whether everyone should be coding, everyone should be learning to code. And it's still, you know, like the barrier to entry to creating a very, very, very fast and high performance front end is still not something that you learn overnight. But there are a lot of capacities in companies that are very good at the job that they're currently doing. But they feel like they never have a chance to influence a product or front end or where it's going or even tested on a device that you know, it's not the developer's device before it goes live. So there's kind of this opportunity for getting the entire company, all teams to collaborate around this, which is a real version of your front end, and make it really fast. And yeah, as an experience that, you know, companies don't really have today, you have to wait weeks until you have to get an opportunity to chime in and where the product is going.
PF Alright, so faster response times. Here's my question. So I have a company that is very fond of Next.js. And I was like, you know, "What are your big Vercel questions?" and they immediately said, "When am I going to be able to write data onto the platform?" Because their competitors that going right for it. [Paul laughs]
BP Paul, you brought a hard ball with you today. This is a tough question.
PF I know, this is kind of a marketing podcast every now and then we got to just like--Guillermo can take it. Guillermo can take it. Yeah. What do you think about that?
SC Yeah, can you talk to a little bit more about that problem? What does that look like?
GR For sure. So to frame the problem correctly. So think of Vercel as to closer to the CDN, than to a VM. Right? Like the CDN, you don't know where things are, you don't know where the computers are, you don't monitor them. You don't do DevOps on your CDN, which is, in my opinion, amazing is one of my favorite mental models and pieces of technology is oh, everything is global. And no one gets paged at 3am because their CDN is down, it's just an impossible conversation to have. So Vercel always gravitated towards the statelessness. We push your front end to the edge of the network, that makes your visitors really happy. We give you the dynamism to be able to customize experiences. So you can build any commerce site that responds differently in California and New York with a different, you know, promotion of what coat you should buy. Lightweight jacket in SF, you know, snow jacket in, in New York at the same exact time. But you don't really know exactly, oh, I have a server here, a server there. So the question then becomes, where are you getting the data from? And the path of herself has taken is to say, don't start over a new data and back end initiative from scratch, you can modernize the front end for an existing WordPress site. And you can take advantage of all this incredible global distribution, the React component model, greater interactivity, faster performance. And you don't need to throw away the content engine that your company, for example, is already using, like everyone, everyone installs amazing WordPress plugins, to do an incredible job of like content editing, and reviews and drafts and all that. So we introduce you to this path and say, grab all the blog posts from the WordPress API. And now I designed a high performance front end Next.js. But you can do that for any data service that exists in the world.
PF I see you're not going to rebuild the cloud, you're going to focus on that.
GR Yeah, exactly. [Ben laughs]
PF So let me just--this is an interesting moment, right? Because for a minute, it looked like integrated API driven platforms, like let's say, Firebase, we're gonna take over the world. And you would drop your data in and you kind of get your get everything out and you sort of all build that API out into one big piece. And now you've got any of your competitors and other organizations, are starting to add data layers to their stuff. Like do you think that that is--is there going to be room for all of those hybrids? Or is the kind of static front end, diverse back end really the way that we're going?
GR So I think what's happening really, is that the way that applications are being created, is changing very quickly and very dramatically. And I think a lot of software engineers have not paused to analyze the philosophical reality that we're in. So for example, a lot of us at least use Stripe to be our charges, invoices and subscriptions, database tables, right? It doesn't look like a database, but they are right, like behind that there is a relational data score.
PF I mean but they're all--Salesforce is a database, right? Like, they're just like, "Yeah, we put a kanban board on top of it." Now there were $200 billion, but yes, okay.
GR So imagine if you gave your organization the freedom to create a front end experience that feeds data from Salesforce commerce cloud one day, and for this particular interaction, you choose this Stripe. And for this other thing, you use a headless CMS. And for this thing, you use Shopify. So it's very liberating. And it's that we're not going to endorse it's usage of a traditional database. Like I'm going to use Postgres. And I put every bit of data that I have in there. But I do think that that's just not where the world is headed. The monolithic data store has been broken down into independent microservices, some of which are maintained by companies, some of which are maintained by your own company. So I think a lot of our competitors are going after, okay, I'm just going to bring the monolithic data store along for the ride. And I think that still will be a thing, we'll have partners that will offer data API's for Vercel that are more, you know, on a traditional data store type of thing. But that's where you get velocities where you said, I'm going to leverage my existing Salesforce investment or WordPress investment and move faster.
PF This is real. And then I mean, one of the things that's happening at work is sort of the automatic API and on top of Postgres, like Postgrafile, and then every other service getting glued to the side of that, like WordPress for content, and then you put them all together with a front end framework. And that is absolutely the way it's going, like orchestrating that is hard. Those API's all have their own versions. Like that part's still tricky.
GR Yeah, I guess you mentioned Firebase, a lot of our customers, you know, bring Firebase when they need some, you know, lightweight data store with real time push features. And that's completely compatible with Next.js.
BP Alright, well, we had a hardball question and Guillermo said, "Let's get philosophical for a moment." This might be the deepest, the deepest episode of The Stack Overflow Podcast we've ever done. But yeah, that was terrific. Guillermo, thank you so much for reaching out. It's great when somebody with a lot of expertise wants to talk to us, we appreciate that. I have to let you know that just in the last 24 hours there are 45 questions on Stack that are about Next.js. And I would say about half of them are unanswered. So you've got a little bit of work to do. [Sara laughs]
SC That's a great way to nudge people.
MP I like to bring people on and shame them into helping.
GR I was discussing our Stack Overflow investment even just a couple weeks ago. So we're on it.
PF You know, it's funny, it's like, I feel that if we had say, Satya Nadella on this podcast, he wouldn't be able to answer those questions, but I feel Guillermo could get in there and do a pretty good job.
GR We'll work with our team. We'll get to a 45 every 24 hours.
[MUSIC]
BP Alright, so at the end of every episode, Guillermo, we shout out a life boater, that's somebody who earned a badge on Stack Overflow for answering a question that had a negative score of three or more and bringing it all the way up to a score of 20 or more. So today, let's give it to paxdiablo, awarded December 30. What does .split() return if the string has no match? Alright, we'll put it in the show notes if you're curious because there is an answer to this one. I am Ben Popper, Director of Content here at Stack Overflow. You can find me on Twitter @BenPopper. And you can always reach us with ideas and questions podcast@stackoverflow.com.
PF Ben, that's very interesting. But where do we find Guillermo if we want to get in touch with him?
BP Yeah Guillermo, where do we find you?
GR Twitter @rauchg and @vercel as well. So two accounts you can follow.
PF Excellent.
BP Terrific.
SC Great. I'm Sara Chipps, Director of Community here at StackOverflow. And you can find me @SaraJo on GitHub.
PF And I'm Paul Ford, good friend of Stack Overflow. Check out my company Postlight, we are definitely hiring. So please, please be in touch.
[OUTRO MUSIC]