General

How to Build and Grow Your Career Through Networking

Published Apr 8, 2022

Updated Feb 13, 2023

5 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.

When we think about advancing in a software career, we often focus on what we need to do from a technical perspective.

We tend to focus on taking classes, learning new technologies, tackling harder projects in hopes of leveling up as a developer.

But are there other things we are not considering when it comes to building a successful career as a software engineer?

Should we also be focusing on networking and building connections?

What does it really mean to network,and does it actually work?

In this article, I will talk about the power of building meaningful relationships in this industry, and how it can help you achieve your career goals.

What is networking?

The word "networking" often has negative connotations assigned to it. Sometimes people only view networking as "using people for personal gain", or "kissing up to people in exchange for a favor".

People also have the belief that you have to be an extrovert to be able to network properly, and introverts will not be successful in it. But that is not the case at all. I have met plenty of people who were successful in building a network, and classify themselves as introverted.

Networking is the process of building meaningful connections. Good networking involves connecting with someone in a genuine way, and building a relationship over time. Once you have developed a relationship, you can work together to advance your careers.

These relationships can introduce you to opportunities you never knew existed. Your network may also be happy to vouch for you at their current companies, and talk you up to other developers in their inner circles.

How networking helped me in my career

Before I became a software developer, my previous career was in music. I had never coded a day in my life before June 2020, and didn't know the first thing about how to break into the industry.

I decided to teach myself how to code and join a few online communities. I quickly found the value of being involved with a community because I was able to learn from other developers, and understand how the industry worked. My community was able to help me stay away from toxic environments, and provide me with helpful resources that I still use today. My network introduced me to technical writing and software opportunities that I didn't know where possible.

I took the time to learn about the industry, and build relationships with great people. We were able to help each other learn about new opportunities, celebrate each other's wins, support each through the tough times, and help each other grow.

Now that we understand what networking is and why it is important, we need to look at ways to build out a network.

Using Twitter to build a network

Twitter can be a great way to build connections and meet new people in the tech industry. Here are some ways to build connections using Twitter.

Twitter Spaces

Twitter spaces are live audio conversations shared by a group of people. There is a person hosting the space, and a group of speakers discussing a preplanned topic. Listeners also have the opportunity to request to speak, and join in on the conversation.

The topics range from career development, mental health, freelancing, technical writing, web 3, machine learning, and more. These spaces can be as little as 10-20 people or 500+ people.

If you find a space that you are interested in, take a listen and make note of who the speakers are. Give them a follow on Twitter, read up on their profile and reach out through direct message.

In your private message, open with introducing yourself and thanking them for the great advice during the recent Twitter space. Then if you have any follow up questions from the space, drop them in the message.

That could be a great way to initiate a conversation, and you would be surprised how many people will respond back. I have connected with dozens of developers, technical writers, content creators and recruiters through Twitter spaces. Private messaging them was my way to make an initial connection, and we were able to build a relationship from there.

Out of those relationships I have been able to build out my online presence which has led to paid technical writing jobs, podcast appearances, and insider information for new career opportunities.

There have been plenty of times where I have shared other people's articles, courses and open source projects through my personal Twitter account. People put a lot of time and effort into creating good content for the community.

When you take the time to show genuine appreciation for someone else's work, they will take notice of that. You can accomplish this by retweeting's someone else's post with your own commentary, or creating your own post and tagging them in it.

I have personally retweeted and promoted other people's content and had positive responses back. This was also a way for me to initiate a conversation with them and connect with them further on other topics.

Using meetups and online tech communities to build connections

Joining a tech community can be a great way to build relationships. The key is finding a community that is a right fit for you.

My suggestion would be to try out a few different online communities, and see what works for you. You will find some communities to be very active and welcoming while others are toxic.

Once you find a few communities that you enjoy, try to reach out to a few of the members. Learn about their stories and connect with them through private chat. Maybe even try to set up a short meeting with them to ask a few questions or discuss a particular topic.

