Dave Gray
Key Takeaways
- A better understanding of Next.js
- The difference between static, SSG, SSR, and ISR
- How React & Next.js are the same.. but different
Why Next.js?
-
SPAs are…
…great as interactive apps
…not so great as websites
…not so great for SEO & Socials
Key Differences
App Router
Server & Client Components
Server Components are built in node.js
In page.tsx
or layout.tsx:
export const runtime = 'nodejs' //Default value
Server Component Benefits
- Fetching Data - closer to the source.
- Security - hide sensitive data.
- Caching - rendered on the server.
- Bundle Sizes - dependencies stay on the server.
- Initial Page Load - it is cached on the server and immediately creates and sends HTML to the client.
- SEO & Social Network Sharing
- Streaming - Split Rendering
Client Components
'use client'
must be declared at the top of each client-side component you want to use.
- ‘Traditional React’
- Use hooks, click handlers, etc.
- Think interactivity.
- Access Browser APIs
- ‘use client’ creates a boundary
Server Actions
- Async functions executed on server
- Used in server & client components
- Handle form submissions
- Updates and mutations
Static & Acrpmu,s
Static: Client
Just like React components.
‘use client’ directed declared at the top of the file.
Static: Server