Video yükleniyor...

Video Yüklenemedi

Ana Sayfaya Dön

SSR in Pages Router vs App Router in Next.js

asidorenko_'s profile picture

Alex Sidorenko

35,100 subscribers

61,064 görüntüleme • 1 yıl önce •via X (Twitter)

EğitimBilim & Teknoloji
LIVE

Anya Rossi• Live Now

Private livecam show

10 Yorum

Andrew Aliaj profil fotoğrafı
Andrew Aliaj1 yıl önce

The App Router is better than the Pages Router.

Austin K profil fotoğrafı
Austin K1 yıl önce

Time to interactive is also faster

Umair profil fotoğrafı
Umair1 yıl önce

Its pretty much the same Alex

Ezequiel Parziale profil fotoğrafı
Ezequiel Parziale1 yıl önce

App router 🚀

ابراهيم | مبرمج profil fotoğrafı
ابراهيم | مبرمج1 yıl önce

Great video 👍👏 how do you record your videos?

notRekash profil fotoğrafı
notRekash1 yıl önce

Mixed with SSG and server action next is very powerful

Nick Muller profil fotoğrafı
Nick Muller1 yıl önce

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.

Krimo profil fotoğrafı
Krimo1 yıl önce

how do you hide those tailwind classes attributes?

Ice.eth profil fotoğrafı
Ice.eth1 yıl önce

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

rong-sen-e/acc profil fotoğrafı
rong-sen-e/acc1 yıl önce

TIL performance insights tab

Benzer Videolar

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 görüntüleme • 1 yıl önce

How to show inline loading indicator when updating search params in Next.js (App Router)
0:25

How to show inline loading indicator when updating search params in Next.js (App Router)

Alex Sidorenko

61,834 görüntüleme • 1 yıl önce

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

22,701 görüntüleme • 1 yıl önce

Next.js App Router Training - hiroppy 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 Interesting resource to learn Next.js features Interactive playground with a quite exhaustive list of features/demos

Seb ⚛️ ThisWeekInReact.com

41,524 görüntüleme • 2 yıl önce

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,795 görüntüleme • 2 yıl önce

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,218 görüntüleme • 3 yıl önce

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,087 görüntüleme • 3 yıl önce

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 görüntüleme • 1 yıl önce

🚀 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 Postgres 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 Postgres ORM - PostgreSQL - Vanilla JS/TypeScript - KtUI components - Bootstrap 5 legacy version Live preview: Purchase link:

KeenThemes Market

12,692 görüntüleme • 1 yıl önce

iOS 26 Preview app… rebuilt in Expo ✦ Expo SDK 54 (beta) ✦ Expo Router v6 ✦ Expo Router NativeTabs (experimental) ✦ Mo Gorhom sheets Beta on beta on beta :)
0:23

iOS 26 Preview app… rebuilt in Expo ✦ Expo SDK 54 (beta) ✦ Expo Router v6 ✦ Expo Router NativeTabs (experimental) ✦ Mo Gorhom sheets Beta on beta on beta :)

Solarin

33,865 görüntüleme • 11 ay önce

New video: MDX with Next.js! Learn how to combine the power of React components with markdown in the App Router. We also cover some of the built-in metadata features as well as CSS view transitions.
12:32

New video: MDX with Next.js! Learn how to combine the power of React components with markdown in the App Router. We also cover some of the built-in metadata features as well as CSS view transitions.

Lee Robinson

79,109 görüntüleme • 1 yıl önce

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 görüntüleme • 2 yıl önce

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 görüntüleme • 1 yıl önce

🚨 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 görüntüleme • 7 ay önce

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,757 görüntüleme • 1 yıl önce

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 görüntüleme • 2 yıl önce

This is a fully dynamic, server-rendered Next.js app router + headless Shopify storefront. Zero client / CDN page caches, fully personalized, feels as though it was local-first. Try it for yourself!
0:40

This is a fully dynamic, server-rendered Next.js app router + headless Shopify storefront. Zero client / CDN page caches, fully personalized, feels as though it was local-first. Try it for yourself!

Guillermo Rauch

66,022 görüntüleme • 2 yıl önce

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 görüntüleme • 3 yıl önce

🚀 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 görüntüleme • 2 yıl önce