Most people will be receptive to you reaching out as long as you keep your questions specific and you ask for a short meeting (think 15-20 minutes). If your approach is too vague or open ended, people will be hesitant to respond.

There is a diverse array of communities that range from web development, data science, game development and more. You can even find communities geared towards specific cultures, genders, and other demographics.

It is important to remember that not everyone you reach out to will respond back. It is possible that they were busy, and missed your message or are simply not interested in connecting. Try not to take it personally and keep reaching out to other people. There will be plenty of people that do want to connect with you and share their stories.

Conclusion

There are plenty of ways to connect with other people in the tech industry that can be beneficial for your career growth. Try to explore a variety of online and offline venues to meet new people and connect. Social media platforms, meetups, and conferences are just a few places to build connections and grow relationships over time.

I am someone who transitioned from being a classical musician to working as a software developer in large part because of my network. They were very supportive of my software journey and I was supportive of theirs. We continue to help each other out, and support each other throughout our careers.

It doesn't matter if you are just starting out or 20 years in the industry, we all need a network of people around us to help us grow and thrive.

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.

About the author(s)

Jessica Wilkins
Jessica Wilkins is a classical musician turned Software Engineer. Prior to joining the tech industry, she spent her time running her own sheet music company (JDW Sheet Music) as well as performing and teaching in Los Angeles, CA. She enjoys working with React and TypeScript. She is also a prolific technical writer for freeCodeCamp.
@codergirl1991 @jdwilkin4

How to Write a Strong Resume That Will Be Read by Hiring Managers and Recruiters

