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?

1. 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