Subscribe to stay updated on the most important tech updates in your industry.
Interaction to Next Paint is a metric that measures a page’s responsiveness
Google has announced that Interaction to Next Paint (INP) will become a Core Web Vital metric as of Mar 12, 2024, replacing First Input Delay (FID). This is a highly significant change that will affect the whole field of web development.
Check your project’s INP score as soon as possible; if it doesn’t pass the “good” threshold, take action immediately
Long tasks, input delay, large DOMs, complex CSS selectors, and client-side rendering are all factors that can negatively impact an INP score
As part of this change, FID will no longer be a Core Web Vital and will be officially deprecated and removed from the program
The new App Router is one of Next.js 13’s most exciting features, but also one of its most frequently misunderstood. Vercel has released a comprehensive guide to some of the most common mistakes developers make when using the App Router:
Using route handlers with server components:
Route Handlers and Server Components execute securely on the server, eliminating the need for additional network hops
Logic intended for Route Handlers can be directly called within Server Components, avoiding the need for conditional environment checks and the use of absolute URLs for fetch requests
Static or dynamic route handlers:
Route Handlers, cached by default with the GET method, serve as fundamental components in Next.js, akin to pages, enabling static generation and caching of various file types during build
Despite resembling API Routes, Route Handlers are static by default and share route segment configurations with pages, offering new possibilities such as generating JSON or other file types for pre-rendering during builds
This functionality facilitates compatibility with Static Exports, allowing deployment on platforms supporting static file hosting, offering greater flexibility and optimization in Next.js applications
Using suspense with server components :
The Suspense boundary needs to be placed higher than the async component that is doing any of the data fetching. Suspense boundary will not work inside an async component
Using the incoming request:
Incoming request objects cannot be used in server components. However the following can be used to access request information in server components: cookies(), headers(), params, searchParams
Context cannot be used in server components but in order to use context between your Server and Client Components, it's important to designate your provider (or multiple providers, think theme provider) as distinct Client Components
You can use client and server components together: it is great to use server components to fetch data for them directly but this does not enable much client-side react functionality
Baseline, a system defining the lifecycle stages of browser features, is now integrated into caniuse.com, distinguishing between newly and widely available features
Features achieve Baseline status when interoperable across major browsers including Safari, Firefox, Chrome, and Edge, with "newly available" and "widely available" badges displayed on Can I Use
Key 2023 Baseline features include size container queries, advanced CSS color spaces and functions, the Compression Streams API, OffscreenCanvas improvements, and module preload for faster JavaScript loading
Additional innovations are trigonometric functions in CSS, the inert attribute for DOM elements, CSS subgrid layout enhancements, NumberFormat V3 improvements, and comprehensive support for the Fullscreen API and the :has() CSS selector
The year also saw the adoption of numerous other technologies like constructable stylesheets, complex nth-child selectors, import maps, and various CSS enhancements, contributing to a richer web development landscape
Stay ahead of the curve with Econify's newsletter, "The Loop." Designed to keep employees, clients, and our valued external audience up to date with the latest developments in software news and innovation, this newsletter is your go-to source for all things cutting-edge in the tech industry.
The Loop is written and edited by Hank Mason, Noah Gribbin, Victoria Lebel, Nick Barrameda, and Marie Stotz.
Have questions? Hit reply to this email and we'll help out!