Applying for software jobs can be stressful and time consuming. One of most stressful components is writing a resume. A lot of people struggle to write strong resumes and end up paying the price by getting passed over for tech interviews. In this article, I will provide tips on how to write a strong resume and how to avoid common mistakes made by applicants. What is the applicant tracking system? The applicant tracking system will collect and sort through thousands of resumes and help determine which ones match the job description posted. The program will look for keywords in the job listing and search for those keywords in the resume. If there are a lot of missing keywords and skills from your resume it will be rejected by the ATS software. But if your experience and skills match the job listing then it a recruiter or hiring manager will take a look. Why are ATS programs used? When companies post job listings online, they will often receive hundreds of resumes and it can be overwhelming for hiring managers to go through all of them. The role of the ATS program is to filter out applicants who don't meet the listed criteria for the job. How to get past the ATS programs When you are applying or jobs, it is important that you list of few key skills and keywords mentioned in the job listing so you will have a better chance of making it past the ATS program. It is best to tailor your resume for each job instead of sending out generic resumes to hundreds of companies. You should also use consistent formatting and use standard fonts like Helvetica, Garamond, or Georgia. Lastly, avoid using tables or columns because they don't always work best for ATS programs. How to format your file for ATS programs It is important to submit a resume in either a .docx or .pdf file so it can be easily read by ATS programs. Submitting our resume in a format that dosn't work well for ATS programs can lead to automatic rejection by the software. What to include on your resume Your resume should include these key sections: - Contact information - Summary - Education - Work experience - Software projects - Skills Contact information At the top of your resume, you should include your name, phone, email address and location. If you are in the United States, just list your City and State. If you are based elsewhere, just list your city and country. There is no reason to include your full mailing address on your resume because that could lead to privacy or even discrimination issues. You can also choose to list your GitHub profile or Linkedin profile under the contact section. If you have a website or portfolio, you can list that here as well. Summary Under your contact information, you can have a short 2-3 sentence summary. This is meant to be a section to explain why your experience and skills make you qualified for the job. Remember that recruiters and hiring managers will only spend a few seconds on your resume. Focus on making an impactful short summary that recruiters will want to read. Education If you have a degree, even if it is not in computer science, you should definitely list that on your resume. If you don't have a lot of work experience, it is ok to list your education at the top. But if you have some work experience, you will want to list that first. When it comes to online courses, I would suggest being selective about what to list. If you have AWS or Oracle certifications, then list those. But if you have a whole bunch of Udemy courses, then I would personally avoid listing those. There is nothing with Udemy courses, but it is important to remember that recruiters and hiring managers will place more weight on college degrees and certifications from large tech companies. Work experience When it comes to your work experience you want to focus on the contributions you made to the team and the value you brought to the company. Be specific about what you contributed to the projects because potential employers want to see what you can bring to their teams. Software Projects In this section, you want to focus on substantial side projects you have built and been involved with. Avoid listing every single small class project you did in an hour or so. Only list projects where you have invested significant amount of time and effort into. Remember that this is a chance to show off your skills. Skills When it comes to listing your skills, focus on the core soft skills and technologies you have worked with the most. Remember that any technology you list on your resume is fair game during a technical interview. If you haven't worked with that technology enough to be comfortable discussing it in an interview, then avoid placing it on your resume. Here are some free resumes templates you can look at to help you write your resume. - Taylor Desseyn's resume template - Arc's resume template Mistakes to avoid in your resume There are a few important mistakes you need to avoid doing in your resume to help ensure that it is not immediately rejected by potential employers. Spelling errors If your resume is filled with spelling errors, it sends the message that you produce sloppy work and don't care about the finished product. When you have finished a draft of your resume, make sure to read it out loud to catch obvious spelling and grammatical errors. Then share it with your friends, family and others in your network to look it over too. A fresh pair of eyes can help you catch errors that you might have missed the first time around. You can also use tools like Grammarly to help check your work. Aside from common spelling and grammatical errors, it is really important that you properly capitalize technologies. For example, if you are applying for a web developer position, please do not list "javascript" or "Javascript". The correct capitalization is "JavaScript". Triple check to make sure you are properly capitalizing the names of the technologies you are working with. Unprofessional email address When you are applying for these software jobs, you need to come across as a professional in every way possible. This includes having a professional email address. If you are still using an email address from high school like "awesompants@hotmail.com" or "ilove2party@aol.com" ,then please change that. It doesn't matter how good of a software engineer you are. If your email address is unprofessional, recruiters will throw your resume away. Take the time to set up a professional sounding email address so people will take you seriously. A good safe format would be your name followed by the email provider. For example: johndoe@gmail.com Head shots on a resume In the United States, it is not encouraged to include an image on your resume. Some recruiters and hiring managers will view that as unprofessional while others unfortunately will discriminate against you for your photo. Also, a lot of applicant tracking systems don't work well with images. It is best to leave it off your resume and just focus on your skills and experience. If recruiters or hiring managers really want to see an image, they can visit your Linkedin profile or other social media sites. Listing to many technologies on your resume If you are a software engineer with 15+ years of experience, it is expected that you will have worked with a variety of technologies. But if you are just starting out with very little work experience, avoid listing every single technology you have programmed "hello world" in. Listing dozens of technologies in a short time frame could come across as scattered and unfocused to a hiring manager. Make sure to just list the those you have built substantial projects with, or have worked with professionally. For example, I took a couple of classes early on that involved C and Python. But I don't list them on my resume because I only spent a few weeks on them and never built anything substantial. So I chose to only list technologies that I have worked with and am comfortable talking about in interviews. Summaries are to long Writing a short clear, and concise resume summary takes a lot of time and effort. A big mistake would be to write a summary that is too long and not filled with any substance. Keep your summaries to three sentences, and talk about the value you bring to companies. If recruiters or hiring managers see a summary that has multiple paragraphs, they will just skip over it. Avoid stuffing our resume with keywords just to pass the ATS software Some people will stuff their resume with keywords in an effort to get pass the ATS programs. The issue with that is when a recruiter or hiring mangers sees that, it will be obvious that the applicant is just stuffing their application with keywords. Avoid doing this practice because it usually leads to automatic rejections by hiring managers. Conclusion No one enjoys having to work on their resume but it is important part of the hiring process. Take the time to draft a strong resume and get feedback from friends and family before submitting it to potential employers....

Jul 15, 2022

