GraphQL

STATE OF GRAPHQL

Published Oct 28, 2019

Updated Feb 14, 2023

3 min read

This article was written over 18 months ago and may contain information that is out of date. Some content may be relevant but please refer to the relevant official documentation or available resources for the latest information.

Sashko Stubailo, core team member of the Apollo/GraphQL project gave a state of GraphQL at This.JavaScript. In this update, Sashko talks about the resources available in the GraphQL ecosystem and shares what you need to know to get started.

#History and Introduction to GraphQL GraphQL was introduced in 2015 and is maintained by Facebook and other open source community members. It is a query language for APIs which help define the data in your application. It has features which allow for self-documentation and elimination of both over fetching and request waterfalls. GraphQL also provides an extensive community of clients, servers, and developer tools.

GraphQL is neither a library nor a product, but rather a specification and a community — one that provides a schema for your entire set of data and a query language for retrieving it. One of the benefits of GraphQL is that it is incrementally adoptable in virtually any architecture.

#Using GraphQL Subscriptions vs Live Query GraphQL Subscriptions was originally released with queries for fetching data and mutations to update that data. It allows you to retrieve real-time streams of data.

The way subscriptions work is that a server-side pop-up system (or something similar) is used to push specific messages to clients. Subscriptions are different from live query because live queries implement a method that is similar to optimized polling, whereas subscriptions follow a more finite approach that is easier to manage.

#Open Source Tooling Servers are one of the most important parts of the GraphQL architecture. There are currently a number of them in the works as open source projects. If you are looking for different server libraries, they are available in every popular server-side technology and framework and can be found at graphql.org/code.

One of the most recent GraphQL implementations was made by Walmart Labs. It is a server called Lacinia and serves both samsclub.com and Walmart Grocery.

#Clients By using basic HTTP caching that operates on a per request basis, individuals can fetch all kinds of queries with varying shapes and results. However, greater benefits can be obtained if more sophisticated clients are used to help with caching. Presently, there are two major GraphQL client libraries (for javascript) with 1.0 releases. The first is Apollo, which released on March 30 and works with all javascript technologies, and the second being Relay, a more opinionated architecture announced by facebook.

On a side note, with Native Mobile clients, it is important to make sure that API technology can be accessed from the clients. Therefore, libraries that allow you to fetch GraphQL queries easily from Swift on iOS and Java on Android, are made available. These libraries are also capable of code generation which foster numerous benefits.

Developers are currently trying to integrate similar properties to Javascript clients. They are working with New York Times, Shopify, and Airbnb, to find out ways of implementing the sharing of data between separate parts of an app. As developers are aware, this is due to the case of creating an application using different types of code.

#Developer Tools Since there is a strongly typed API with a query language to go along with it, a whole new space of developer tools becomes accessible. With these tools, APIs and data fetching can be explored in more depth.

The autocompleting query editor called Graphical was one of the first dev tools to be made. This is a tool that the majority of individuals use to interact with their API. Other tools have also been created such as persisted queries and chrome dev tools, as well as a couple others made responsible for query validation as well as extraction of those queries from code.

#GraphQL Language Service Another new project developed by Facebook is the GraphQL language service which gives a similar experience to graphical tool. It contains a standalone web IDE that can be found in one’s normal code editor IDE. This enables individuals to open up source code editors such as Visual Studio Code, and type GraphQL queries right in their code. Validation and autocompletion would then take place, so that API docs don’t have to be referred to.

To find out more about GraphQL, follow them on twitter @GraphQL. By Trinh Kien

This Dot is a consultancy dedicated to guiding companies through their modernization and digital transformation journeys. Specializing in replatforming, modernizing, and launching new initiatives, we stand out by taking true ownership of your engineering projects.

We love helping teams with projects that have missed their deadlines or helping keep your strategic digital initiatives on course. Check out our case studies and our clients that trust us with their engineering.

Common Interview Questions & What They Mean

