๐Ÿฟ 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-rendering

Up 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? lets you display a fallback until its children have finished loading.

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 Videos

Check it out and subscribe to my channel โ†—๏ธ for more Frontend, Leadership and Career Development content.

Build and Deploy a Full Stack AI Todoist Clone: Next.js, Convex & TypeScript

video previewโ€‹

How does React Compiler ACTUALLY work?

โ€‹

video previewโ€‹

What do you think of today's Newsletter? Simply click on one of the links below.

โ€‹๐Ÿ”ฅ ๐Ÿ˜ ๐Ÿ‘Žโ€‹

Ankita Kulkarni

Join 6000+ 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!

Read more from Ankita Kulkarni
AI coding assistant for large codebases

Hey Reader, Having an AI Code Editor is mandatory in today's world. Last weekend, I was talking to a friend who's a Staff DevOps Lead at a Tech firm. He hadn't tried any of the AI Code Editors yet and said he was hesitantโ€”mostly because he thought editors wouldn't know the Context of his codebase as he does and also they can't keep up with his brain ๐Ÿง , he joked. So, very confidently, I showed him Cursor AI. And to my surprise, Cursor really sucked at remembering context. Plus, it took Cursor...

shipped my first SaaS

Hey Reader, A couple years ago, I made a bold move. I left my corporate 9-to-5 to become a Tech Educator. Starting from scratch was challenging, I had limited social proof and only had testimonials from my past colleagues. Existing social proof tools were charging $75/month ($900/year!) and were overly complex plus they stopped improving the product. Thatโ€™s when I decided to build my own solution and Ship my First SaaS called as ProofyBubble. ๐Ÿฉต ProofyBubble shows real-time visitor and...

Hey Reader, I have some exciting news ๐Ÿฅณ. I have been working hard on launching the Modern Full Stack Next.js Course โ†—๏ธ. It's a course that teaches you to build and deploy modern full stack Next.js Production-ready apps. It is coming along well and I am taking the extra time to perfect it. Itโ€™s set to launch in April, and I canโ€™t wait for yโ€™all to check it out! I plan to share extra bonuses ๐ŸŽ and nuggets for folks on the waitlist so click this magic link to join the waitlist โ†—๏ธ. Weekly Snack:...