Video wird geladen...

Video konnte nicht geladen werden

Zur Startseite

SSR in Pages Router vs App Router in Next.js

asidorenko_'s profile picture

Alex Sidorenko

35,100 subscribers

61,064 Aufrufe • vor 2 Jahren •via X (Twitter)

BildungWissenschaft & Technologie
LIVE

Anya Rossi• Live Now

Private livecam show

10 Kommentare

Profilbild von Andrew Aliaj
Andrew Aliajvor 2 Jahren

The App Router is better than the Pages Router.

Profilbild von Austin K
Austin Kvor 2 Jahren

Time to interactive is also faster

Profilbild von Umair
Umairvor 2 Jahren

Its pretty much the same Alex

Profilbild von Ezequiel Parziale
Ezequiel Parzialevor 2 Jahren

App router 🚀

Profilbild von ابراهيم | مبرمج
ابراهيم | مبرمجvor 2 Jahren

Great video 👍👏 how do you record your videos?

Profilbild von notRekash
notRekashvor 2 Jahren

Mixed with SSG and server action next is very powerful

Profilbild von Nick Muller
Nick Mullervor 2 Jahren

Although this is fair, I think another interesting comparison would be just rendering the skeleton in the page router, and loading the content client-side. Possibly via TanStack Query.

Profilbild von Krimo
Krimovor 2 Jahren

how do you hide those tailwind classes attributes?

Profilbild von Ice.eth
Ice.ethvor 2 Jahren

Hey! What’s that tailwind logo beside your tag name?

Profilbild von rong-sen-e/acc
rong-sen-e/accvor 2 Jahren

TIL performance insights tab

Ähnliche Videos

VS Code (Copilot) vs Cursor (claude-3.5-sonnet) for Next.js App Router
0:24

VS Code (Copilot) vs Cursor (claude-3.5-sonnet) for Next.js App Router

Alex Sidorenko

189,000 Aufrufe • vor 2 Jahren

Pages CMS 1.0.0 is finally (officially) out and it's running on Next.js (App Router). Thanks to Vercel, Turso, Drizzle ORM, Resend and shadcn (for the UI).
2:29

Pages CMS 1.0.0 is finally (officially) out and it's running on Next.js (App Router). Thanks to Vercel, Turso, Drizzle ORM, Resend and shadcn (for the UI).

Ronan Berder (in SF)

22,702 Aufrufe • vor 1 Jahr

Next.js App Router Training - hiroppy | iiba Interesting resource to learn Next.js features Interactive playground with a quite exhaustive list of features/demos
0:24

Next.js App Router Training - hiroppy | iiba Interesting resource to learn Next.js features Interactive playground with a quite exhaustive list of features/demos

Seb ⚛️ ThisWeekInReact.com

41,542 Aufrufe • vor 2 Jahren

Want to roll your own auth with Next.js? Learn how to use JWTs with HTTP-only cookies to implement basic session-based auth in the App Router.
11:30

Want to roll your own auth with Next.js? Learn how to use JWTs with HTTP-only cookies to implement basic session-based auth in the App Router.

Lee Robinson

96,854 Aufrufe • vor 2 Jahren

Introducing Platforms Starter Kit v2 → It's an open-source Next.js template for you to build multi-tenant apps with custom domains in days, not months. Built with Next.js App Router and the Vercel Domains API.
0:41

Introducing Platforms Starter Kit v2 → It's an open-source Next.js template for you to build multi-tenant apps with custom domains in days, not months. Built with Next.js App Router and the Vercel Domains API.

Steven Tey

305,291 Aufrufe • vor 3 Jahren

i'm not using the next.js app router navigation for @contentport anymore, the results are kinda amazing ◆ pages load instantly now ◆ whole app feels way faster ◆ barely any loading states, even on refresh the speed difference is actually wild
0:22

i'm not using the next.js app router navigation for @contentport anymore, the results are kinda amazing ◆ pages load instantly now ◆ whole app feels way faster ◆ barely any loading states, even on refresh the speed difference is actually wild