Introduction Who hasn't been asked some weird and interesting questions in previous interviews? Interviewers are known for asking a variety of weird, interesting, and confusing questions to possible employees for a variety of reasons. And this makes sense because they want to know as much as possible about you in the limited interview duration. Here are some interview questions you might be asked and what the interviewer is trying to find out about you from your answers: Introduce yourself Here, the interviewer is not really interested in your answer. What they are looking at your confidence and your passion, so this is the best time to show them your communication skills! So, you should tell them about your education, where you grew up, your past work experience, your hobbies, and your personal interests! Be calm, relaxed, and confident! What are your strengths? Here, the interviewers want to know how positivly you think about yourself! It’s a quite general question, so there is no right or wrong answer for it! So it’s a good opportunity for you to share what makes you so unique, and what are you good at! But you should tie your strengths to what they’re looking for! That’s why you should read the job description very carefully, and get a good understanding of what they are looking for, and then try to fit yourself in there! What are your weaknesses? In this question, the interviewers are looking at is whether you can identify your weaknesses, and how you can cover them up! You need not be really negative about yourself! For example, don't say “I am a very impatient person”, or “I am getting angry easily”. The best way to answer this question is to talk about a weakness that you had that isn’t related to the job, and what you did to overcome it. That way, they can see a progression, and that is what they really want to hear in the answer! What is your expected salary? Here, the interviewers, of course, have knowledge about the typical salaries offered by the company. By asking this question, they're often trying to see whether the applicant did research about the company. So learn about the company before the interview! You can use websites like Payscale or Glassdoor and read the reviews from other people who worked at this company! Can you work under pressure? This is a behavioral question, and the reason behind this question is the interviewers want to know if you get really stressed out. So the best way to answer this question is by talking about a situation where you experienced pressure, and the action that you took to diffuse that pressure. Then, talk about the result and what happened. How do you make your decisions? You might be asked this question if you are applying for management or lead position. They're interested in knowing your process when making decisions, because it's very likely that at some point, you will have to make a critical decision in the workplace. So, the best way to answer is to be confident and walk them through some of your management exercises, or some of your work situations that you handled successfully. What attracted you to this job? Here, the interviewers are typically trying to know if you understand the position you’re applying for, and that your goals and experience align with the role. Always remember that employers value candidates who aim to meaningfully contribute to company goals while also advancing their own careers. Where do you see yourself in five years? This is a growth-oriented question. So, if you just simply say: “I see myself sitting around here for the next five years until I figure out what I want to do”, that’s not what they want to hear. You should align this question to where the company is going and then you talk about how you see yourself fitting in their future. Why are you applying for this job? Here the interviewers want to know if you know their core values. A lot of people make mistakes answering this question and say that they are applying for the job because of the compensation package. Of course, salarie and benefits are an important thing, but you should have a long-term goal you want to achieve from the job! So it’s better to make sure this goal alligns with the company’s goals. That is what they want to hear from you. Why do you want to work here? The key to answering this question is to align yourself with where this company is going, so that’s why you must do some research on the company, like what are their values? What is their mission? Where are they going? What do they want to do? And by doing that, that will make you appear to be someone who can contribute to their overall mission, their projects, or whatever it is they’re trying to do. What makes you a good fit for this job? Here, they want you to talk about your past experiences, your past education, the kinds of things that you have done that are related to the kinds of things that they're looking for. So, you have to get a lot of information about the position, the job description, what they're looking for, and what the goals are for this position. Why should we hire you? I guarantee you are probably going to get asked this question, but it will most likely come near the end of the interview, after they’ve had a chance to build up some rapport and they’re actually thinking that you might be a good fit. Now, this is the chance to sell yourself, but you have to understand what they are looking for and the pains and problems that they have. Do you have any questions? This is usually the last question, and I made it the last one for a reason because this is most likely the last question they're going to ask you. Now that's your opportunity to find out more about what the next steps are, where they're going, or whatever is important for you. Don't just ask them questions to ask questions. Ask them questions that will help you determine whether this is a place that you want to be. Don't just ask questions about their organization chart or their finances or things that just don't really pertain to you. Ask them questions that are going to help you make a decision about whether you want to work there....

Nov 11, 2021

5 mins

General

7 Tips to be a Successful Developer in a Remote Company

