Next.js Live: Code in the Browser with ESM, ServiceWorkers, Replicache, and WASM | Hacker News Reader

Next.js Live: Code in the Browser with ESM, ServiceWorkers, Replicache, and WASM

nextjs.org

107 pointsleerob25 comments

This looks a LOT like StackBlitz WebContainers which were launched last month.

https://blog.stackblitz.com/posts/introducing-webcontainers/

Is this using WebContainers? Or is it just very similar?

The HN discussion about StackBlitz focused on the problem that it would only work in Chrome… I assume that's true here as well? (Due to lack of the File System Access API?) https://news.ycombinator.com/item?id=27223012

> Is this using WebContainers? Or is it just very similar?

No, it’s not using WebContainers. It’s a native ES module based Next.js dev server that works inside the browser.

> Faster than local dev: Because it runs entirely within the browser, server responses have less latency than localhost.

Next.js Live seems very impressive, but this marketing line is scaring me off. It’s hard to imagine that running your app in webassembly within the browser has a measurable reduction in latency vs running on localhost. If anything, I would expect it to be slightly higher because of the overhead of interpreting/compiling wasm, and the slight performance hit of wasm vs native code.

Also my first thought. If these folk can share metrics to prove otherwise, I’ll be pleasantly surprised.

It’s because in normal localhost you have to spin up a server in another process that serves your JS. With this there’s no server serving your JS. It’s right there in the browser already. That’s what they mean.

I understand, but it is not obvious this provides a performance benefit which outweighs the potentials slowdowns I mentioned above. I am concerned about the trend of JavaScript tools advertising how they are “blazing fast” without any benchmarks or serious technical analysis.

Hello all, Aaron from Replicache here. Happy to answer any questions about Next.js Live or Replicache!

Hi Aaron. First time learning about replicache. Headed over to the website and the documentation on the server portion seems to be a lot of TODO links. Before diving into Live, which looks very cool, I guess I'd want to know more about what the server side implementation looks like. I could see using this for a golang backend that I have to sync data with. Thanks.

Yeah, Replicache is in beta right now, and we haven't quite finished the detailed server-side documentation. Apologies .

However, there is a walkthrough of implementing the server side starting here:

https://doc.replicache.dev/guide/remote-database.

And you can find some samples here:

https://github.com/rocicorp/replidraw

https://github.com/rocicorp/replicache-sample-chat

It's first time I hear of next.js, what is it?

AFAIK it's framework built upon React.

It helps you make React apps: https://nextjs.org/

It's an opinionated react framework with dev tools to make it easy to: - render on the client, server (lambda function), or at build time - easily create lambda function at edge to act as API endpoints

the same ideas have been ported to Vue and Svelte equivalents.

i am very excited about this, kudos to the team on a great implementation.

for comparison the netlify equivalents are:

- https://www.netlify.com/products/deploy-previews/

- https://docs.netlify.com/cli/get-started/#share-a-live-devel...

this replicache implementation seems more framework specific, but the live collab is just so much exciting to see!

While Next.js Live is framework specific (redesigning the Next.js dev server), the collaboration features will eventually be rolled out for the entire Vercel platform!

When/how does the page preview refresh? Seems tricky/unlikely for the Next.js page to be in a valid state if every keystroke is synchronized.

The keystrokes edit the local in-memory state and are synchronized in batches to the server and other collaborators. Learn more here: https://replicache.dev/

I still haven’t seen anyone explain how this code gets deployed to the shareable URL though. Is it being pushed to the Vercel edge network when you run next dev? What is actually happening when you use this on-page code editor? Where are those code changes being persisted to?

Did you have to do some OT (Operational Transformation) to sync changes between clients?

This preview version of Next.js Live doesn't do anything special for text editing. It just locks the document while one user is editing.

We are excited to work with Vercel to add true collaborative text editing on top of Replicache soon.

Hi Aaron - are you using VSCode for the IDE? How is this similar to/different from say, Gitpod?

Next.js Live uses a modified version of Monaco: https://microsoft.github.io/monaco-editor/

Thanks Lee - appreciate the insight!

I went to see the Vercel fork because I was curious what sorts of modifications you’ve made, but i couldn’t find it. Are you planning on publishing your changes? Can you say a little about what they are?

Clarification – it's actually a fork on the entire VSCode, not just Monaco. This allowed us to add features like locking the editor when others are editing the same file.

Reply on news.ycombinator.com