Video Summary

Summary reading time: 4 minutes

☀️ Quick Takes

Is Clickbait?

1-Sentence-Summary

Favorite Quote from the Author

you can now adopt partial pre-rendering incrementally

💨 tl;dr

Next.js 15 is out with major updates: React 19 RC support, revamped caching, dynamic endpoints, partial pre-rendering, and better error messages. Vercel also introduced a new firewall, AI integrations, and performance boosts for serverless environments.

💡 Key Ideas

• Vercel Ship event introduced Next.js 15, their own firewall, AI integrations, and enhanced feature flags for security.
• Next.js 15 RC supports React 19 RC, offering new client/server features and better error messages.
• Next.js 15 overhauls caching, removing defaults for fetch/pages and requiring explicit caching.
• Dynamic endpoints are now correctly handled in Next.js, aligning with web fetch API behavior.
• Partial pre-rendering improves speed and is incrementally adoptable for specific routes.
• 'Wait until' and 'Next after' introduced for post-response tasks without blocking user response times.
• Create Next App revamped for better UX.
• New template in Next.js 15 is cleaner; Turbo pack can be enabled during setup but isn't production-ready.
• Vercel caches V8-generated bytecode, reducing cold starts and enhancing serverless performance.
• Next.js 15 includes performance improvements for the Pages Router, ensuring ongoing support and enhancements for developers.

🎓 Lessons Learnt

• Don't rely solely on Cloudflare for web security - Using only Cloudflare as a CDN can cause caching issues; Vercel's new firewall feature offers a more integrated solution.
• Feature flags should be server-side - Handling feature flags on the server prevents clients from accessing and manipulating feature states, thus enhancing security.
• Use the correct React version in your package.json - With Next.js 15, App Router will not ignore your specified React version.
• Opt for React 19 for new features and better performance - React 19 RC includes new features for both client and server, making it the recommended version to use.
• Simplify React compiler setup - The React compiler can now be easily adopted with minor config changes, leading to faster performance without significant code adjustments.
• Install eslint rules for optimized code - Using eslint rules helps ensure your React code can be optimized effectively.
• Utilize annotation mode for component optimization - Use the 'Ed memo' directive to control which components React should optimize.
• Benefit from improved hydration error messages - Next.js now provides more useful error messages for hydration issues, showing actual diffs between client and server.
• Leverage better caching defaults - Next.js has overhauled caching to remove confusing default behaviors, making it easier to understand and manage caching.
• Dynamic endpoints should be dynamic - If you're exposing a GET endpoint, it should return dynamic data, not static data set during build time.
• Be explicit about caching - Always explicitly set caching behavior for fetch requests and routes to avoid unexpected data being served from the cache.
• Client router cache should not cache by default - Pages and components should not be cached by default to ensure users always get the latest information upon navigation.
• Set default stale time to zero for pages - Setting the default stale time to zero for pages ensures navigations always retrieve the latest data, enhancing user experience.
• Loading files should have a default cache time - Loading files should remain cached for five minutes or until the stale time configuration is met to balance performance and data freshness.
• Partial pre-rendering avoids latency issues - Implement partial pre-rendering to avoid the latency issues associated with waiting for a Node.js instance to spin up, providing a smoother user experience.
• Adopting partial pre-rendering incrementally improves performance - Instead of applying PPR to all routes, selectively use it on routes like homepages or blogs for better caching and faster load times.
• Using 'unstable_after' enhances post-response tasks - Implement 'unstable_after' to handle tasks like logging and analytics after the main response is sent, without delaying the user’s experience.
• Serverless environments need efficient post-response handling - Avoid using serverless environments that kill instances immediately after responses; use techniques like streaming or wait-until features for post-response tasks.
• New 'create next app' template is user-friendly - The updated 'create next app' template is more intuitive and visually appealing, improving the developer experience.
• Keep starter templates minimal - Avoid excessive text in getting started templates to make them cleaner and less overwhelming for new users.
• Include optional features in setup - Allow optional features like Turbo Pack to be enabled during the setup process for easier adoption.
• Avoid premature reliance on new tech - Be cautious about using new technologies like Turbo Pack for production builds until they are fully stable and reliable.
• Bundle external packages for better performance - Bundling external packages can improve app performance, and Next.js provides options to manage this for both app and pages routers.
• Optimize cold starts with Vercel's byte code caching - Vercel caches the byte code generated by V8, improving cold start times and response times in serverless environments.
• Expect continuous improvements in serverless infrastructure - Vercel is pushing the boundaries of serverless performance, likely prompting platforms like Lambda to follow suit.
• Page router performance can still improve - Even older technologies like the Pages router in Next.js are receiving performance optimizations, ensuring they remain viable and supported.

🌚 Conclusion

Next.js 15 brings significant improvements in performance, security, and developer experience. Key takeaways: use React 19, be explicit with caching, leverage partial pre-rendering, and adopt new features incrementally. Vercel's updates make serverless faster and more secure.

In-Depth

All Key Ideas

Vercel Ship Event Highlights

• Vercel Ship event covered several topics including Next.js 15, firewalls, AI, and feature flags.
• Vercel announced their own firewall solution to address issues with Cloudflare's caching.
• Vercel is integrating feature flags more deeply into their platform to increase security and prevent client-side manipulation.
• Next.js 15 is in release candidate (RC) status, pending the official release of React 19.

Next.js and React Updates

• App router in Next.js uses React Canary channels, ignoring specified React versions in package.json
• Next.js 15 RC supports React 19 RC, including new client and server features
• React 19 introduces a compiler, simplifying setup and improving performance
• Hydration errors now provide more detailed and useful error messages
• Caching behavior in Next.js has been overhauled, removing default caching for fetch and pages

