Next-js Conference Debrief
Anthony Campolo and guests explore the highlights of Next.js Conf 2023, discussing partial pre-rendering and server actions
Episode Description
Dev Agrawal and Rishi Raj Jain join JavaScript Jam to break down Next Conf's biggest announcements, including partial pre-rendering, server actions, and TurboPack.
Episode Summary
This JavaScript Jam episode recaps Next Conf with Dev Agrawal, who attended in person, and Rishi Raj Jain, who shares his perspective as a developer working across Next.js and Astro. The conversation centers on the conference's marquee announcement: partial pre-rendering, a compiler optimization that combines static shell generation with dynamic streaming by leveraging existing suspense boundaries — no new APIs required. Dev explains how this differs from simply pushing compute to the edge and discusses the implications for authentication libraries like Clerk, where his team is already evaluating compatibility. The discussion moves to server actions, now stable in Next 14, where Dev draws a comparison to GraphQL mutations but notes that server actions lack the same granular cache invalidation, instead operating at the route or fetch-call level. Rishi raises practical gotchas he encountered when third-party SDKs failed inside server actions, leading to a broader conversation about the inevitable friction between new framework features and the dependency ecosystem. The group also touches on the new Next.js Learn course, which Anthony argues should have existed from the start as table-stakes documentation, and TurboPack's incremental progress toward stability. Throughout, the hosts weigh the tension between Next.js introducing powerful abstractions and the risk of complexity and abstraction leaks over time.
Chapters
00:01:32 - Introductions and Conference Travel Talk
Anthony welcomes Dev Agrawal to JavaScript Jam and the two catch up before getting into the meat of the episode. Dev shares that he's been to San Francisco multiple times now, most recently for Next Conf, and reflects on how quickly his life shifted from college student to frequent conference traveler.
The conversation touches on the realities of developer travel schedules, with Anthony warning against stacking multiple trips in one month. Dev mentions a month-long trip to India where balancing work and family across time zones proved difficult, prompting Anthony to offer some advice about actually taking PTO rather than trying to work at half capacity while traveling.
00:06:01 - Partial Pre-Rendering Explained
Dev gives his high-level impressions of Next Conf, noting that the announcements lived up to the hype he had built in his mind. He then walks through partial pre-rendering, the conference's standout announcement, explaining how it generates a static shell of a page down to the first suspense boundary, serves that from a CDN, and then streams in dynamic content — combining static generation and dynamic rendering without requiring edge runtimes.
Anthony presses on how this relates to server components and whether the new terminology is necessary. Dev clarifies that while server components and suspense boundaries are the enabling technology, partial pre-rendering represents a genuinely new capability: mixing static and dynamic rendering within a single page. The feature is in preview mode, and Dev expects the real challenge will be discovering what breaks when existing libraries interact with it.
00:16:05 - Auth Implications and the "No New APIs" Philosophy
Dev discusses what partial pre-rendering means for Clerk and authentication libraries broadly. The key question is whether auth checks — like reading cookies or calling user functions — will accidentally opt entire pages out of static rendering, defeating the purpose of the feature. He notes that Clerk has historically been an early adopter of Next.js features and expects the team's work will focus more on testing edge cases than building new integrations.
The conversation highlights Vercel's heavy emphasis on "no new APIs" during the announcement, with Dev drawing a humorous parallel to Angular's ongoing rebranding efforts. He predicts that most real bugs will surface through user support tickets over the following months rather than through internal testing, a pattern familiar to anyone maintaining framework integrations.
00:19:22 - Standout Talks and the Keynote Production
Dev shares that he watched most of the in-person talks after the conference but didn't catch the virtual track, which had too many sessions to cover in one sitting. He praises Guillermo Rauch's keynote as one of the better conference keynotes he's seen, touching on the common comparison between Vercel's presentation style and Apple's.
Anthony defends the polished production approach, arguing that the tech industry at large has adopted this keynote aesthetic and that Vercel simply does it well. He notes Guillermo's evolution from scrappy Node conference talks a decade ago to commanding a major production stage, calling it an inspiring trajectory for anyone in the open source world.
00:22:17 - The Next.js Learn Course
The discussion shifts to the new Next.js Learn course announced alongside Next 14. Anthony argues that a comprehensive tutorial covering the full framework should be table stakes for any project, pointing to Redwood's tutorial as an example that has existed since 2020. Dev counters that the course appears to go beyond a basic tutorial, but Anthony maintains that the depth of coverage — styling, databases, streaming, accessibility, metadata — is exactly what a proper tutorial should include.
Dev finds value in the course as a centralized learning resource that could prevent beginners from following outdated six-month-old videos. Both agree that given Next.js's momentum as the dominant framework, having an official and up-to-date educational path is overdue but welcome, especially as the framework's surface area continues to grow with features like partial pre-rendering.
00:31:32 - Rishi on Partial Rendering, Astro, and HTMX
Rishi joins the conversation and draws a connection between Next.js partial pre-rendering and Astro's page partials, noting that Astro's approach uses HTMX under the hood. This sparks a discussion about HTMX's unique appeal: it lets developers add client-side interactivity without writing JavaScript, extending the capabilities of whatever server-side language they already use.
Dev argues that an HTMX killer is practically impossible to build because its value proposition is so specific, though he notes it makes less sense if you're already writing JavaScript on the server. The group briefly explores how different tools serve different niches, setting up the broader theme that no single solution covers every use case in the modern web ecosystem.
00:36:29 - Server Actions Deep Dive
Anthony frames server actions as potentially the GraphQL mutation equivalent for the React world, but Dev pushes back on the comparison. He explains that while server actions handle database mutations, their cache invalidation operates at a coarser level than GraphQL — invalidating entire routes or fetch calls rather than specific fields. GraphQL's schema awareness lets it automatically update dependent queries, whereas server actions require developers to manage that themselves.
Dev then highlights the progressive enhancement angle: server actions transform into standard form POST URLs before hydration and switch to client-side JavaScript afterward. He also describes passing server actions as props from server to client components, enabling patterns like optimistic UI with React's built-in hooks. While acknowledging the power of this approach, Dev cautions that having one abstraction handle so many responsibilities increases the risk of abstraction leaks — echoing concerns similar to those the community experienced with useEffect.
00:43:31 - TurboPack Progress and Third-Party Library Gotchas
Dev summarizes the TurboPack announcement with characteristic bluntness: Vercel said last year they were rewriting everything in Rust, and this year they're announcing they're still doing that. The key numbers are improved local server startup and fast refresh speeds, plus 5,000 tests passing — though the group questions the significance without knowing the total test count. Dev notes that areweturboyet.com tracks remaining work.
Rishi raises a practical issue he encountered with server actions: third-party SDKs like Resend's don't always work inside them, forcing him to fall back to raw fetch calls. Anthony broadens this into a discussion about how framework teams can never guarantee compatibility with every dependency, and the first framework third-party tools target is almost always Next.js — a significant but underappreciated advantage of being the dominant framework.
00:52:15 - Closing Thoughts and Socials
The episode wraps up with Dev and Rishi sharing where listeners can find them online. Rishi points to his Twitter and his growing collection of web development tutorials spanning Next.js and Astro. Dev highlights his Twitter and YouTube channel, and gives a plug for Clerk as an auth solution that deeply integrates with Next.js's latest features.
Anthony closes by reinforcing the advantage Next.js holds as the default framework that third-party tools prioritize first when building integrations. He thanks both guests and the audience for tuning in, signing off on what turned out to be a wide-ranging discussion covering the most significant announcements from Next Conf and the practical realities developers face when adopting new framework features.
Transcript
00:01:32 - Anthony Campolo
Hello, hello. Welcome, everybody, to JavaScript Jam. We're going to be talking Next Conf today, and we got Dev with us to give a little bit of his perspective as someone who was there at the conf. So go ahead and bring him up. How's everyone doing out there? Hello, Rishi, thanks for joining. I'll go ahead and throw you an invite also. Yeah, all right. I just tweeted recently about the SBF trial. I don't know if anyone is following that. It's not looking good for Sam, let me tell you. What's up, Dev?
00:02:24 - Dev Agrawal
How's it going? How's my audio?
00:02:26 - Anthony Campolo
Audio sounds good.
00:02:28 - Dev Agrawal
My setup has been a little jank because I lost the wire that I used to connect my mic, so I'm just using my headphones.
00:02:38 - Anthony Campolo
Okay. Yeah, no, it sounds pretty good.
00:02:40 - Dev Agrawal
Yeah. Cool, cool. It's great to hear.
00:02:43 - Anthony Campolo
Yeah. So were you at Next Conf in person in SF?
00:02:49 - Dev Agrawal
Yes.
00:02:50 - Anthony Campolo
Okay, first question: have you been to SF before?
00:02:54 - Dev Agrawal
I have been to SF before. I was at Jamstack Conf.
00:02:58 - Anthony Campolo
Oh yeah, that's right. Okay. What were you gonna say?
00:03:04 - Dev Agrawal
No, go ahead. Nothing.
00:03:05 - Anthony Campolo
That was just what I was curious about because I grew up and lived in the Bay Area for a very long time, so I'm always curious about outsiders' perspectives on SF because it used to be nicer, let me put it that way.
00:03:19 - Dev Agrawal
Yeah, that's what I've heard. But I think, pretty much other than Cincinnati, SF has been the only other city in the States that I've been to the most.
00:03:31 - Anthony Campolo
Yeah.
00:03:32 - Dev Agrawal
As in, I've been there four times, and I've lived in Cincinnati for four or five years.
00:03:38 - Anthony Campolo
Sure. Yeah. Well, I anticipate you traveling a lot more in the future with the line of work you do.
00:03:45 - Dev Agrawal
I mean, yeah, I kind of already am. I probably didn't notice when it happened, but I very quickly transitioned from just being a college student to traveling every other month, or multiple times a month. I didn't quite notice that transition happening, but now that four or five months have passed, I can see it very clearly.
00:04:14 - Anthony Campolo
Yeah, I think traveling every other month, that's actually a pretty good cadence. I've been in a situation where I'll have a month where I'll do like three trips at once, and I would not recommend that.
00:04:28 - Dev Agrawal
No. Yeah, it is every other month, but every other month it's like three trips.
00:04:36 - Anthony Campolo
Yeah, no, that sounds like the worst of both worlds.
00:04:41 - Dev Agrawal
Exactly. Yeah. I mean, it could be the worst of both worlds, or it could be a nice in-between, like there's a traveling month and there's a working month. I don't know.
00:04:52 - Anthony Campolo
Yeah, no, that makes sense. When you travel,
00:04:56 - Dev Agrawal
I mean, yeah, kind of. But then I also went to India for a whole month, and that kind of was the worst of both worlds because there was large travel involved, but then I also didn't quite get to work because I was in India with family and across a different time zone.
00:05:16 - Anthony Campolo
Yeah, that's tough. I'm sure Clerk has generous PTO though, right?
00:05:22 - Dev Agrawal
I mean, I got a little bit of it, but mostly I was trying to work. I wasn't on PTO. I did take time off to go on family vacations and to React India, but I was trying to still keep working a little bit.
00:05:41 - Anthony Campolo
This is the biggest mistake. New people... I made this mistake too, where you're like, man, they need me. I need to keep working, right? It's like, take your time off. If you're gonna be traveling, just take the time off. It's better for them for you to do that than to
00:05:58 - Dev Agrawal
half-ass it for an entire month, right.
00:06:01 - Anthony Campolo
I mean, if you have a kid, you can take a month off. You're just visiting family. It's a little harder to justify a whole month. That's fair. Cool. Let's talk about Next Conf. So you were there. Yeah. Tell me about your initial thoughts, or just kind of your high-level take, and then we can kind of dive into specifics.
00:06:22 - Dev Agrawal
Yeah, I mean, last year I wasn't at Next.js Conf, but that's kind of when I was starting to attend more conferences. I was really interested in Next.js Conf, and I was in San Francisco when it was happening, attending a different conference. So I definitely wanted to make it this year and see what it's about, see what all the buzz is. I really don't think it was... I think it kind of kept up to the hype that was at least built in my mind about what exactly happens at this conference, who's there at this conference, who's talking about what. If anything, there's probably a lot more of that going on that I just completely missed because I'm still not the greatest at scoping out conferences yet. But yeah, overall I went into it kind of thinking that this is where all the latest and greatest in the web development world happens. The stuff that people are talking about in Next.js and Vercel land are things basically no one else is doing.
00:07:39 - Dev Agrawal
And this really kind of hit that home. The kind of things like partial pre-rendering and suspense rendering... Yes, a lot of frameworks have suspense rendering, but really the way that Next.js combines them makes it a seamless experience. And on top of that, with the partial pre-rendering stuff, it's another layer of abstraction that we don't think about, and it's a new capability that hasn't really been achievable before. Those are the kind of announcements that I think I was expecting at Next.js Conf, and they did happen. That was great to see.
00:08:25 - Anthony Campolo
Okay, cool. Yeah, I would love to dig into partial pre-rendering since that was the first thing you mentioned. I have not heard this term. How is it different from partial hydration?
00:08:40 - Dev Agrawal
Great question. I think partial pre-rendering was also kind of the topic of the day, so to speak, out of all the releases, because the other releases were like, yeah, this thing that we announced before, it's stable now, and this other thing that we announced before, we are still working on it. Here's a course. Those were the other three big announcements. Partial pre-rendering is technically the most interesting one.
The basic premise of partial pre-rendering is that Next.js and Vercel have been trying to push us to edge runtimes like Cloudflare Workers and basically do our compute as close to the user as we can so that they can receive quick responses. Basically, we don't want them to be waiting for a round trip from wherever they are to us-east-1 or something like that. That was the motivation behind let's push this compute to the edge. But there's a big barrier there with edge runtimes and making sure everything is polyfilled and making sure your code can still work on these different runtimes. Partial pre-rendering is an approach to be able to get some of those quick response times that we have on the edge, but without having to deal with the various edge runtimes.
00:10:11 - Dev Agrawal
This is the context behind it. What it actually does, partial pre-rendering will look at your page, render it statically until it hits the first suspense boundary, and then it won't go any deeper. It will basically generate a static shell of your entire page that just stops at the first suspense boundary. Then that is sent as a static HTML file and stored on the CDN. It's basically a combination of static generation and dynamic rendering. You get the shell that is statically generated, it's on the CDN, you get that response immediately, and then everything else, because now we have streaming, all the dynamic data or dynamically rendered server components or server-side-rendered stuff, can be streamed in later.
00:11:11 - Anthony Campolo
Basically, I'm struggling with this because to me this is server components. Is this enabled by server components? Is this the next feature that server components are built on? Does this have nothing to do with server components? How does that all fit together?
00:11:29 - Dev Agrawal
Yeah, so server components are the key feature that enable this, especially with suspense. Basically, the transition that we did from render everything once and send the entire HTML to now we have streaming, we have these suspense boundaries in Next.js App Router, and whenever there's a suspense boundary, your server components will get rendered and the output will be sent to the client. Then everything that was inside the suspense boundary will render concurrently, and their responses will also be streamed in later once the data fetching is done. Was that kind of...
00:12:13 - Anthony Campolo
Yeah. I guess the reason why I'm struggling with it is I feel like Next has been guilty of this in the past, inventing new terms when it's like, do we need this new term? To me, they could have just said server components work, now you can use server components, and they've already explained the benefits of that. Why did we need this new term, I guess is my question.
00:12:38 - Dev Agrawal
The idea is that, again, this is a new capability that wasn't there before. Right now you could either statically render the entire page and put it on the CDN, or the entire page gets rendered by a Lambda or a Worker. You cannot combine or mix and match the two of them. Partial pre-rendering basically gives you the ability to do both on the same page, and the boundary between them is the suspense boundary. They just work in the sense of there's nothing new you have to learn, there's nothing new you have to write, because this existing thing, the suspense boundary that we have been using, just gets reused. Or this new functionality just reuses that same concept that we've already had. In that sense, it's not something new that we have to learn to put in our code, but it's a new capability that we can now keep in mind and enable for our application. And maybe at some point it just becomes the default.
00:13:48 - Anthony Campolo
Interesting. Yeah. I'm going to read just a little bit from the blog post on partial pre-rendering here. It says, we'd like to share a preview of partial pre-rendering, a compiler optimization for dynamic content with a fast initial static response. It builds on decades of research and development into SSR, SSG, and incremental static regeneration, ISR. So yeah, I think that makes a lot of sense. It's like, how do we take all these different weird rendering modes we have and try to slot them into a single most-optimized setup, which I think is great. I think making developers think about all these different rendering modes is hopefully going to be a thing of the moment and we can kind of move beyond it. I think you're seeing so much work on this over the last two years in projects like Astro, and now that we're bringing it to the React frameworks, this is going to be really great. It says here that it's a preview, though. It's under active development, so this is not prod-ready, it sounds like.
00:14:52 - Dev Agrawal
Yeah, it's like actions or TurboPack. Like, all the actions are now stable. But yes, partial pre-rendering, you have to enable it in your Next.js configuration because this is a preview. There will now be a period of how does this work with existing applications and, more importantly, existing libraries? For example, what does this mean for auth? Can you have pages that sit behind an auth layer, but can they still be partially pre-rendered if you're accessing cookies within it? Now, the example that they gave is very specifically like, yes, you can access your cookies and stuff inside the suspense boundary and still have the outer shell just have a static rendered version of that. But then again, how does this work with libraries that already do this? How does this play into these other structures? I think mostly the preview period is going to be less about is it ready to go out in production and more about how much stuff is it going to break if it goes out into production, right.
00:16:05 - Anthony Campolo
Yeah. Yeah. And I'm sure you working at an auth company, this is something that everyone's talking about and trying to figure out, so where's the Clerk team at with this?
00:16:16 - Dev Agrawal
Yeah, so we have been really early to adopt new Next.js features and offer them as soon as we can. As soon as server components were announced stable, we had a new package, we had a new Next.js integration. It wasn't a new integration, it was just additions to the existing integration where we now exported server components that can just read your cookies and headers as Next.js exposes them and build that entire auth tree and auth components on the server instead of relying on dynamic data fetching at all. It still relies on dynamic data fetching. It's just the way that server components offer it instead of regular components. Same thing with Edge. I think with this one, like I pointed out before, it's a matter of the way we currently set up the middleware, the Clerk provider, and the request for auth data. How does it work right now? How do we make sure that if someone only grabs the user ID or calls the auth or currentUser functions in the server components, it doesn't opt the entire page out of the static shell or static rendering?
00:17:37 - Dev Agrawal
Because if it does that, then partial pre-rendering will just look at it and ignore that page because there's no suspense boundary there. Again, there's no new APIs for this, which is something they emphasized quite heavily
00:17:52 - Anthony Campolo
in the announcement, that this doesn't break anything, we promise.
00:17:57 - Dev Agrawal
Yeah, they hit really hard on that. No new APIs, to the point that I was looking at whatever Angular is doing right now. They're trying to do this huge rebrand, and then there's like, oh wait, we already had one huge change in Angular. Are we going to get a third new framework? And then I commented, like, watch this be Angular's no-new-APIs moment. They're going to announce, oh no, this is the exact same framework. We're not doing anything new. We're just changing our name or changing colors or something.
00:18:35 - Anthony Campolo
It's an outfit change, right?
00:18:37 - Dev Agrawal
Exactly. Yeah, pretty much. That was my thoughts. That's what they tried to emphasize. Luckily, there won't be as much work that we have to do in terms of building new integrations or fixing bugs. It will actually be a lot more annoying version of how does this work, which will be that we'll test it and we think it works. Then over the next three months we'll have support tickets of, I enabled partial pre-rendering and this thing broke. And that's how we discover actually most of the bugs.
00:19:17 - Anthony Campolo
Word, word. I'd be curious.
00:19:19 - Dev Agrawal
Hopefully that's not the case.
00:19:22 - Anthony Campolo
I want to pivot a little bit. Were there any talks that were standout talks for you? It doesn't need to be necessarily the hottest, newest features, but just ones you really enjoyed.
00:19:35 - Dev Agrawal
So I didn't really get to watch the virtual...
00:19:38 - Anthony Campolo
Oh, that's right.
00:19:38 - Dev Agrawal
Yeah.
00:19:39 - Anthony Campolo
You said you didn't really watch any of them, right? I'm the same when I go to conferences. Yeah.
00:19:42 - Dev Agrawal
Yeah. So at the event itself I didn't watch... I watched most of the keynote. That was it. But after getting back home, I did watch all of the in-person talks.
00:19:54 - Anthony Campolo
Oh, great.
00:19:55 - Dev Agrawal
I tried some of the virtual talks, though, but there are just way too many of them, and I need one whole weekend just for that track.
00:20:03 - Anthony Campolo
So, of what you have watched, what are some things that came out?
00:20:08 - Dev Agrawal
So let me think. I think the keynote was like... Yeah, people clown on Vercel for trying to copy Apple or trying to build that kind of a brand. And like I always say, if you're...
00:20:23 - Anthony Campolo
gonna, if you're gonna rip off someone, rip off the best. It's like when bands rip off Radiohead. People say Coldplay and Muse were built entirely on ripping off Radiohead. And I'm like, good. If you're gonna rip off a band, rip off the best band in the world.
00:20:37 - Dev Agrawal
Yeah, that is true. Yeah. But I think it's there for a reason because, again, the keynote Guillermo gives, from start to finish, it's very nice. I guess I don't have the words to describe what I'm trying to say, but it's one of the better keynotes that I've seen at conferences. Let's go with that.
00:21:05 - Anthony Campolo
I think they do a great job with this kind of stuff. And I think, you know, it's a certain aesthetic that Apple has, which is honestly, if you go to keynotes at other tech companies, you're going to see the same aesthetic. So I think most people associate it with Apple because Apple probably did it first, and most people only really watch Apple keynotes. But I think the tech industry at large has kind of adopted this style of presenting things at conferences. So I think as long as they do it well, that's the important thing. And from what I've seen, they have a great production team. Guillermo is a great speaker. I've been listening to him do podcasts for the entire time I've been in tech. So I think it's cool. I think it's cool to see someone like Guillermo, who grew up in this whole open source world and was very scrappy when he started. You can see talks that are like 10 years old of him at Node conferences, and he's got this crazy hair, and he's on his computer, and it's super, super lo-fi.
00:22:05 - Anthony Campolo
But now he's got this whole epic production behind him, and I think that's awesome. I love seeing that.
00:22:12 - Dev Agrawal
Oh yeah. Oh yeah. Give me a second. Let me quickly tweet about this.
00:22:17 - Anthony Campolo
Oh yeah. Thank you, thank you. And thank you, everyone out here who is listening and watching. If anyone has questions for Dev or just about Next or wants to give some thoughts, feel free to raise your hand. This is an open mic. Always love getting people up here to talk about what they're interested in. And then I'm just kind of looking at the Next 14 announcement post, which includes kind of all the announcements at Next Conf. I see something here that is personally interesting to me. There's a new Next.js educational course called the Next.js Learn course. And it says here that it starts by teaching the App Router. So it's like, learn Next through the hottest and the best. Also excited we got Rishi up here as a speaker. What's up, Rishi? Do you have a question for Dev or thoughts on Next.js? I know you have been developing with Next for a while. You've built a lot of stuff on Next and Edgio, I believe. So what's up? Hello? Hello?
00:23:35 - Dev Agrawal
Hello?
00:23:35 - Anthony Campolo
Anybody out there?
00:23:38 - Dev Agrawal
Oh, that was you? Okay.
00:23:40 - Anthony Campolo
I'm not sure if... I mean, Rishi became a speaker. He might still be figuring out his mic setup or something.
00:23:47 - Dev Agrawal
But about Next.js Learn, yeah, I think it's definitely them answering the call to the community, I guess, when everyone is saying that it's getting too complex, things are getting too hard to learn. Here we go. Here's a free course. Here's our version of epicweb.dev so that we don't need Kent to... we can do it ourselves.
00:24:14 - Anthony Campolo
This is so frustrating to me. This is just the tutorial. Every framework should have a tutorial. Redwood had the tutorial. This should be table stakes. That's cool that they're answering the community's call, but at the same time, this should have already been here and should be constantly updated with the framework, and then you're never in this situation.
00:24:39 - Dev Agrawal
I mean, that's fair, but looking through it, I don't quite see a tutorial. I see... I definitely think this goes a step beyond the tutorial.
00:24:51 - Anthony Campolo
That's because people have low expectations of tutorials. This is what this should be. Everything they have should be the table stakes for a good Next.js tutorial. The tutorial should cover the whole framework.
00:25:04 - Dev Agrawal
Yeah, it's just such a big framework. But a whole section on search engine optimization, or explaining bundling, client and server rendering, CDNs... I guess that just is the problem space of Next.js now, so they have to talk about it.
00:25:26 - Anthony Campolo
Yeah. I'm looking at the main outline and SEO is not listed as one of the top-line features. That may be its own piece.
00:25:34 - Dev Agrawal
Wait, I think... am I at a different page?
00:25:38 - Anthony Campolo
It's just nextjs.org/learn. I don't see anything about SEO here.
00:25:42 - Dev Agrawal
Oh wait, I was at a different page.
00:25:48 - Anthony Campolo
Yeah. And let me share this for people. There's 16 lessons, basically starting from getting started, going through styling, optimizing fonts, images, creating your layouts, and then things like setting up the database, fetching data, streaming rendering. Looks like here the partial pre-rendering section is marked as optional, which is probably smart. And then mutations, error handling, I like that, improving accessibility, that's its own lesson right there, good on them for that, and then authentication, metadata, that might be the SEO section. Yeah. So the very last one is adding metadata, which is for SEO and shareability. Yeah. To me, this should not be seen as a crazy advanced tutorial. I think every framework should have a tutorial that covers every single thing. Redwood has since day one. So we've had that since 2020.
00:26:45 - Dev Agrawal
I think I was looking at something completely different. Give me a second. Let me try to find how I even got there.
00:26:54 - Anthony Campolo
Yeah. And just to reiterate for those watching, you go to nextjs.org/learn, a real nice URL. Oh, it looks like Rishi dropped back down to listener. Not sure if that's a weird X thing going on or what. Thanks everyone out there for listening. Oh, we got a message from Rishi. He said partial pre-rendering is the one thing that is so close to a new API release. Yeah, that's probably why they were like, it's optional. If you don't want to use it, you don't have to. That way you can't say we broke anything.
00:27:38 - Dev Agrawal
Comments. There we go.
00:27:41 - Anthony Campolo
Okay, here is the... I just shared it.
00:27:43 - Dev Agrawal
What I was looking at, the URL is learn/pages-router. But this, I don't know if it actually talks about Pages Router or App Router.
00:27:57 - Anthony Campolo
Let me take a look.
00:28:00 - Dev Agrawal
Because this has a lot more details. This is from the SEO stuff. It still looks like it's okay.
00:28:14 - Anthony Campolo
These are the original docs.
00:28:16 - Dev Agrawal
I think these are the original docs. Okay, so I've never seen these docs.
00:28:20 - Anthony Campolo
Yeah. So this is what they... I'm assuming, looking at this, they basically took this and then iterated on it to create what is now nextjs.org/learn. And also you notice there's different styling between the two. So this is kind of the older version, and they have a whole section on SEO here, it looks like. Whereas in the new one it's broken down into 16 lessons, and the 16th lesson is SEO. So it's actually a little bit de-emphasized compared to this. Looks like they spent a whole lot less time on Core Web Vitals, which makes a lot of sense to me because the framework as it's currently set up is a lot more set up for Core Web Vitals by default. You don't have to do as much hackery to get your Core Web Vitals to not suck so much. So that makes a lot of sense, to kind of de-emphasize that a bit. But I feel like the span of topics they cover and how they cover it makes a lot of sense. I think it has the right emphasis, starting with setting up your pages and your styling and your basic optimizations, and then adding on your backend, your data, that whole flow, and then finally authentication, and then accessibility and final metadata, for sure.
00:29:42 - Dev Agrawal
Yeah. I mean, I don't think I took a detailed look at exactly what the new course is. But from the standpoint of what are they trying to do with this, or maybe how this will be updated in the future to actually reflect what they initially planned, I guess it's that this is getting too hard to learn. Let's try to centralize as much as we can. Basically react.dev but more beginner-focused and Next.js-focused.
00:30:18 - Anthony Campolo
Yeah, makes a lot of sense.
00:30:19 - Dev Agrawal
This is what my expectation is.
00:30:23 - Anthony Campolo
We'll see.
00:30:23 - Dev Agrawal
If it happens, because right now they have this big momentum of, this is how you build stuff on the web.
00:30:32 - Anthony Campolo
Yeah, it's the framework. Yeah.
00:30:34 - Dev Agrawal
Yeah. And so having their own centralized learning resource would be really helpful here because then people are not being pointed to six-month-old videos that are already obsolete. Yeah, right.
00:30:51 - Anthony Campolo
Yep, yep, exactly. And that's why I think it is long overdue. But I will give them props for finally creating it. Rishi, are you here with us? Looks like no.
00:31:10 - Dev Agrawal
Yeah.
00:31:10 - Anthony Campolo
Oh no. He dropped back down to the listener. Okay, I'm not sure if this is a me Twitter bug or a him Twitter bug. We will figure it out. Oh wait, here we go. I would say, Rishi, if you can hear me, wait. Sometimes what helps is deleting...
00:31:28 - Dev Agrawal
Oh, there we go.
00:31:30 - Anthony Campolo
We got it.
00:31:32 - Rishi Raj Jain
Yeah. Awesome. So regarding partial rendering, right? Is that what it is?
00:31:39 - Anthony Campolo
Yeah. Hit me up with your thoughts.
00:31:41 - Rishi Raj Jain
I'm linking it directly to page partials in Astro, and I don't know why, but that seemed like Astro server components, if I would call it. But they're independent pages that you can render, and they don't need to be in HTML format, as I saw. Underneath they use HTMX, so you can do all of those fetch operations and change the state. That's what I closely related it with initially when it came up. But I think I need to learn this quickly so that I can release my new tutorial based on this.
00:32:18 - Anthony Campolo
I like that this is the HTMX killer. I feel like everyone's talking about HTMX right now all of a sudden.
00:32:27 - Rishi Raj Jain
And that's why I think the Astro community did this great page partials integration so quickly over HTML. Yeah. But yeah, I need to learn both frameworks quickly, man.
00:32:39 - Dev Agrawal
I feel like it's going to be practically impossible to build an HTMX killer because HTMX is the closest you'll get to doing JavaScript stuff without writing JavaScript.
00:32:52 - Anthony Campolo
Could you expand upon that? What makes HTMX so unique from any other JavaScript framework?
00:33:01 - Dev Agrawal
I think what makes HTMX so unique is that if you're writing in a different programming language, you don't need to now figure out how to integrate with JavaScript if you need a little bit of client interactivity.
00:33:19 - Anthony Campolo
That's the dream every JavaScript developer has ever wanted.
00:33:25 - Dev Agrawal
Pretty much. Yeah.
00:33:26 - Anthony Campolo
They're like, could you just give me something so I don't need to write JavaScript? That would be great. Could you solve that whole JavaScript problem for me?
00:33:35 - Dev Agrawal
Exactly. Yeah. But obviously it has its limits, and if you are going to build something that is going to cross those limits, you have to drop down to JavaScript. But HTMX basically extends your capabilities in your own programming language. That's kind of how I look at it.
00:33:53 - Anthony Campolo
Interesting. Is that your take on it as well, Rishi?
00:33:58 - Rishi Raj Jain
Yeah, I've not been so deep into HTMX, but it does look like it can take care of my JavaScript without me writing JavaScript. So yeah.
00:34:10 - Dev Agrawal
Yeah, basically it's literally the only thing, or the best thing, that HTMX does, kind of, is allow you to do more without writing JavaScript and still be in your programming language. So if you're already writing JavaScript on the server, then it doesn't quite make sense to me to use HTMX because then you're going to send a client runtime anyways. Just use Solid.
00:34:47 - Anthony Campolo
Very cool. Rishi, did you have other thoughts, or did you watch the conference at all? I should ask first off.
00:34:53 - Dev Agrawal
Oh, and quickly before that, I guess to your question...
00:34:56 - Anthony Campolo
Yeah, go ahead.
00:34:57 - Dev Agrawal
I don't know much about... I don't know anything about Astro partial pages, so I don't have an answer. I just wanted to say that.
00:35:08 - Rishi Raj Jain
So yeah, I'm just learning, and I didn't have the time to watch the conference, Anthony, right now. But yeah, I'm reading through their docs, and this specifically is sort of hard to digest in terms of the technicalities involved in this one. So yeah. But the good thing that I found here is server actions, and I saw people doing cool things with server actions. They were able to return buttons through server actions after clicking on client-side buttons and stuff like that. So yeah, I've been...
00:35:41 - Anthony Campolo
Yeah, let's...
00:35:42 - Rishi Raj Jain
And I wrote a tutorial based on that as well.
00:35:44 - Anthony Campolo
Yeah, go ahead. You can go ahead and share that tutorial in the chat. I'll go ahead and pin it. But yeah, let's pivot to server actions as a topic. To me this seems like the big headline feature. Building up to the conference, I saw a lot of people talking about server actions. And to me, this is like, in the GraphQL world, you have queries and mutations. So you'll throw a query to get data, you'll throw a mutation to create, update, or delete data. So are server actions the mutations? Is this what gets us to this GraphQL panacea without GraphQL that we've always wanted?
00:36:29 - Rishi Raj Jain
No.
00:36:30 - Anthony Campolo
Why no? Because it doesn't do that? Because it doesn't do it well enough?
00:36:36 - Dev Agrawal
Remember when I was talking about HTMX? I said that I think this is a nice way that I found to look at tools: how much do they extend your capabilities without you having to jump into a more advanced tool like GraphQL?
00:36:55 - Anthony Campolo
That feels simple, not advanced, but go ahead.
00:37:00 - Dev Agrawal
Fair. Yeah. The way I think about GraphQL is that it is an advanced tool that we are trying to simplify for people, that frameworks like Redwood are doing a great job of wrapping it with a lot of simplicity so that there isn't a huge learning curve, and you have access to this very advanced tool that can do a lot of crazy stuff if you wanted to. Actions, on the other hand, simplify a lot of stuff and enable new capabilities, but in terms of how they compare to GraphQL, they are never going to get into how granularly you can change something in GraphQL or have this unified schema.
00:37:52 - Anthony Campolo
So you can't... So you can't mutate any field.
00:37:58 - Dev Agrawal
No, you don't mutate a field. What you do with actions is invalidate a cache, and that cache can either be an entire page or it can be a fetch data cache. So if you made a fetch call on the server...
00:38:12 - Anthony Campolo
Hold on, hold on. This has nothing to do with mutating data in a database?
00:38:18 - Dev Agrawal
So actions will be used for mutating data in a database, but that's not all they're being used for. GraphQL also had... or a lot of GraphQL tools also have this cache layer where obviously you don't have to refresh a page if you mutate the data. The GraphQL server already knows that these queries are depending on this data, and these queries need to update or be invalidated, right? That's kind of one of the abilities that GraphQL gives you. Because it understands what queries depend on what data, it can automatically invalidate all the queries that need to be invalidated. With server actions, you have to kind of do that yourself, and the finest level that you'll get to is either a fetch data call or a whole page or a whole route. Then the entire route will get rendered on the server, it will fetch all the data that it needs, and it'll render the UI on the client.
00:39:22 - Anthony Campolo
Okay, that makes sense. You're talking about they're not just giving you the ability to mess with your database, they're giving you this higher-level caching ability. Because people are, as I did in the very beginning, comparing this to GraphQL, they want to make sure they have those higher-level caching features as well.
00:39:40 - Dev Agrawal
Yeah, cool.
00:39:43 - Anthony Campolo
Yeah, that makes a lot of sense. Yeah.
00:39:47 - Dev Agrawal
Then the advanced stuff is that, on top of that, because they try to build on top of web standards, or they are built on top of web standards, you can also use actions to have progressively enhanced forms. When the HTML is being rendered, when you inject an action into a form, it'll basically turn into a URL that the browser can itself send a POST request to. But then as soon as it's hydrated, it turns into a regular preventDefault flow and does it on the client side, like through JavaScript. That's the other capability that it provides. Then obviously, because it's built into React, it can also act as the server dollar sign of Qwik and Solid. This is what I posted in a tweet, if I can find it, which is basically that I had a server component where I defined a server action. I passed it as a prop to a client component, and the client component just receives a function as a prop which it can call. Behind the scenes, it's going to make an API request because it's just an asynchronous function on the client.
00:41:09 - Dev Agrawal
You can put it in a useMutation if you want, or you can just use the built-in useOptimistic hook that React now provides, and you can get loading states, you can get optimistic UI, you can get validation or UI feedback and all of that stuff. So it's kind of this... I don't want to say silver bullet because that has kind of a negative connotation, but in some senses it's kind of a silver-bullet solution to do both progressively enhanced mutations or fully interactive mutations, and invalidation on the server along with, obviously, mutations.
00:41:48 - Anthony Campolo
Yeah. I always quote my buddy Snailpie, who says the problem with silver bullets is they only work on werewolf-shaped problems. So have a silver bullet, but you have a whole lot of problems it's not going to work on.
00:42:02 - Dev Agrawal
Yes. And this is one of the solutions where the longer I watch Ryan Carniato, the more I understand his philosophy behind composition, the more I'm also starting to look at the world this way. I know that if this was in the hands of someone like Ryan Carniato, it would never be designed this way. But I guess also because he has his own designs for how this stuff should look. But that's kind of the idea, that yes, it's a really nice tool, but it's also one thing doing a lot of other things behind the scenes. And at some point there will be an abstraction leak somewhere. Maybe it's already here and we're a little blind to it because not enough people are using it. And then at some point it'll show up. It's like useEffect.
00:42:55 - Anthony Campolo
Yeah, definitely. You can assume that this is not what Ryan Carniato would have built because if that was the case, SolidStart and Next.js would be an identical framework.
00:43:08 - Dev Agrawal
Exactly.
00:43:09 - Anthony Campolo
Awesome. We have about 15 minutes left here. I'm going to have to hop at the hour. I want to open it up. If anyone wants to join and ask questions, you are welcome to. Otherwise, I want to open it up to both Dev and Rishi. Is there anything that you want to talk about in terms of the conference or Next or anything that's on your mind that has nothing to do with either?
00:43:31 - Dev Agrawal
I mean, there is a fourth announcement about TurboPack, which there wasn't really much there. But let's...
00:43:36 - Anthony Campolo
Let's hit TurboPack and then we'll go to Rishi. I think he had a thing. But let's start with TurboPack. I know that was the high-level thing mentioned in the blog post, and it was basically it's faster, which everyone likes to hear.
00:43:51 - Dev Agrawal
I'm going to summarize the key announcement about TurboPack. Guillermo got up and said, last year we talked about switching everything to Rust to make everything faster. This year we are announcing that we are still doing that.
00:44:10 - Anthony Campolo
We said it was going to be fast then. It wasn't. But now we're saying again it's going to be fast.
00:44:16 - Dev Agrawal
No, it's still fast. Like, if you switch to...
00:44:18 - Anthony Campolo
Why does it need to be faster? It was faster already.
00:44:23 - Dev Agrawal
It's not stable enough. Again, once you switch stuff to Rust, it's fast. But...
00:44:28 - Anthony Campolo
But then the headline feature should be it's stable now, not it's even faster.
00:44:35 - Dev Agrawal
No, it's not even that. The headline announcement is that it is faster.
00:44:43 - Anthony Campolo
Let me read you the headline announcement. 53% faster local server startup, 94% faster code updates with Fast Refresh. I will say, it does say before that, it says 5,000 tests passing. That doesn't mean anything. What if it's 5,000 out of 50,000?
00:45:04 - Dev Agrawal
Right. I think they also have Are We Turbo Yet, where they show how many tests are failing.
00:45:09 - Anthony Campolo
Yeah, SWC has been broken from the start. Still broken today?
00:45:15 - Rishi Raj Jain
Yeah, it's still in progress, I feel. And that 5,000 or 50,000 is a correct argument. But they're covering tests, and it's just sort of an announcement that you can probably expect...
00:45:28 - Dev Agrawal
And it's just... I think there's a number, but you...
00:45:31 - Rishi Raj Jain
can expect that to be...
00:45:32 - Anthony Campolo
Go ahead, Rishi.
00:45:34 - Rishi Raj Jain
Yeah. Can you hear me fine?
00:45:37 - Dev Agrawal
Yeah, I can hear you.
00:45:38 - Rishi Raj Jain
Awesome. So yeah, I think the idea of saying that TurboPack is going to be stable, but yeah, that's a work in progress that they've shared, I believe.
00:45:51 - Anthony Campolo
I mean hopefully it's going to be stable still. That's not an announcement. Everyone expects their tool to be stable one day, right?
00:45:59 - Rishi Raj Jain
Yeah, that's for sure.
00:46:01 - Dev Agrawal
The other thing is that there are probably some announcements in that release post that are just about Next 14 as it is right now without TurboPack. There's still some performance improvements. So there's going to be performance improvements on the current build while the work on TurboPack is going on in the background. So those are, I guess, some of those benchmarks. I'm not fully sure, I don't remember exactly. But some of them are probably just that we have improved the performance on the current thing. Then the 5,000 tests pass, that's how close we are to TurboPack. And they even built areweturboyet.com, where you can go and see how many tests are failing and basically how much work there is still to be done for the TurboPack integration.
00:46:58 - Anthony Campolo
Awesome.
00:46:59 - Dev Agrawal
Cool.
00:47:00 - Anthony Campolo
Rishi, did you have thoughts on the conference?
00:47:03 - Rishi Raj Jain
Yeah, I had thoughts on server actions. It does look like you say use server and you can put your server-side code in it. But I tried using SDKs inside of that. That sort of fails, I believe, and that's happening with use client components, and that's where it got stuck for me. So the tutorial that I've shared uses the Resend API for sending emails, but I had to use a fetch call to send that email instead of using the Resend SDK. So that didn't work in server actions. So I believe there are still some gotchas to server actions internally creating those API routes behind the scenes and stuff...
00:47:48 - Dev Agrawal
Function... Are you defining that in a client component file or in a server component file?
00:47:53 - Rishi Raj Jain
No, that was solely... By default it's use server, I believe, like a server component. So it was that. I didn't specify the use client handler. So okay, yeah, I'm just sending a form with an action to create a submission. So yeah, I've shared the thread on this particular Space, so it should be there. But yeah, I had to make use of fetch instead of SDKs to do that. And probably there was a tweet I saw about SQL specifically where it can lead to SQL injection. Is that correct? That's something I've been wondering because I...
00:48:29 - Dev Agrawal
No, that was completely different. It was just a demo that Sam created...
00:48:39 - Anthony Campolo
If you set up your database to be totally open and you can throw any SQL you want into it, then of course you can SQL-inject it. Hopefully no one builds their website like that.
00:48:51 - Rishi Raj Jain
All right, I see.
00:48:53 - Dev Agrawal
Yeah. And the default library that he was using does not do that. Like, that tagged template literally will be sanitized before it's passed to the database.
00:49:05 - Rishi Raj Jain
All right. I'm no SQL expert and I just use Upstash. So yeah, no SQL.
00:49:10 - Dev Agrawal
Basically, I'm now realizing that I used a little too many fancy words there. It's basically... Before that SQL string there was a sql keyword or a function being called, and basically you're passing that string into that function. It's like using an ORM where it's going to make sure that there's nothing wrong.
00:49:39 - Anthony Campolo
You're not sending a raw SQL command, you're sending an interpolated one.
00:49:46 - Dev Agrawal
At least one that's sanitized, where the variables have been taken out and being sent separately.
00:49:53 - Anthony Campolo
Interesting.
00:49:55 - Dev Agrawal
A lot of database engines, you just put $1, $2 in your SQL query, in your SQL statement, and then you send the parameters separately. I don't mean in a separate request, but in a separate argument. You have a collection of the values that are supposed to go into the SQL query, and the database itself will make sure that it's handled correctly. You don't even have to do too much work on your own ORM side these days to handle that.
00:50:32 - Anthony Campolo
This is JavaScript Jam, not Database Jam, so I am not the biggest database expert here. But I'm going to go back to what Rishi was saying about the third-party libraries. I think this is what's always going to be the gotchas with frameworks and new features. They can say this works in our framework. They can even say this is production-ready, and that will be correct in the sense that it will work. But once you... The thing that makes software complex, especially the type of software web developers write, is all of the dependencies, all the extra things we bring in. But it's also... This is tough for the Next team, because it's impossible, literally impossible, for them to say we work with 100% of dependencies. You will never get there. So that can't be the goal. The goal has to be we work with enough dependencies that we can say this works with all of your extra crap. So email integration, that seems pretty important to me. But at the same time, they can't go out and test every single email integration. So I guess, Rishi, when you hit a problem like that, what do you do?
00:51:43 - Anthony Campolo
Do you complain on Twitter? Do you open an issue or do you just go on with your life?
00:51:48 - Rishi Raj Jain
No, I create a tutorial on how not to use the Resend SDK and rather use the Fetch API to make that call. That does push me for better development because now I can deploy on the edge and rely on Edge Functions to take...
00:52:02 - Anthony Campolo
I love that answer. You don't complain, you don't open an issue. You solve the problem yourself with the lower-level API.
00:52:11 - Rishi Raj Jain
I think my experience as a solutions engineer has taught me that a lot.
00:52:15 - Anthony Campolo
That's dope. That's very cool. All right, cool. This has been an awesome episode. Thank you, Dev and Rishi, for joining. Do you want to both give your socials and how people can get in touch with you? For everyone out in the audience, please hit that face and follow.
00:52:37 - Rishi Raj Jain
Appreciate that, Anthony.
00:52:39 - Anthony Campolo
Yeah, you can go first, Rishi, and then Dev. So just how people can get in touch with you or what stuff they should check out from you.
00:52:49 - Rishi Raj Jain
All right. So yeah, hey, I'm Rishi, and you can get in touch with me on Twitter. RishiRaj underscore would be my handle. I mostly tweet about web development, specifically, again, Next.js is the framework, Astro, though I'm biased to Astro. So yeah, just go ahead and hit me up for any queries and any kind of work that you'd like for me to do for you, and spin up tutorials, because that's what I've been enjoying doing lately.
00:53:16 - Anthony Campolo
I love it. I love tutorials. Everyone should build tutorials. All web developers should build tutorials. Dev.
00:53:24 - Dev Agrawal
Yeah, I tweet about web dev as well. I also sometimes make YouTube videos. Haven't made one in a while, but hoping to get back on the grind there. Obviously, on my Twitter profile there's a link to my YouTube channel there. And if you're in this space, you probably like Next.js, and if you like Next.js, you're gonna like Clerk a lot because it's basically the auth solution that takes as much advantage of Next.js as possible and really tightly integrates with all the niceties that Next.js has to offer.
00:54:03 - Anthony Campolo
Yeah, that's one of the great things about being the framework, is that every tool out there, the first example they build is with the framework, which is Next. So I see this happen a lot. And this goes back to, does your third-party thing work with this? If that third party specifically said we need to work with frameworks, the first framework we need to work with is probably going to be Next. So that's an advantage that I feel like is rarely brought up but is very, very real. Having worked at many places that build many integrations, you're always, always going to start with Next.
00:54:45 - Dev Agrawal
Yep, pretty much it. Thanks for having me. This was great.
00:54:50 - Anthony Campolo
Yeah, thank you for joining, and thank you everyone out there for listening. We will catch you on the next one.