Josh tried coding

274,781 Aufrufe • vor 1 Jahr

The fastest storefront I've ever seen. So excited about the new Next.js Commerce powered by App Router. Headless backend by Shopify.
0:28

The fastest storefront I've ever seen. So excited about the new Next.js Commerce powered by App Router. Headless backend by Shopify.

Guillermo Rauch

297,208 Aufrufe • vor 3 Jahren

🚀 Ship in record time with the new Metronic! The all-in-one template kit for React Vite, Next.js, and vanilla JS - trusted by 117,000+ developers. Key Features: - 10 unique app layouts - RTL/Dark mode support - 1000+ UI elements - 40+ UI components - 120+ pages - 50+ Prebuilt UI blocks CRUDs/forms/flows - User Management app(next.js) - Store - Client concept - More concepts cooking... Tech Stack: - Tailwind CSS 4 - ReUI components - shadcn compatible - @reactjs19 with App Router - Vite ⚡ with React Router - Next.js 15.3 - Auth.js - Supabase Auth - Radix by WorkOS - TANSTACK Table & Query - Prisma ORM - PostgreSQL - Vanilla JS/TypeScript - KtUI components - Bootstrap 5 legacy version Live preview: Purchase link:
1:31

🚀 Ship in record time with the new Metronic! The all-in-one template kit for React Vite, Next.js, and vanilla JS - trusted by 117,000+ developers. Key Features: - 10 unique app layouts - RTL/Dark mode support - 1000+ UI elements - 40+ UI components - 120+ pages - 50+ Prebuilt UI blocks CRUDs/forms/flows - User Management app(next.js) - Store - Client concept - More concepts cooking... Tech Stack: - Tailwind CSS 4 - ReUI components - shadcn compatible - @reactjs19 with App Router - Vite ⚡ with React Router - Next.js 15.3 - Auth.js - Supabase Auth - Radix by WorkOS - TANSTACK Table & Query - Prisma ORM - PostgreSQL - Vanilla JS/TypeScript - KtUI components - Bootstrap 5 legacy version Live preview: Purchase link:

KeenThemes Market

12,695 Aufrufe • vor 1 Jahr

If you're looking to setup i18n for Next.js (App or Pages Router), check out next-international: ✨ Fully typesafe, no codegen 🦥 Small footprint, lazy-loaded locales 📄 Static Rendering, RSC... We've landed a ton of bugfix & features recently!
0:29

If you're looking to setup i18n for Next.js (App or Pages Router), check out next-international: ✨ Fully typesafe, no codegen 🦥 Small footprint, lazy-loaded locales 📄 Static Rendering, RSC... We've landed a ton of bugfix & features recently!

Tom Lienard

19,936 Aufrufe • vor 3 Jahren

is a great Next.js app router app. It's blazing fast, even with data being highly dynamic (it shows realtime stock market data & politicians' trades) Some cool details from my analysis 🧵
0:27

is a great Next.js app router app. It's blazing fast, even with data being highly dynamic (it shows realtime stock market data & politicians' trades) Some cool details from my analysis 🧵

Guillermo Rauch

91,310 Aufrufe • vor 1 Jahr

