July 2024 Summaries

Google's ability to handle JavaScript throughout the indexing process has significantly evolved over the years. Previously, search engines primarily indexed static HTML content, but today, Google uses an up-to-date version of Chrome for rendering and attempts to render all HTML pages, not just a subset. This article debunks several common myths about Google's handling of JavaScript-heavy websites, such as the belief that "Google can't render JavaScript content" or "JavaScript-heavy sites have slower page discovery." The research conducted by MERJ and Vercel provides evidence that Google can effectively render and index JavaScript content, including complex Single Page Applications (SPAs), dynamically loaded content, and streamed content. Furthermore, the study found no significant difference in how Google processes JavaScript-heavy pages compared to static HTML pages. While a rendering queue exists, its impact is less significant than previously thought, with most pages rendered within minutes. The research also highlights that JavaScript-heavy sites are not inherently disadvantaged in page discovery by Google and that the evaluation of a link's value for site architecture and crawl prioritization occurs after full-page rendering. Overall, developers can leverage JavaScript frameworks freely for enhanced user and developer experiences while adhering to Google's best practices for lazy-loading and optimizing application performance.

The article discusses the usage of feature flags in Next.js using Vercel's Flags SDK. It introduces a new Flags SDK that works with any feature flag provider or when no flag provider is used, and explains how it can be integrated into applications to follow best practices for using feature flags and experiments while keeping websites fast. The article also provides examples of basic usage, overriding from Vercel Toolbar, using environment variables, Edge Config, and feature flag providers. It concludes by stating that the Flags SDK allows developers to choose the right tradeoff for each feature flag without having to refactor the code actually using the flags.

Elkjøp, a Nordic consumer electronics retailer, transformed its digital presence by adopting Next.js and Vercel, significantly reducing release cycles to 7 weeks, boosting digital revenue and enhancing user experience. The previous platform, built on Angular, was slow, causing SEO struggles and inefficient developer experiences. The new setup has empowered developers to take ownership of the release process, enabling faster iteration cycles with automated deployments and preview environments. This shift in mindset has led to a more stable user experience, improved performance, and better search engine visibility, resulting in over $1 billion in digital revenue.

This article discusses various rendering strategies for web applications and how they can be used effectively in different scenarios. The main rendering strategies discussed are Static Site Generation (SSG), Server-Side Rendering (SSR), Client-Side Rendering (CSR), Incremental Static Regeneration (ISR), and Partial Prerendering (PPR). Each strategy has its own trade-offs and use cases, and the best approach depends on factors such as how often content changes, search engine visibility requirements, user interaction expectations, load time requirements, and whether content varies by user. The article also introduces Next.js, a comprehensive rendering toolkit that allows developers to leverage different rendering methods within a single application. Finally, it provides real-world examples of how these strategies can be applied in ecommerce, web applications, and AI services.

Vercel is moving its new JavaScript/TypeScript bundler, Turbopack, into the Next.js repository and providing updates on its progress. The team has verified that the top 300 npm packages used in Next.js applications can compile with Turbopack, which they use daily for developing vercel.com. They are working on production builds and have begun moving the source code for Turbopack into the Next.js monorepo to enable faster iteration and support for standalone bundlers. The core of Turbopack remains framework-agnostic, with a focus on supporting other frameworks in the future.

The text discusses various rendering strategies for web applications, including Static Site Generation (SSG), Server-Side Rendering (SSR), Client-Side Rendering (CSR), Incremental Static Regeneration (ISR), and Partial Prerendering (PPR). Each strategy has its ideal use cases, benefits, and implementation considerations. The article also highlights the importance of combining strategies to optimize different components and staying future-ready with emerging technologies like PPR. Next.js is mentioned as a flexible framework that allows developers to leverage different rendering methods within a single application. Real-world product rendering strategies for ecommerce, web applications, and full-stack AI applications are explored, showcasing how different industries can apply component-level rendering methods with Next.js to create optimized, high-performance web applications. The article concludes by emphasizing the importance of assessing specific needs, measuring performance, investing in team knowledge, and staying informed about emerging trends in web development.

Vercel Functions is a serverless computing platform that allows developers to run code in response to user traffic without managing infrastructure, provisioning servers, or handling hardware. It offers several advantages over traditional infrastructure, including secure and always up-to-date environments, predictable performance, high availability, automatic downscaling and deprovisioning, real-time usage and spend controls, and out-of-the-box observability. Vercel Functions also integrates with its own observability suite for build and runtime logs, advanced traffic monitoring, and support for OpenTelemetry (OTEL) tracing. With automatic scaling, high availability, cost efficiency, and built-in security, Vercel Functions abstract away many operational complexities associated with managing infrastructure, allowing developers to focus on building great products without worrying about the underlying infrastructure.

Vercel Functions will soon enable streaming by default for all Node.js functions, allowing for faster response times and improved runtime logs experience. This feature has been supported since 2023 for frameworks like Next.js (App Router), SvelteKit, Remix, and more. Streaming responses can be seen in real-time, with individual log lines having precise timestamps. Enhanced streaming will be rolled out to Hobby accounts starting July 8th, 2024, and Pro and Enterprise accounts on October 1st, 2024. To enable streaming today, set the VERCEL_FORCE_NODEJS_STREAMING environment variable in your project to true.

Chick-fil-A's internal software, powered by Next.js, Turborepo, and Vercel, has drastically reduced build times and improved developer experience for their supply chain management platform, Signal. The micro-frontend solution enables the company to understand and align on restaurant sales forecasts, view inventory at every location, dynamically split orders, and tailor supply to meet demand. By adopting a more distributed approach with multiple full-stack pods, Chick-fil-A has empowered multiple teams to independently iterate on various applications within Signal's micro-frontend, amplifying engineering capacity and enabling faster development and deployment. The platform is also using Turborepo alone to reduce build times from 25 minutes to around 5 seconds, and is leveraging Vercel for serverless functions, Edge Config, and seamless integration with feature flags. The company is exploring AI-powered features, including a ChatGPT-like internal support chat, to further enhance the developer experience and user experience of Signal.

Chick-fil-A, a massive restaurant chain with over 3,000 locations, is transforming its supply chain by adopting a micro-frontend solution powered by Next.js, Turborepo, and Vercel. This system, called Signal, allows the company to better manage inventory, dynamically split orders, and tailor supply to meet demand. By adopting this new approach, Chick-fil-A aims to improve efficiency, reduce build times, and enhance developer experience. The micro-frontend solution has already led to significant improvements in build times, from 25 minutes to just 5 seconds, and has empowered multiple full-stack teams to independently iterate on various applications within Signal's platform.