Next.js - ReactPlayIO.pptx
- 1. @ReactPlayIO Amazing Features & Performance
- 2. Tech Lead, Naukri.com Divyansh Gupta Hi. Where to find me; @iamdivyansh Divyansh.2392@gmail.com
- 3. Before we start NEXT....
- 4. Vision of React & Its Shortcomings...
- 5. React , alone takes time...
- 6. Next.js comes to rescue....
- 7. Next.js , reducing initial load time ..
- 8. Next.js - SSR+SEOSupport No State No UseEffect Server Rendered SEO Friendly
- 9. Network payload is still huge PROBLEM #1
- 10. Dual Rendering context provide mental overload PROBLEM #2
- 11. EMBODIES REACT'S VISION FOR THE FUTURE
- 12. Next.js - Is it the new Standard ?
- 13. Next 12 Six Months Ago, Pre-rendering strategies - SSG, ISR, SSR Next 13.0.1 App Router Beta Improved Error Reporting Server Components Layouts and Pages Next 13.4 App Router ( Stable ) Simplified Data Fetching Server Actions ( Alpha )
- 14. • Layouts: • A layout is UI that is shared between multiple pages. • Layout is on the top hierarchy of the component tree which wraps any page or any child segments. • Pages: • A page is a UI unique to a route segment. • A page.js file is required to make a route segment publicly accessible. • Pages are Server Components by default but can be set to a Client Component. - Features - Best Practices - Performance
- 15. App Router ( Stable with Next.js 13.4 ) - Buit on top of React Server Components • Shared Layouts and Nested Layouts • Nested routes • Streaming and Loading UI • Error handling at any level • Dynamic intercept Route handlers • Not Found UI
- 16. Component Hierarchy • Layouts: • A layout is UI that is shared between multiple pages. • Layout is on the top hierarchy of the component tree which wraps any page or any child segments. • Pages: • A page is a UI unique to a route segment. • A page.js file is required to make a route segment publicly accessible. • Pages are Server Components by default but can be set to a Client Component.
- 17. Performance Benefits of App Router • Uses Server-Centric Routing • On Navigating Routes, it stores the result of React Server Components payload in an in-memory client-side cache which is split by route segment – allowing cache to be reused • SupportPartialRendering • Does supportAdvanceRoutingPatterns • ParallelRoutes • InterceptRoutes
- 19. Performance Benefits of React Server components
- 20. React Server Components vs Server Side Rendering
- 22. Caching vs Dynamic vs Revalidating Data • Fetch with Next helps us with data fetching and to achieve different caching strategies. • By default, fetch will automatically fetch and cache data indefinitely. • To fetch fresh data on every fetch request, use the cache: 'no-store' option. • To revalidate cached data at a timed interval, you can use the
- 25. Server Actions ( Alpha )
- 26. Other Features • Font Optimization - @next/font • Image Optimizations & Core Web Vitals Improvement - @next/image • Link API Improvement for better engagement • Introducing Client-Side Hooks • Introducing Special Functions for Server Components Read More on Medium
- 27. % Enhancements + Dev Exp + Built In-SEO Support What we know & 😍
- 28. Superior DX, focus on Performance, built in SEO support means Good Choice for Production Apps 😍