🚨 POC for CVE-2025-55182 that works on Next.js 16.0.6 Here are the exact, battle-tested queries you need — Censys, Shodan, FOFA, ZoomEye, Quake, BinaryEdge, and Nuclei matchers — all tuned specifically to find Next.js RSC / React Server Components instances vulnerable to CVE-2025-55182 (React2Shell). ⸻ ✅ 1. SHODAN QUERY (380K+ ASSETS) Find all servers leaking RSC Server Actions: Basic Query "Vary: RSC, Next-Router-State-Tree" More Aggressive Variant http.headers.vary:"RSC" AND http.headers.vary:"Next-Router-State-Tree" Superwide Coverage "Next-Router-State-Tree" OR "x-nextjs-cache" OR "server-actions" OR "__RSC__" Focused on Vulnerable Cache Indicators "x-nextjs-cache: HIT" "Next-Router-State-Tree" ⸻ ✅ 2. CENSYS QUERY (270K+ ASSETS) (match the screenshot you posted) Exact Censys Search services.http.response.headers.vary: "RSC, Next-Router-State-Tree" Safer Multi-Matcher services.http.response.headers.vary: "RSC" AND services.http.response.headers.vary: "Next-Router-State-Tree" Detect RSC Payload Exposure (critical) services.http.response.body: "__RSC__" Detect Flight Data Leaks services.http.response.body: "server-reference-manifest" ⸻ ✅ 3. FOFA QUERY (CHINA’S OSINT GIANT) (VERY POWERFUL for RSC/Next.js) Exact Header Based header="Next-Router-State-Tree" && header="RSC" Alternative (match screenshot patterns) "Next-Router-State-Tree" && "x-nextjs-cache" For massive result count body="__RSC__" || header="server-actions" ⸻ ✅ 4. ZOOMEYE QUERY ZoomEye scans often catch Node.js apps Shodan misses. Exact Unicode-Ready Query "Next-Router-State-Tree" && "RSC" Advanced app:"Next.js" && header:"RSC" ⸻ ✅ 5. QUAKE SEARCH (360K+ MATCHES) header:"Next-Router-State-Tree" AND header:"RSC" ⸻ ✅ 6. BINARYEDGE QUERY http.response.headers.vary:"Next-Router-State-Tree" ⸻ ✅ 7. QUERY headers:"Next-Router-State-Tree" && headers:"RSC" ⸻ 🎯 8. NUCLEI MATCHER (to detect RSC without scanning payloads) If you want a nuclei detector you can plug into your scanner: matchers: - type: word part: header words: - "RSC" - "Next-Router-State-Tree" - "server-actions" - "__RSC__" ⸻ 🚩 BONUS — THE MOST ADVANCED CROSS-ENGINE QUERY Use this when you want maximum global coverage: "Next-Router-State-Tree" OR "RSC" OR "__RSC__" OR "server-actions" OR "x-nextjs-cache" OR "Next-Server-Action" This identifies: •Next.js App Router •RSC endpoints •Server Actions •Flight data APIs •Pages exposing cache HITs (required for exploitation) •Systems likely vulnerable to CVE-2025-55182 (React2Shell)
0:32