7 mins

Career

How to Optimize Your Profile and Build a Developer Network on LinkedIn

LinkedIn is a social network where you can connect and build relationships with other professionals in your field. A strong developer profile can lead to potential job opportunities and more connections in this industry. But how do you go about optimizing your profile and building a developer network on LinkedIn? In this article, I will walk you through each of the sections for a LinkedIn profile and show you the best ways to optimize them. I will also share tips on how to build relationships with other developers on Linkedin. Table of contents - What title should you use on Linkedin? - How to optimize your profile and background images - Is it ok to not include a profile image? - Do I need a background image? - How to create a custom Linkedin URL - How to optimize your about section - How long should the about section be? - What is the features section in Linkedin? - How to optimize your experience section - Should you show unrelated tech experience on your Linkedin profile? - How to optimize your education section - Should you have recommendations on your profile? - Should you take Linkedin skills tests? - Exploring other sections of the Linkedin Profile - How to connect with other developers on Linkedin What title should you use on Linkedin? A lot of people will say that titles don't matter, but in reality titles do play a role in our society whether we like it or not. If you are currently working as a software developer, then your title can say Software Developer or Software Engineer at XYZ company. If you are a lead, staff engineer, senior, etc., then put that in your title. If you are looking for your first job, then use "Software Developer" and list the technologies you are comfortable with. You want to avoid titles like "Aspiring Developer" or "Soon to be Developer" because that may disuade potential employers from looking at you before they are given an opportunity to understand what you have accomplished as a web developer despite not yet finding a formal role. How to Optimize Your Profile and Background Images When it comes to your profile picture, it is important to remember that you are interacting with other professionals in your industry. You want to choose a clean head shot that would be acceptable in professional settings. Avoid using pictures of you partying in college, or pictures that don't even show your face. You don't need to spend tons of money on professional head shots. You can even have a friend or family member take a head shot of you wearing a nice shirt. Is it Ok to Not Include a Profile Image? If you want to optomize your profile, it is very important to include a profile image. A lot of hiring managers and recruiters are actively looking for developers and your profile image helps put a face to the skills and experience listed. By omitting that image, you might get passed over for potential opportunities. Do I Need a Background Image? A clean and simple background image can help your profile standout. Canva is a free design tool that you can use to create a Linkedin banner. They have dozens of free templates to choose from that you can customize and apply to your profile. Here is what my LinkedIn profile and banner image looks like. How to Create a Custom Linkedin URL Linkedin has a feature where you can customize your profile URL making it easier for people to find you. To learn how to create a custom URL, please read through this Linkedin article. When it comes to naming your URL, I would suggest keeping it short and simple. I would suggest using your name and occupation like this: How to Optimize Your About Section This section is your opportunity to provide a short background on who you are professionally. It is best to talk about the types of projects you have worked on and tools/languages you are most familiar with. It is also good to talk about how you are involved with the community. For example, you might want to highlight your participation in open source projects, or your experience as a content creator. Here is my current "About" section: "I am a classically trained musician turned software developer who enjoys building solutions to unique business problems. I primarily work with React and TypeScript to provide clean efficient solutions to build better software products. I am actively involved in giving back to the community by participating in open source projects like freeCodeCamp. I have also written over 100 technical articles on HTML, CSS, JavaScript, Python and career development." How Long Should the About Section Be? I personally like "About" sections that are a few sentences long. You can also have 2-3 paragraphs for your "About" section. However, I don't think it should be any longer than what can be read in a minute or two because the goal is to provide a brief overview of who you are, not a complete autobiography. What is the Features Section on Linkedin? This is a section on your Linkedin profile where you can show off some of your recent projects and articles. In my opinion, it can act as a small portfolio, and is often underutilized by software developers. Here is a screenshot of my features section. I chose to list my Black Excellence Music Project and a couple of my top performing freeCodeCamp articles. This is a visually appealing way to show potential employers and recruiters your top work. How to Optimize Your Experience Section This section should be reserved only for work experience. There are other sections in your Linkedin profile where you can add volunteer experience or education. Just like on a resume, you would place your most recent jobs first. Try to focus on highlighting significant contributions you made to the projects. Here is an example from my experience section on Linkedin. - Implemented a light/dark theme solution for the This Dot Labs website - Performed accessibility audits for the This Dot Labs website and provided solutions for increasing performance and accessibility scores - Performed extensive smoke testing for client applications and reported bugs and feature requests to the rest of the development team - Built out several UI examples for a client's documentation page If you have freelance experience, talk about the types of projects you built for them, and how you added value to their business. Should You Show Unrelated Tech Experience on Your Linkedin Profile? If you are a career changer like myself, there is nothing wrong with showing your previous work experience from another industry. That shows potential employers that you have worked in a professional setting before and have been gainfully employed for the past few years. As long as you place your relevant tech experience at the top, then you will be fine. How to Optimize Your Education Section If you have a college degree, even if it is not in computer science, definitely list that on your Linkedin profile. If you have certifications, like the AWS certification, then list those as well. There is some debate about whether or not to list certifications from online courses like Udemy. In my opinion, there is no harm in listing those, but it won't carry as much weight with employers and recruiters as AWS certifications, bootcamp certificates, or computer science degrees will. Should You Have Recommendations on Your Profile? Yes! When people can vouch for your work, it goes a long way with future employers and recruiters. This will be especially helpful for those looking for their first full time software job who have done contract work or freelance work in the past. Should You Take Linkedin Skills Tests? There is a section on Linkedin where you can take different skills tests in areas like HTML, CSS, JavaScript, etc. If you pass those tests, then you can list them on your profile. These skill tests don't hold a lot of weight with recruiters or potential employers because they will provide their own skills tests during the interview process. There is no harm in taking them if you want to, but doesn't add a whole lot to your profile. Exploring Other Sections of the Linkedin Profile We have covered all of the core sections of the Linkedin profile, but there are additional sections you can choose to add. Here are some sections you might consider exploring: - Volunteer experience - Projects - Organizations - Publications - Courses You can find all of these additional sections when you click on the "Add Profile" button at the top of your Linkedin profile. For more information and suggestions on how to optimize your profile, I suggest you watch Danny Thompson's Linkedin series on YouTube. How to Connect With Other Developers on Linkedin There are many ways to build out your network on Linkedin. One common way would be to send a connection request to another developer. If you have been following someones' work online, or previously connected through a conference or online meetup, it would be a good idea to connect with them on Linkedin too. Here is a sample message you can send along with your connect request. "Hi, this is Jessica Wilkins and I enjoyed talking with you at the last Women in Tech meetup. I would love to be able to connect with you here on Linkedin too." Now, when that person receives that connection request with a personalized message, they will be more inclined to accept. If you just send a connection request to a complete stranger without a personal message, then you will most likely be ignored. Another way to connect with developers, is by commenting on and sharing others' posts. If someone is sharing an article or posting a hot topic, feel free to jump in the conversation. If you really enjoyed the article, then share it and/or reach out through personal message letting the author know you enjoyed it. Those small gestures will go a long way to build connections over time. Conclusion I hope you enjoyed that article on optimizing your Linkedin profile and building connections with other developers. Linkedin is a very powerful tool and can help you advance in your career. If you are interested in connecting with me on Linkedin, then please visit my profile....