Next.js Update Highlights

• In the old version of Next.js, a route.TS file would generate a static JSON file that never updated, even for dynamic endpoints
• The new update fixes this, making dynamic endpoints behave correctly
• Fetch is no longer cached by default, aligning with the web fetch API
• Explicit caching is now required, improving clarity
• Client router Cache no longer caches Pages components by default, fixing unexpected behavior
• Default stale time for Pages is now zero, ensuring up-to-date navigation data
• Loading files remain cached for 5 minutes or until stale time is hit
• Backwards and forwards navigation will restore from the cache, but revisiting a page will bust the cache
• Partial pre-rendering has been advocated for better performance, addressing delays caused by waiting for a Node.js instance to spin up

Partial Pre-rendering and Next.js Updates

• Partial pre-rendering aims to improve speed by caching static pages or shells
• Initial adoption of partial pre-rendering was problematic due to setup issues
• Incremental adoption of partial pre-rendering is now possible, allowing specific routes to be cached
• The goal is to eventually enable partial pre-rendering for all routes
• Traditional server environments like Lambda kill instances after sending responses, limiting post-response actions
• Next.js introduces 'wait until' to delay instance termination until additional work is done
• 'Next after' allows post-response tasks without blocking user response times
• Create Next App has been overhauled for a better user experience

Next.js 15 Updates

• New template in Next.js 15 is significantly cleaner and more minimal
• Turbo pack can now be enabled during setup, making development easier
• Turbo pack is still not ready for production builds
• Progress on Turbo pack is slow, but it's getting closer to being the default
• External packages can now be bundled more efficiently for better performance

Vercel and Next.js Performance Enhancements

• Vercel is caching the bytecode that V8 generates from JavaScript, enhancing server performance.
• This caching reduces cold starts and improves response times in serverless environments, especially on Vercel.
• Vercel's approach is faster than Lambda and could influence Lambda to adopt similar methods.
• Next.js 15 includes a performance improvement for the Pages Router, benefiting server rendering.
• Pages Router developers can be assured of continued support and performance enhancements.

All Lessons Learnt

Web Development Best Practices

• Don't rely solely on Cloudflare for web security - Using only Cloudflare as a CDN can cause caching issues; Vercel's new firewall feature offers a more integrated solution.
• Feature flags should be server-side - Handling feature flags on the server prevents clients from accessing and manipulating feature states, thus enhancing security.
• React version dependencies can delay releases - Next.js 15 is waiting for React 19 to become an official release, showing how dependencies can block progress.

Next.js 15 and React 19 Best Practices

• Use the correct React version in your package.json: With Next.js 15, App Router will not ignore your specified React version.
• Opt for React 19 for new features and better performance: React 19 RC includes new features for both client and server, making it the recommended version to use.
• Simplify React compiler setup: The React compiler can now be easily adopted with minor config changes, leading to faster performance without significant code adjustments.
• Install eslint rules for optimized code: Using eslint rules helps ensure your React code can be optimized effectively.
• Utilize annotation mode for component optimization: Use the 'Ed memo' directive to control which components React should optimize.
• Benefit from improved hydration error messages: Next.js now provides more useful error messages for hydration issues, showing actual diffs between client and server.
• Leverage better caching defaults: Next.js has overhauled caching to remove confusing default behaviors, making it easier to understand and manage caching.

Best Practices for Dynamic Endpoints and Caching

• Dynamic endpoints should be dynamic: If you're exposing a GET endpoint, it should return dynamic data, not static data set during build time.
• Be explicit about caching: Always explicitly set caching behavior for fetch requests and routes to avoid unexpected data being served from the cache.
• Client router cache should not cache by default: Pages and components should not be cached by default to ensure users always get the latest information upon navigation.
• Set default stale time to zero for pages: Setting the default stale time to zero for pages ensures navigations always retrieve the latest data, enhancing user experience.
• Loading files should have a default cache time: Loading files should remain cached for five minutes or until the stale time configuration is met to balance performance and data freshness.
• Partial pre-rendering avoids latency issues: Implement partial pre-rendering to avoid the latency issues associated with waiting for a Node.js instance to spin up, providing a smoother user experience.

Performance and Development Tips

• Adopting partial pre-rendering incrementally improves performance: Instead of applying PPR to all routes, selectively use it on routes like homepages or blogs for better caching and faster load times.
• Using 'unstable_after' enhances post-response tasks: Implement 'unstable_after' to handle tasks like logging and analytics after the main response is sent, without delaying the user’s experience.
• Serverless environments need efficient post-response handling: Avoid using serverless environments that kill instances immediately after responses; use techniques like streaming or wait-until features for post-response tasks.
• New 'create next app' template is user-friendly: The updated 'create next app' template is more intuitive and visually appealing, improving the developer experience.

Best Practices for Next.js Setup

• Keep starter templates minimal: Avoid excessive text in getting started templates to make them cleaner and less overwhelming for new users.
• Include optional features in setup: Allow optional features like Turbo Pack to be enabled during the setup process for easier adoption.
• Avoid premature reliance on new tech: Be cautious about using new technologies like Turbo Pack for production builds until they are fully stable and reliable.
• Bundle external packages for better performance: Bundling external packages can improve app performance, and Next.js provides options to manage this for both app and pages routers.

Serverless Performance Improvements

• Optimize cold starts with Vercel's byte code caching: Vercel caches the byte code generated by V8, improving cold start times and response times in serverless environments.
• Expect continuous improvements in serverless infrastructure: Vercel is pushing the boundaries of serverless performance, likely prompting platforms like Lambda to follow suit.
• Page router performance can still improve: Even older technologies like the Pages router in Next.js are receiving performance optimizations, ensuring they remain viable and supported.