Beyond JAMstack: Next.js creator on hybrid rendering, TypeScript and Visual Studio Code
Guillermo Rauch: 'One of the biggest performance issues that we see today is to do with advertising'
Interview Guillermo Rauch, creator of the Next.js framework for building React applications, spoke to The Register about the just-released Next.js 9.3 and its hybrid approach to web application development.
Relying purely on static site generation (SSG) and APIs may not be best for every use case, though. The solution is to use a blend of SSG and server-side rendering (SSR). Server-side rendering is used by old-style web application technologies like PHP or ASP.NET. This led to discussion in the Next.js community to "allow Next.js to become fully hybrid by providing methods to do both static generation and server-side generation on a per-page basis."
This change is at the heart of the newly released Next.js 9.3. "Next.js is able to do a full spectrum of static site generation, client side rendering and server rendering," says Rauch. "It's almost like a new beginning. This idea of combining SSG in a hybrid way and giving people the options, it's a really big thing."
Someone creates a super well-optimized Next.js project, and then someone comes in from the business side of things and says, 'Just drop in this script' to run their ads
"Finally, there is the rise of Visual Studio Code. VS Code has become the front-end developer's code editor. It works incredibly well with TypeScript, and at the same time, TypeScript makes it an incredible code editor, you can do all these amazing suggestions, auto-completions, etc. So the success of VS Code and TypeScript have gone together. When I talk to TypeScript users of Next.js, I would say 95 per cent of them are using it with VS Code."
How might WebAssembly impact front-end development? Rauch says that it will help people who want to work in just one language. "Teams that use one language tend to move faster.
"Instead of a barrier to collaboration on a codebase: Go for the back end, then learn TypeScript for the front end. The hope has been that with WebAssembly we are going to be able to cross-compile to this universal delivery format and remain in one language. That hasn't worked in practice yet.
"There is a promising potential where you have an opportunity to speed up a discrete process that is well isolated, anything to do with image manipulation, video, numerical computation. We're seeing traction there. And we're building the bindings inside Next.js so you can incorporate WebAssembly modules, we've only seen them in specialized things so far, but I remain excited about it because it gives a lot of predictability to the performance. It's going to be interesting, but it's too early to tell."
Great work! Now let's wreck it with some ad scripts
The framework developers are doing great work on performance and design, but much of the web is unpleasant for users because of advertising and monetization. "One of the biggest performance issues that we see today is to do with advertising. Someone creates a super well-optimized Next.js project, and then someone comes in from the business side of things and says, 'Just drop in this script' to run their ads. We see lots of issues with rendering performance when pages start jumping around as a result of unpredictable ads-loading.
"Ads are also to blame for sub-par customer experiences, like gigantic pages floating around, and banners and pop-ups and blockers, and their privacy invaded. The web will have to evolve to find a way to retain great customer experience and preserve privacy.
"Native ecosystems like Apple's are making a lot of progress with this, with reasonable subscription systems and privacy protections built into the operating system. The web will evolve to gain these primitives, otherwise it's going to lose to competitors," says Rauch.
It is unfortunate that these wider issues are things that framework developers alone cannot fix. ®