Loading video...

Video Failed to Load

There was a problem loading this video. This could be due to a temporary network issue or the video might be unavailable.

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

703,357 subscribers

66,022 views • 2 years ago •via X (Twitter)

Anya Rossi• Live Now

Private livecam show

9 Comments

Peter White2 years ago

@nextjs @Shopify Super fast - though optimistic UI for quantity increase in cart would be nice 👀

Guillermo Rauch2 years ago

@nextjs @Shopify yessss. want. cc @leeerob

Jorge Vizcayno2 years ago

@nextjs @Shopify I'm sure if you convert the into a real Vercel Swag store instead of Acme products, you'd get both more insights on how to keep improving and some revenue from ver el powerusers

Baytaş2 years ago

@nextjs @Shopify wen page transitions tho

Sukh Dugal2 years ago

@nextjs @Shopify If a demo store feels so slow and clunky, I can't imagine what a real store's UX feels like. Can someone without bias chime in — is running two web servers across locations to render a page not a bad idea?

Jacob2 years ago

@nextjs @Shopify Darn

Richard Poelderl2 years ago

@nextjs @Shopify It’s fast. But not local first fast.

Guillermo Rauch2 years ago

@nextjs @Shopify how come? If it's the add to cart operation, that's on the todo. will get done

khavas2 years ago

@nextjs @Shopify That's pretty cool!

Related Videos

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:

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 views • 3 years ago

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 →

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 views • 3 years ago

A navigation to a dynamic server-rendered page is blocked until the server responds. In Next.js, the first step to improving the experience is to add a `loading.js` file. This unblocks navigation and gives the user feedback while the content streams in.

A navigation to a dynamic server-rendered page is blocked until the server responds. In Next.js, the first step to improving the experience is to add a `loading.js` file. This unblocks navigation and gives the user feedback while the content streams in.

Delba

50,434 views • 1 year ago

This is a fully functioning Laravel application and playground rendered on a static Cloudflare page. The entire app is sandboxed to your client, all files are editable, and you can even run artisan commands.

This is a fully functioning Laravel application and playground rendered on a static Cloudflare page. The entire app is sandboxed to your client, all files are editable, and you can even run artisan commands.

Andrew Schmelyun

12,275 views • 7 months ago

In LiveView, we keep the state in one place - the server - and it simplifies a lot. But sometimes the state on the client is preferred, or even necessary, and we can't use LiveView for that part. Unless we have a LiveView that runs on the client 👀 Using Popcorn, we managed to run LiveView fully in the browser – here's a POC 🎉 The approach is to have a fully client-side LiveView rendered by a server-side one, and they can communicate with each other. Try it out:

In LiveView, we keep the state in one place - the server - and it simplifies a lot. But sometimes the state on the client is preferred, or even necessary, and we can't use LiveView for that part. Unless we have a LiveView that runs on the client 👀 Using Popcorn, we managed to run LiveView fully in the browser – here's a POC 🎉 The approach is to have a fully client-side LiveView rendered by a server-side one, and they can communicate with each other. Try it out:

Elixir by Software Mansion

13,537 views • 9 months ago

Support Local Business 📌 Only R100? Let’s see what I can get at SKUBU 😅 SKUBU is the world’s first fully automated refill store and it offer high demand staple foods at unmatched prices Try it for yourself. 😁

Support Local Business 📌 Only R100? Let’s see what I can get at SKUBU 😅 SKUBU is the world’s first fully automated refill store and it offer high demand staple foods at unmatched prices Try it for yourself. 😁

Black-Jesus💧🇿🇦

54,410 views • 7 months ago

Next.js 15: <Form> • Prefetching • Client-side navigation • Progressive enhancement It is useful for forms that navigate to a new page, such as a search form that leads to a results page.

Next.js 15: <Form> • Prefetching • Client-side navigation • Progressive enhancement It is useful for forms that navigate to a new page, such as a search form that leads to a results page.

Delba

67,908 views • 1 year ago

!Boring If this was going to be a camera app people would love, it had to do 4 things… 1. Feel satisfying in your hands (like a real camera) This is our first fully-3D interface with dynamic lighting that responds to movement, satisfying sounds, & custom haptics. Feels damn good.

!Boring If this was going to be a camera app people would love, it had to do 4 things… 1. Feel satisfying in your hands (like a real camera) This is our first fully-3D interface with dynamic lighting that responds to movement, satisfying sounds, & custom haptics. Feels damn good.

Andy Allen

34,943 views • 1 year ago

it's finally time... this is css clicker, a fully-featured incremental game where your goal is to design your own personal website and get as many views on it as possible the fun part? it's a pure-css game, meaning it has zero javascript or server-side code. have fun!

it's finally time... this is css clicker, a fully-featured incremental game where your goal is to design your own personal website and get as many views on it as possible the fun part? it's a pure-css game, meaning it has zero javascript or server-side code. have fun!

Rebane

128,756 views • 1 year ago