When the pandemic hit in March of 2020, most companies were forced to go remote and millions of workers had to learn how to work from home. Two years later, a lot people now prefer the work from home option, and many job seekers are looking for remote-only companies to work for. For software developers, there are many advantages to working from home and still effectively working as a team to produce high quality results. But how can you be successful in a remote company? In this article, I will provide 7 tips on what it takes to be a successful developer in a remote company. Communication is key It is now more important than ever to communicate effectively with your team. Now that everyone is working from home instead of being in one physical office, you have to be very conscious to reach out to teammates and share your progress on a project. In a physical office, you are surrounded by other co-workers all day, which makes it easier to walk over to someone's office and share what you have been working on. It also makes it easier to have impromptu meetings with other team members throughout the day. But in a remote setting, it is very easy to become isolated and get carried away with work without reaching out to anyone all day. This becomes an issue for your team, because now they are no longer keeping up to date on the latest changes you have been contributing to the project. My tip would be to post periodic updates throughout the day of what you have been working on. If your company is using something like Slack or another chat server, make sure to post a detailed update on what you have been up to the past few hours. Here is an example of one of the status updates I would post to my team. Status update: - finished making changes to xyz case study and put it up for review - reviewed a couple of PRs - ran accessibility audits for the homepage and working on increasing the performance score I would usually post this in the middle of the day to update the team on what I have been working on. I also try to ask questions throughout the day to ensure that I don't get blocked on a particular issue for to long. This method of communication helps me stay connected with the team and helps my manager know where I am at in the project. Find a separate space in your home just for work When you are working in an office, there is a clear separation between work and home. This makes it easier to end your day and leave your work at the office. But with remote work, sometimes these lines between work and home become a little bit blurry. This is why it is important to designate a separate work space in your home. In my situation, I have a small desk in another room where I do all of my work. That space is only used Monday through Friday for work purposes. I have found that by creating a work space, it allows me to be in the moment and fully concentrate on my duties. Then at the end of the day, I logout out of everything and leave the work space just like I would leave a physical business. That has given me freedom to relax in my home when I am not working and fully recharge for the next day. I understand that everyone's living situation is different, and you might not have room for a designated work area. In those cases, do the best you can to carve out some space in your living situation just for work. The more you can do to separate home and business, the more productive you will be at work. Set consistent work hours When you are working in an office, you have set hours for when you are going to be there. It might be 9-5 or 8-3 with breaks throughout the day. But when you are working from home, it is very easy to work without a set schedule and put in more time outside of the standard work hours. This can quickly lead to burnout which is a huge issue within the developer community. It is really important to set a consistent work schedule so your team knows when you are available, and when you are off work. This also forces you to work within a time frame which will lead to better focus, time management and productivity. I have personally found that setting that time frame from 8-5 with breaks helps me structure my day better and get more done than if I had an open schedule. Take breaks throughout the day Developer health is another huge issue within the community. Many developers, including myself have gone for hours hunched over their computers trying to get something to work. In these situations, it is very easy to lose track of time and develop back, neck, shoulder, and eye problems. One of the key advantages of working from home is being able to take breaks and leave your work space. Take ten minute breaks throughout the day and make sure to walk around, stretch, go outside, and drink water. Taking breaks from the computer will give your body and brain a chance to rest and recharge. When I first started working remotely, I would be glued to the computer for hours at a time. But I quickly felt the negative health effects and started becoming more intentional about taking breaks. Now, I have developed a healthier work situation and can see the difference in the quality of work I am producing. Dress appropriately for important meetings We all enjoy the relaxed dress code that often accompanies working from home. In an office, you will typically be in a more work appropriate attire especially when it comes to meetings with clients. But when you are at home, it is very easy to work in some sweatpants and a t shirt. If you don't have any meetings that day, then coding in your casual attire is fine. But if you are meeting with clients or interviewing remotely, it is important to dress appropriately. Remember that it is still a business and you want to be as professional as possible, even in a remote setting. Avoid mixing personal tasks and work tasks When you are in an office, you don't worry about personal chores like doing laundry or taking the trash out. But when you are working from home, it is very easy to get distracted and mix personal tasks with work tasks. It is very important that while you are working, you are focused on work. Then during breaks, you can take care of personal items. In my situation, I make sure to finish up the task I was working on and then take a break to put a load of laundry on or take care of another personal chore. There are definitely times where something has come up and I will make sure to communicate that with the team so they know I will be unavailable for a certain amount of time. But just try to do the best that you can separating personal tasks and issues from your work tasks. Time management and structuring your day In order to work productively, it is important to plan out your day as best you can and structure your time accordingly. For example, as I am writing this blog today, I made sure to set aside time for writing the first draft, revising it and submitting it for review. During that time block, I am not focused on other PR's or other work responsibilities. That ensures I am focused 100% on writing a high quality article. Once I complete a large task, then I make sure to take a break, hydrate, walk around and eat something. That allows me to energize and gear up for the next task in my day. I found that breaking up my day into manageable tasks has provided me the opportunity to focus and produce good work. Conclusion Those are my 7 tips on what it takes to be a successful developer in a remote company. I encourage you to give each of those tips a try and see how it affects your work productivity....

