Next.js helps address some shortcomings of React like initial load time and SEO support. It introduces features like server-side rendering, static generation, and incremental static regeneration that improve performance. The new App Router in Next.js 13.4 introduces shared layouts and nested routing to provide a more structured approach to building apps. React Server Components in Next.js also improve performance by enabling server-centric routing and caching of component trees.

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

18. React Server components

19. Performance Benefits of
React Server components

20. React Server Components vs
Server Side Rendering

21. Simplified Data fetching

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

23. Metadata API
(Static)

24. Metadata API
(Dynamic)

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
😍

29. Thank you!
Questions ??
@iamdivyans
h