Join 9200+ subscribers reading by weekly personalized Newsletter that helps developers level up their skills through weekly Frontend and Leadership Snacks. You get a deep dive into a Tech topic, Actionable tips to excel in your career and a toolbox!
πΏ Partial Pre-rendering Deep Dive
|
Hey friend, A few weeks ago I hosted a workshop on Next.js and the workshop was a hit. Towards the end of the workshop, this is all I could hear, " loved this " " learned so much " " increase the price " " create one more " " create a community so we can be your cheerleaders " π₯Ήπ₯Ήπ₯Ή I also loved connecting with so many of you and teaching live. After a lot of us went remote, it felt like I'm creating content in the void but this workshop makes it very real. More importantly, I had fun and you had fun. Waitlist for Upcoming Next.js Course π₯I'm working on a self-paced Next.js course π€«.Now, If you sign up to the workshop, you get access to the course for free which is what I'd recommend π. I'll be selling the course in Early access which means you'll get access to the course modules as they become available and you will get hefty discounts until it's fully created. I'd highly recommend you to sign up to the waitlist if you want to level up your Next.js skills. >>>> Click here β to add yourself to the waitlist. πΏ Our Weekly Snack: Partial Pre-renderingUp until now, we knew about Static and Dynamic Rendering. Just a quick refresher, Static Rendering means your page is fully static for example, a blog. Dynamic Rendering means you have dynamic parts to your page i.e. interactivity, for example, users can upvote your blog post, add comments etc. So What is Partial Pre-rendering? (PPR)PPR is a method of getting the best of both worlds - Static as well as Dynamic rendering. In static, we want to download all the blogging data in advance since all our content is static i.e. doesn't change. In Dynamic, let's say that same site has ability to upvote the blog post as well as add comments which makes it dynamic. However, majority of the apps require a mix of the two just like the blogging app we discussed. β οΈ Most routes are not fully static or dynamic. That's where PPR comes in play. In PPR, the static parts of the page are cached already so will come from the CDN known as the shell leading to a faster page load. Then, the dynamic parts will asynchronously get downloaded once the server is ready with the data. π¨ Please note that PPR is truly an experimental technology that is not yet recommended for production use.
How does that work?Well, PPR uses React suspense βοΈ to defer rendering dynamic parts of the app. The shell leaves holes for dynamic content where we can add a Loading Suspense Boundary so user sees a skeleton loading state. π€ What is a Suspense Boundary? The async parts are streamed in parallel. How to enable PPR?π€« Latest Frontend News
Bundlephobia helps you find the performance impact of npm packages, check it out here β. βShadCN UI Library now has Charts π - you can copy paste blocks of code directly in your apps. This is huge! What!! A framework-agnostic tool that converts any layout into a drag-to-swap one with just a few lines of code? Here is the landing page ββ Want Type safe Server Actions in your Next.js (App Router) project? next-safe-action β handles your Next.js app mutations type safety, input validation, server errors and even more! Is it time for Next.ts? There is now support for next.config.ts file in Next.js 15 RC. This file earlier was next.config.mjs. Check the tweet visual here ββ
π Weekly Youtube VideosCheck it out and subscribe to my channel βοΈ for more Frontend, Leadership and Career Development content. What do you think of today's Newsletter? Simply click on one of the links below. |
Ankita Kulkarni
Join 9200+ subscribers reading by weekly personalized Newsletter that helps developers level up their skills through weekly Frontend and Leadership Snacks. You get a deep dive into a Tech topic, Actionable tips to excel in your career and a toolbox!
Hey Reader, There are thousands of you going through Modern Full Stack Next.js Course so wanted to be grateful here for your support. Just as a thank you, there is something big dropping for you. It will only last 24 hours β° so keep an eye out for my email next week. Let's dive in! PRESENTED BY CLERK Instead of your coding agent guessing how auth works, you can now install specialized Clerk knowledge directly into it. Introducing Clerk Skills One simple command $ npx skills add clerk/skills...
Hey Reader, This week, we're putting your Next.js app under the microscope, what's slowing it down? This along with the latest news, can AI really debug complex React/Next.js bugs? How OpenClaw and Anthropic are enabling AI collaboration, 3 New Coding Models dropped and more. Let's dive in! πΏ Our Weekly Snack: What's Really Slowing Down Your Next.js App? Have you ever wondered why your Next.js app feels sluggish or takes forever to load? π The new experimental Bundle Analyzer in Next.js 16.1...
Hey Reader, A lot of you have been asking me how Iβm able to stay so productive and get a lot of work done so I finally broke down my exact workflow and setup in a short video. πΏ Our Weekly Snack: Run Multi Agents stress free with Claude Code Git work trees let you check out multiple branches at the same time each in its own folder all backed by the same repo. Instead of one working directory and constant branch switching, you get parallel workspaces. Each work tree has its own isolated...