May 16, 2022

7 mins

General

What Sets the Best Autonomous Coding Agents Apart?

Must-have Features of Coding Agents Autonomous coding agents are no longer experimental, they are becoming an integral part of modern development workflows, redefining how software is built and maintained. As models become more capable, agents have become easier to produce, leading to an explosion of options with varying depth and utility. Drawing insights from our experience using many agents, let's delve into the features that you'll absolutely want to get the best results. 1. Customizable System Prompts Custom agent modes, or roles, allow engineers to tailor the outputs to the desired results of their task. For instance, an agent can be set to operate in a "planning mode" focused on outlining development steps and gathering requirements, a "coding mode" optimized for generating and testing code, or a "documentation mode" emphasizing clarity and completeness of written artifacts. You might start with the off-the-shelf planning prompt, but you'll quickly want your own tailored version. Regardless of which modes are included out of the box, the ability to customize and extend them is critical. Agents must adapt to your unique workflows and prioritize what's important to your project. Without this flexibility, even well-designed defaults can fall short in real-world use. Engineers have preferences, and projects contain existing work. The best agents offer ways to communicate these preferences and decisions effectively. For example, 'pnpm' instead of 'npm' for package management, requiring the agent to seek root causes rather than offer temporary workarounds, or mandating that tests and linting must pass before a task is marked complete. Rules are a layer of control to accomplish this. Rules reinforce technical standards but also shape agent behavior to reflect project priorities and cultural norms. They inform the agent across contexts, think constraints, preferences, or directives that apply regardless of the task. Rules can encode things like style guidelines, risk tolerances, or communication boundaries. By shaping how the agent reasons and responds, rules ensure consistent alignment with desired outcomes. Roo code is an agent that makes great use of custom modes, and rules are ubiquitous across coding agents. These features form a meta-agent framework that allows engineers to construct the most effective agent for their unique project and workflow details. 2. Usage-based Pricing The best agents provide as much relevant information as possible to the model. They give transparency and control over what information is sent. This allows engineers to leverage their knowledge of the project to improve results. Being liberal with relevant information to the models is more expensive however, it also significantly improves results. The pricing model of some agents prioritizes fixed, predictable costs that include model fees. This creates an incentive to minimize the amount of information sent to the model in order to control costs. To get the most out of these tools, you’ve got to get the most out of models, which typically implies usage-based pricing. 3. Autonomous Workflows The way we accomplish work has phases. For example, creating tests and then making them pass, creating diagrams or plans, or reviewing work before submitting PRs. The best agents have mechanisms to facilitate these phases in an autonomous way. For the best results, each phase should have full use of a context window without watering down the main session's context. This should leverage your custom modes, which excel at each phase of your workflow. 4. Working in the Background The best agents are more effective at producing desired results and thus are able to be more autonomous. As agents become more autonomous, the ability to work in the background or work on multiple tasks at once becomes increasingly necessary to unlock their full potential. Agents that leverage local or cloud containers to perform work independently of IDEs or working copies on an engineer's machine further increase their utility. This allows engineers to focus on drafting plans and reviewing proposed changes, ultimately to work toward managing multiple tasks at once, overseeing their agent-powered workflows as if guiding a team. 5. Integrations with your Tools The Model Context Protocol (MCP) serves as a standardized interface, allowing agents to interact with your tools and data sources. The best agents seamlessly integrate with the platforms that engineers rely on, such as Confluence for documentation, Jira for tasks, and GitHub for source control and pull requests. These integrations ensure the agent can participate meaningfully across the full software development lifecycle. 6. Support for Multiple Model Providers Reliance on a single AI provider can be limiting. Top-tier agents support multiple providers, allowing teams to choose the best models for specific tasks. This flexibility enhances performance, the ability to use the latest and greatest, and also safeguards against potential downtimes or vendor-specific issues. Final Thoughts Selecting the right autonomous coding agent is a strategic decision. By prioritizing the features mentioned, technology leaders can adopt agents that can be tuned for their team's success. Tuning agents to projects and teams takes time, as does configuring the plumbing to integrate well with other systems. However, unlocking massive productivity gains is worth the squeeze. Models will become better and better, and the best agents capitalize on these improvements with little to no added effort. Set your organization and teams up to tap into the power of AI-enhanced engineering, and be more effective and more competitive....