🚨 POC for CVE-2025-55182 that works on Next.js 16.0.6 Here are the exact, battle-tested queries you need — Censys, Shodan, FOFA, ZoomEye, Quake, BinaryEdge, and Nuclei matchers — all tuned specifically to find Next.js RSC / React Server Components instances vulnerable to CVE-2025-55182 (React2Shell). ⸻ ✅ 1. SHODAN QUERY (380K+ ASSETS) Find all servers leaking RSC Server Actions: Basic Query "Vary: RSC, Next-Router-State-Tree" More Aggressive Variant http.headers.vary:"RSC" AND http.headers.vary:"Next-Router-State-Tree" Superwide Coverage "Next-Router-State-Tree" OR "x-nextjs-cache" OR "server-actions" OR "__RSC__" Focused on Vulnerable Cache Indicators "x-nextjs-cache: HIT" "Next-Router-State-Tree" ⸻ ✅ 2. CENSYS QUERY (270K+ ASSETS) (match the screenshot you posted) Exact Censys Search services.http.response.headers.vary: "RSC, Next-Router-State-Tree" Safer Multi-Matcher services.http.response.headers.vary: "RSC" AND services.http.response.headers.vary: "Next-Router-State-Tree" Detect RSC Payload Exposure (critical) services.http.response.body: "__RSC__" Detect Flight Data Leaks services.http.response.body: "server-reference-manifest" ⸻ ✅ 3. FOFA QUERY (CHINA’S OSINT GIANT) (VERY POWERFUL for RSC/Next.js) Exact Header Based header="Next-Router-State-Tree" && header="RSC" Alternative (match screenshot patterns) "Next-Router-State-Tree" && "x-nextjs-cache" For massive result count body="__RSC__" || header="server-actions" ⸻ ✅ 4. ZOOMEYE QUERY ZoomEye scans often catch Node.js apps Shodan misses. Exact Unicode-Ready Query "Next-Router-State-Tree" && "RSC" Advanced app:"Next.js" && header:"RSC" ⸻ ✅ 5. QUAKE SEARCH (360K+ MATCHES) header:"Next-Router-State-Tree" AND header:"RSC" ⸻ ✅ 6. BINARYEDGE QUERY http.response.headers.vary:"Next-Router-State-Tree" ⸻ ✅ 7. QUERY headers:"Next-Router-State-Tree" && headers:"RSC" ⸻ 🎯 8. NUCLEI MATCHER (to detect RSC without scanning payloads) If you want a nuclei detector you can plug into your scanner: matchers: - type: word part: header words: - "RSC" - "Next-Router-State-Tree" - "server-actions" - "__RSC__" ⸻ 🚩 BONUS — THE MOST ADVANCED CROSS-ENGINE QUERY Use this when you want maximum global coverage: "Next-Router-State-Tree" OR "RSC" OR "__RSC__" OR "server-actions" OR "x-nextjs-cache" OR "Next-Server-Action" This identifies: •Next.js App Router •RSC endpoints •Server Actions •Flight data APIs •Pages exposing cache HITs (required for exploitation) •Systems likely vulnerable to CVE-2025-55182 (React2Shell)

X

10,544 Aufrufe • vor 10 Monaten

Noticed a really neat Grok design engineering detail: autofocus the input whenever you press a key. Time-saving and reduces the user input error rate. Great Next.js app router app overall, fast & reliable.
0:28

Noticed a really neat Grok design engineering detail: autofocus the input whenever you press a key. Time-saving and reduces the user input error rate. Great Next.js app router app overall, fast & reliable.

Guillermo Rauch

301,848 Aufrufe • vor 1 Jahr

It happened! I’ve open sourced my exif-based photo blog as a (near) zero-config Vercel template. It uses all the things: ◆ Next.js App Router with Server Actions ◆ Next.js Image ◆ Next Auth ◆ Vercel Postgres ◆ Vercel Blob ◆ Vercel OG Template →
0:43

It happened! I’ve open sourced my exif-based photo blog as a (near) zero-config Vercel template. It uses all the things: ◆ Next.js App Router with Server Actions ◆ Next.js Image ◆ Next Auth ◆ Vercel Postgres ◆ Vercel Blob ◆ Vercel OG Template →

Sam Becker

125,819 Aufrufe • vor 3 Jahren

I've finally published a new version of next-international, my fully typesafe i18n library for Next.js This release adds initial support for the App Router, with both Client and Server Components:
0:32

I've finally published a new version of next-international, my fully typesafe i18n library for Next.js This release adds initial support for the App Router, with both Client and Server Components:

Tom Lienard

42,459 Aufrufe • vor 3 Jahren

🚀 I built a new @Expo Router template for working with native context menus! ◆ UIMenu & SF Symbols → Zeego ◆ Dropdown → shadcn/ui ◆ Styles → nativewind ◆ Navigation → Expo Router ◆ State → Zustand 🆕 Clone it today with: npx create-expo-app -e with-router-menus
1:07

🚀 I built a new @Expo Router template for working with native context menus! ◆ UIMenu & SF Symbols → Zeego ◆ Dropdown → shadcn/ui ◆ Styles → nativewind ◆ Navigation → Expo Router ◆ State → Zustand 🆕 Clone it today with: npx create-expo-app -e with-router-menus

Evan Bacon 🥓

110,423 Aufrufe • vor 2 Jahren