Here we go~ my first fully fledged nom animation~ This took 3 days to fully construct since I'm still learning~, and it was a Christmas gift for the lovely dynnie.bsky.social~ Model by @/soxf0x Hope you all enjoy as much as he did!~

Here we go~ my first fully fledged nom animation~ This took 3 days to fully construct since I'm still learning~, and it was a Christmas gift for the lovely dynnie.bsky.social~ Model by @/soxf0x Hope you all enjoy as much as he did!~

The Teumessian Fox

19,120 views • 1 year ago

Claude code is fucking insane i know literally nothing about coding, zero, and I just built a fully functioning web app for scraping peoples data from third world countries and will be selling it for 2X This is insane

Claude code is fucking insane i know literally nothing about coding, zero, and I just built a fully functioning web app for scraping peoples data from third world countries and will be selling it for 2X This is insane

Jakey

22,521 views • 7 months ago

Dylan is spreading the agenda, so here it is. I fully believe Kolossos is Jamaican, and this was the first time I did that voice. Expect more down the line as it spreads further.

Dylan is spreading the agenda, so here it is. I fully believe Kolossos is Jamaican, and this was the first time I did that voice. Expect more down the line as it spreads further.

-TheOnlyVolume-

31,946 views • 3 months ago

ARE YOU READY SUNNY HUNNY? Another fully SOLD OUT night tonight Brace yourself. This show is a belter! Close the doors. Shut the world outside. And remember how it feels to belong.

ARE YOU READY SUNNY HUNNY? Another fully SOLD OUT night tonight Brace yourself. This show is a belter! Close the doors. Shut the world outside. And remember how it feels to belong.

Katie Hopkins

63,759 views • 3 months ago

We are excited to introduce the Text to Sound Effects API. To showcase it - we've built the first Video to Sounds Effects app. This app is available for free online and fully open-source.

We are excited to introduce the Text to Sound Effects API. To showcase it - we've built the first Video to Sounds Effects app. This app is available for free online and fully open-source.

ElevenLabs

120,703 views • 2 years ago

I just bought more $XRP for the first time in 2 years. The last time I bought XRP it was at $0.50 and scooping it up at $1.09 feels like a very similar opportunity. Let me explain fully what my plan is 👇

I just bought more $XRP for the first time in 2 years. The last time I bought XRP it was at $0.50 and scooping it up at $1.09 feels like a very similar opportunity. Let me explain fully what my plan is 👇

Zach Humphries

42,569 views • 3 months ago

This AI tool will FULLY automate your dropshipping store! Here’s how it works: - Enter any product link - Wait 30 seconds for a custom product page - Import to your Shopify store with 1 click RT and comment “AI” and I’ll auto-dm you a full tutorial.

This AI tool will FULLY automate your dropshipping store! Here’s how it works: - Enter any product link - Wait 30 seconds for a custom product page - Import to your Shopify store with 1 click RT and comment “AI” and I’ll auto-dm you a full tutorial.

Eclipse

69,241 views • 2 years ago

I tried replicating fully agentic coding on my laptop and I'm impressed! My setup - Qwen 27bn (4bit quant) - Pi coding agent - CCO sandboxing for yolo mode My Mac M3 has 36GB ram. It's surreal to see a local model read prompt, follow it flawlessly and then build a fully self-contained html/css page with zero errors. I got about ~20 tokens/second, and on this prompt quality similar to Haiku! But... this is running locally :)

I tried replicating fully agentic coding on my laptop and I'm impressed! My setup - Qwen 27bn (4bit quant) - Pi coding agent - CCO sandboxing for yolo mode My Mac M3 has 36GB ram. It's surreal to see a local model read prompt, follow it flawlessly and then build a fully self-contained html/css page with zero errors. I got about ~20 tokens/second, and on this prompt quality similar to Haiku! But... this is running locally :)

Paras Chopra

106,032 views • 4 months ago

Well, I *was* having fun with my first 2011 🤣 Tonight after a couple mags it failed to go fully into battery, so I pushed it forward and fired the chambered round (perhaps that was an error, though it was a pretty gentle push I didn't need to force it or anything). Now it's totally locked up, not sure what to do but maybe one of you knows. It only has about 300 rounds through it, and cleaned and oiled it after the first 100. I know it has a bit of a break-in period, though this was my first issue with it. But it's a pretty big issue! I could try and really force it open but I dont want to break it.

Well, I was having fun with my first 2011 🤣 Tonight after a couple mags it failed to go fully into battery, so I pushed it forward and fired the chambered round (perhaps that was an error, though it was a pretty gentle push I didn't need to force it or anything). Now it's totally locked up, not sure what to do but maybe one of you knows. It only has about 300 rounds through it, and cleaned and oiled it after the first 100. I know it has a bit of a break-in period, though this was my first issue with it. But it's a pretty big issue! I could try and really force it open but I dont want to break it.

Kostas Moros

60,014 views • 5 months ago