Jul 5, 2022

8 mins

Career

How to Resolve Nested Queries in Apollo Server

When working with relational data, there will be times when you will need to access information within nested queries. But how would this work within the context of Apollo Server? In this article, we will take a look at a few code examples that explore different solutions on how to resolve nested queries in Apollo Server. I have included all code examples in CodeSandbox if you are interested in trying them out on your own. Prerequisites This article assumes that you have a basic knowledge of GraphQL terminology. Table of Contents - How to resolve nested queries: An approach using resolvers and the filter method - A refactored approach using Data Loaders and Data Sources - What are Data Loaders - How to setup a Data Source - Setting up our schemas and resolvers - Resolving nested queries when microservices are involved - Conclusion How to resolve nested queries: An approach using resolvers and the filter method In this first example, we are going to be working with two data structures called musicBrands and musicAccessories. musicBrands is a collection of entities consisting of id and name. musicAccessories is a collection of entities consisting of the product name, price, id and an associated brandId. You can think of the brandId as a foreign key that connects the two database tables. We also need to set up the schemas for the brands and accessories. ` The next step is to set up a resolver for our Query to return all of the music accessories. ` When we run the following query and start the server, we will see this JSON output: ` ` As you can see, we are getting back the value of null for the brands field. This is because we haven't set up that relationship yet in the resolvers. Inside our resolver, we are going to create another query for the MusicAccessories and have the value for the brands key be a filtered array of results for each brand. ` When we run the query, this will be the final result: ` ` This single query makes it easy to access the data we need on the client side as compared to the REST API approach. If this were a REST API, then we would be dealing with multiple API calls and a Promise.all which could get a little messy. You can find the entire code in this CodeSandbox example. A refactored approach using Data Loaders and Data Sources Even though our first approach does solve the issue of resolving nested queries, we still have an issue fetching the same data repeatedly. Let’s look at this example query: ` If we take a look at the results, we are making additional queries for the brand each time we request the information. This leads to the N+1 problem in our current implementation. We can solve this issue by using Data Loaders and Data Sources. What are Data Loaders Data Loaders are used to batch and cache fetch requests. This allows us to fetch the same data and work with cached results, and reduce the number of API calls we have to make. To learn more about Data Loaders in GraphQL, please read this helpful article. How to setup a Data Source In this example, we will be using the following packages: - apollo-datasource - apollo-server-caching - dataloader We first need to create a BrandAccessoryDataSource class which will simulate the fetching of our data. ` We will then set up a constructor with a custom Dataloader. ` Right below our constructor, we will set up the context and cache. ` We then want to set up the error handling and cache keys for both the accessories and brands. To learn more about how caching works with GraphQL, please read through this article. ` Next, we are going to set up an asynchronous function called get which takes in an id. The goal of this function is to first check if there is anything in the cached results and if so return those cached results. Otherwise, we will set that data to the cache and return it. We will set the ttl(Time to Live in cache) value to 15 seconds. ` Below the get function, we will create another asynchronous function called getByBrand which takes in a brand. This function will have a similar setup to the get function but will filter out the data by brand. ` Setting up our schemas and resolvers The last part of this refactored example includes modifying the resolvers. We first need to add an accessory key to our Query schema. ` Inside the resolver, we will add the accessories key with a value for the function that returns the data source we created earlier. ` We also need to refactor our Brand resolver to include the data source we set up earlier. ` Lastly, we need to modify our ApolloServer object to include the BrandAccessoryDataSource. ` Here is the entire CodeSandbox example. When the server starts up, click on the Query your server button and run the following query: ` Resolving nested queries when microservices are involved Microservices is a type of architecture that will split up your software into smaller independent services. All of these smaller services can interact with a single API data layer. In this case, this data layer would be GraphQL. The client will interact directly with this data layer, and will consume API data from a single entry point. You would similarly resolve your nested queries as before because, at the end of the day, there are just functions. But now, this single API layer will reduce the number of requests made by the client because only the data layer will be called. This simplifies the data fetching experience on the client side. Conclusion In this article, we looked at a few code examples that explored different solutions on how to resolve nested queries in Apollo Server. The first approach involved creating custom resolvers and then using the filter method to filter out music accessories by brand. We then refactored that example to use a custom DataLoader and Data Source to fix the "N+1 problem". Lastly, we briefly touched on how to approach this solution if microservices were involved. If you want to get started with Apollo Server and build your own nested queries and resolvers using these patterns, check out our serverless-apollo-contentful starter kit!...

May 17, 2023

6 mins

GraphQL

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.