Jun 3, 2025

4 mins

Next.js Rendering Strategies and how they affect core web vitals

When it comes to building fast and scalable web apps with Next.js, it’s important to understand how rendering works, especially with the App Router. Next.js organizes rendering around two main environments: the server and the client. On the server side, you’ll encounter three key strategies: Static Rendering, Dynamic Rendering, and Streaming. Each one comes with its own set of trade-offs and performance benefits, so knowing when to use which is crucial for delivering a great user experience. In this post, we'll break down each strategy, what it's good for, and how it impacts your site's performance, especially Core Web Vitals. We'll also explore hybrid approaches and provide practical guidance on choosing the right strategy for your use case. What Are Core Web Vitals? Core Web Vitals are a set of metrics defined by Google that measure real-world user experience on websites. These metrics play a major role in search engine rankings and directly affect how users perceive the speed and smoothness of your site. * Largest Contentful Paint (LCP): This measures loading performance. It calculates the time taken for the largest visible content element to render. A good LCP is 2.5 seconds or less. * Interaction to Next Paint (INP): This measures responsiveness to user input. A good INP is 200 milliseconds or less. * Cumulative Layout Shift (CLS): This measures the visual stability of the page. It quantifies layout instability during load. A good CLS is 0.1 or less. If you want to dive deeper into Core Web Vitals and understand more about their impact on your website's performance, I recommend reading this detailed guide on New Core Web Vitals and How They Work. Next.js Rendering Strategies and Core Web Vitals Let's explore each rendering strategy in detail: 1. Static Rendering (Server Rendering Strategy) Static Rendering is the default for Server Components in Next.js. With this approach, components are rendered at build time (or during revalidation), and the resulting HTML is reused for each request. This pre-rendering happens on the server, not in the user's browser. Static rendering is ideal for routes where the data is not personalized to the user, and this makes it suitable for: * Content-focused websites: Blogs, documentation, marketing pages * E-commerce product listings: When product details don't change frequently * SEO-critical pages: When search engine visibility is a priority * High-traffic pages: When you want to minimize server load How Static Rendering Affects Core Web Vitals * Largest Contentful Paint (LCP): Static rendering typically leads to excellent LCP scores (typically < 1s). The Pre-rendered HTML can be cached and delivered instantly from CDNs, resulting in very fast delivery of the initial content, including the largest element. Also, there is no waiting for data fetching or rendering on the client. * Interaction to Next Paint (INP): Static rendering provides a good foundation for INP, but doesn't guarantee optimal performance (typically ranges from 50-150 ms depending on implementation). While Server Components don't require hydration, any Client Components within the page still need JavaScript to become interactive. To achieve a very good INP score, you will need to make sure the Client Components within the page is minimal. * Cumulative Layout Shift (CLS): While static rendering delivers the complete page structure upfront which can be very beneficial for CLS, achieving excellent CLS requires additional optimization strategies: * Static HTML alone doesn't prevent layout shifts if resources load asynchronously * Image dimensions must be properly specified to reserve space before the image loads * Web fonts can cause text to reflow if not handled properly with font display strategies * Dynamically injected content (ads, embeds, lazy-loaded elements) can disrupt layout stability * CSS implementation significantly impacts CLS—immediate availability of styling information helps maintain visual stability Code Examples: 1. Basic static rendering: ` 2. Static rendering with revalidation (ISR): ` 3. Static path generation: ` 2. Dynamic Rendering (Server Rendering Strategy) Dynamic Rendering generates HTML on the server for each request at request time. Unlike static rendering, the content is not pre-rendered or cached but freshly generated for each user. This kind of rendering works best for: * Personalized content: User dashboards, account pages * Real-time data: Stock prices, live sports scores * Request-specific information: Pages that use cookies, headers, or search parameters * Frequently changing data: Content that needs to be up-to-date on every request How Dynamic Rendering Affects Core Web Vitals * Largest Contentful Paint (LCP): With dynamic rendering, the server needs to generate HTML for each request, and that can't be fully cached at the CDN level. It is still faster than client-side rendering as HTML is generated on the server. * Interaction to Next Paint (INP): The performance is similar to static rendering once the page is loaded. However, it can become slower if the dynamic content includes many Client Components. * Cumulative Layout Shift (CLS): Dynamic rendering can potentially introduce CLS if the data fetched at request time significantly alters the layout of the page compared to a static structure. However, if the layout is stable and the dynamic content size fits within predefined areas, the CLS can be managed effectively. Code Examples: 1. Explicit dynamic rendering: ` 2. Simplicit dynamic rendering with cookies: ` 3. Dynamic routes: ` 3. Streaming (Server Rendering Strategy) Streaming allows you to progressively render UI from the server. Instead of waiting for all the data to be ready before sending any HTML, the server sends chunks of HTML as they become available. This is implemented using React's Suspense boundary. React Suspense works by creating boundaries in your component tree that can "suspend" rendering while waiting for asynchronous operations. When a component inside a Suspense boundary throws a promise (which happens automatically with data fetching in React Server Components), React pauses rendering of that component and its children, renders the fallback UI specified in the Suspense component, continues rendering other parts of the page outside this boundary, and eventually resumes and replaces the fallback with the actual component once the promise resolves. When streaming, this mechanism allows the server to send the initial HTML with fallbacks for suspended components while continuing to process suspended components in the background. The server then streams additional HTML chunks as each suspended component resolves, including instructions for the browser to seamlessly replace fallbacks with final content. It works well for: * Pages with mixed data requirements: Some fast, some slow data sources * Improving perceived performance: Show users something quickly while slower parts load * Complex dashboards: Different widgets have different loading times * Handling slow APIs: Prevent slow third-party services from blocking the entire page How Streaming Affects Core Web Vitals * Largest Contentful Paint (LCP): Streaming can improve the perceived LCP. By sending the initial HTML content quickly, including potentially the largest element, the browser can render it sooner. Even if other parts of the page are still loading, the user sees the main content faster. * Interaction to Next Paint (INP): Streaming can contribute to a better INP. When used with React's <Suspense />, interactive elements in the faster-loading parts of the page can become interactive earlier, even while other components are still being streamed in. This allows users to engage with the page sooner. * Cumulative Layout Shift (CLS): Streaming can cause layout shifts as new content streams in. However, when implemented carefully, streaming should not negatively impact CLS. The initially streamed content should establish the main layout, and subsequent streamed chunks should ideally fit within this structure without causing significant reflows or layout shifts. Using placeholders and ensuring dimensions are known can help prevent CLS. Code Examples: 1. Basic Streaming with Suspense: ` 2. Nested Suspense boundaries for more granular control: ` 3. Using Next.js loading.js convention: ` 4. Client Components and Client-Side Rendering Client Components are defined using the React 'use client' directive. They are pre-rendered on the server but then hydrated on the client, enabling interactivity. This is different from pure client-side rendering (CSR), where rendering happens entirely in the browser. In the traditional sense of CSR (where the initial HTML is minimal, and all rendering happens in the browser), Next.js has moved away from this as a default approach but it can still be achievable by using dynamic imports and setting ssr: false. ` Despite the shift toward server rendering, there are valid use cases for CSR: 1. Private dashboards: Where SEO doesn't matter, and you want to reduce server load 2. Heavy interactive applications: Like data visualization tools or complex editors 3. Browser-only APIs: When you need access to browser-specific features like localStorage or WebGL 4. Third-party integrations: Some third-party widgets or libraries that only work in the browser While these are valid use cases, using Client Components is generally preferable to pure CSR in Next.js. Client Components give you the best of both worlds: server-rendered HTML for the initial load (improving SEO and LCP) with client-side interactivity after hydration. Pure CSR should be reserved for specific scenarios where server rendering is impossible or counterproductive. Client components are good for: * Interactive UI elements: Forms, dropdowns, modals, tabs * State-dependent UI: Components that change based on client state * Browser API access: Components that need localStorage, geolocation, etc. * Event-driven interactions: Click handlers, form submissions, animations * Real-time updates: Chat interfaces, live notifications How Client Components Affect Core Web Vitals * Largest Contentful Paint (LCP): Initial HTML includes the server-rendered version of Client Components, so LCP is reasonably fast. Hydration can delay interactivity but doesn't necessarily affect LCP. * Interaction to Next Paint (INP): For Client Components, hydration can cause input delay during page load, and when the page is hydrated, performance depends on the efficiency of event handlers. Also, complex state management can impact responsiveness. * Cumulative Layout Shift (CLS): Client-side data fetching can cause layout shifts as new data arrives. Also, state changes might alter the layout unexpectedly. Using Client Components will require careful implementation to prevent shifts. Code Examples: 1. Basic Client Component: ` 2. Client Component with server data: ` Hybrid Approaches and Composition Patterns In real-world applications, you'll often use a combination of rendering strategies to achieve the best performance. Next.js makes it easy to compose Server and Client Components together. Server Components with Islands of Interactivity One of the most effective patterns is to use Server Components for the majority of your UI and add Client Components only where interactivity is needed. This approach: 1. Minimizes JavaScript sent to the client 2. Provides excellent initial load performance 3. Maintains good interactivity where needed ` Partial Prerendering (Next.js 15) Next.js 15 introduced Partial Prerendering, a new hybrid rendering strategy that combines static and dynamic content in a single route. This allows you to: 1. Statically generate a shell of the page 2. Stream in dynamic, personalized content 3. Get the best of both static and dynamic rendering Note: At the time of this writing, Partial Prerendering is experimental and is not ready for production use. Read more ` Measuring Core Web Vitals in Next.js Understanding the impact of your rendering strategy choices requires measuring Core Web Vitals in real-world conditions. Here are some approaches: 1. Vercel Analytics If you deploy on Vercel, you can use Vercel Analytics to automatically track Core Web Vitals for your production site: ` 2. Web Vitals API You can manually track Core Web Vitals using the web-vitals library: ` 3. Lighthouse and PageSpeed Insights For development and testing, use: * Chrome DevTools Lighthouse tab * PageSpeed Insights * Chrome User Experience Report Making Practical Decisions: Which Rendering Strategy to Choose? Choosing the right rendering strategy depends on your specific requirements. Here's a decision framework: Choose Static Rendering when * Content is the same for all users * Data can be determined at build time * Page doesn't need frequent updates * SEO is critical * You want the best possible performance Choose Dynamic Rendering when * Content is personalized for each user * Data must be fresh on every request * You need access to request-time information * Content changes frequently Choose Streaming when * Page has a mix of fast and slow data requirements * You want to improve perceived performance * Some parts of the page depend on slow APIs * You want to prioritize showing critical UI first Choose Client Components when * UI needs to be interactive * Component relies on browser APIs * UI changes frequently based on user input * You need real-time updates Conclusion Next.js provides a powerful set of rendering strategies that allow you to optimize for both performance and user experience. By understanding how each strategy affects Core Web Vitals, you can make informed decisions about how to build your application. Remember that the best approach is often a hybrid one, combining different rendering strategies based on the specific requirements of each part of your application. Start with Server Components as your default, use Static Rendering where possible, and add Client Components only where interactivity is needed. By following these principles and measuring your Core Web Vitals, you can create Next.js applications that are fast, responsive, and provide an excellent user experience....

May 30, 2025

9 mins

NextJS

Let's innovate together!

We're ready to be your trusted technical partners in your digital innovation journey.

Whether it's modernization or custom software solutions, our team of experts can guide you through best practices and how to build scalable, performant software that lasts.