InRhythm

Your partners in accelerated digital transformation

Web Development

Revolutionizing Web Development: Backend Server-Side Rendering Strategies With Next.js

Based on a Lightning Talk by:  Paul Pladziewicz, Senior Software Engineer @ InRhythm on August 29th 2023, as part of this summer’s InRhythm Propel Summit 2023

Overview

Design Credit: Joel Colletti, Lead UI/UX Designer @ InRhythm

In today’s rapidly evolving digital landscape, web applications need to strike a delicate balance between user experience and technical performance. This is where backend server-side rendering (SSR) steps in as a game-changing solution. 

In this article, we’ll explore the intricacies of implementing backend SSR with Next.js, uncovering its benefits and how it aligns with the InRhythm Propel Summit’s Web Workshop insights on web application development:

  • Overview
  • The Power Of Backend Server-Side Rendering
  • Setting Up Next.js For Backend SSR
  • Strategies For Effective Backend SSR
  • Best Practices 
  • Connecting With InRhythm’s Propel Summit Workshop
  • Closing Thoughts

The Power Of Backend Server-Side Rendering

Backend Server-Side Rendering is a technique that allows web servers to pre-render JavaScript components on the server side before sending them to the client’s browser. This approach provides several advantages over traditional Client-Side Rendering (CSR):

  • Improved Perfromance

Backend SSR reduces the initial load time by delivering fully-rendered HTML to the client.

  • SEO Optimization

Search engines can easily index Backend SSR pages, improving your site’s search engine rankings.

  • Better User Experience

Faster page loading and interactivity lead to an improved user experience.

Setting Up Next.js For Backend SSR

To get started with Backend SSR in Next.js, you’ll need to set up your project:

  • Create a Next.js App

You can create a new Next.js app using the official boilerplate. Run ‘npx create-next-app my-app’ to initialize your project.

  • Routing

Next.js uses file-based routing. Create a ‘pages’ directory and add your routes as files. For example, ‘pages/index.js’ maps to the root URL (‘/’).

  • Components

Build your React components as usual, ensuring they are exportable and reusable.

  • Data Fetching

For Backend SSR, you’ll need to fetch data on the server side. You can use the ‘getServerSideProps’ function provided by Next.js to fetch data before rendering.

Strategies For Effective Backend SSR

  • Cache Management

Caching is crucial for Backend SSR to prevent redundant server-side rendering. Implement caching mechanisms like Redis or in-memory caching to store pre-rendered pages.

  • Load Balancing

Distribute Backend SSR requests evenly across multiple server instances using load balancers. This ensures optimal performance and scalability.

  • Code Splitting

Leverage code splitting techniques to load only the necessary JavaScript bundles for each page. This reduces the initial load time.

  • Optimize Images

Use responsive image libraries like ‘next/image’ to optimize and lazy-load images for different screen sizes, reducing page load times.

Best Practices

  • Error Handling

Implement error handling to gracefully handle Backend SSR errors without crashing the entire application.

  • CSS Styles

Use CSS-in-JS libraries like ‘styled-components’ or ‘emotion’ for Backend SSR-compatible styles.

  • Security

Ensure your Backend SSR implementation is secure. Sanitize user inputs, validate data, and use security headers.

  • Testing

Write comprehensive tests for Backend SSR components to catch regressions early.

  • Monitoring

Set up monitoring and logging to track Backend SSR performance and errors in real-time.

Connecting With InRhythm’s Propel Summit Workshop

Design Credit: Joel Colletti, Lead UI/UX Designer @ InRhythm

The recent Propel Summit’s Web Workshop hosted by InRhythm delved into the transformative potential of backend server-side rendering with Next.js. Attendees gained practical insights into integrating backend SSR, harnessing its capabilities to enhance their web applications’ responsiveness and user engagement.

Closing Thoughts

Backend server-side rendering with Next.js marks a significant advancement in web application development. By leveraging its capabilities, developers can achieve the delicate balance between user experience and technical performance. As showcased in the InRhythm Propel Summit’s Web Workshop, backend SSR empowers developers to build applications that are not only visually engaging but also responsive and optimized for SEO. Embrace this technology to take your web applications to new heights of performance and user satisfaction.

Boosting Web Performance: A Deep Dive Into Next.js 13’s Performance Improvements And Best Practices

Based on a Lightning Talk by: Bhavan Kuchibhotla, Lead Web Engineer @ InRhythm on August 17th, 2023

Overview

In the ever-evolving realm of web development, performance remains a cornerstone of user satisfaction. With the release of Next.js 13, developers have been gifted a toolbox of performance enhancements and best practices that promises to elevate user experiences to unprecedented heights.

In Bhavan Kuchibhotla’s Lightning Talk session, we will delve into the heart of Next.js 13, exploring its revolutionary performance improvements and the best practices that can amplify your web applications’ speed and responsiveness.

The Need For Lightning Fast Performance

In a digital landscape where seconds can make or break user engagement, performance optimization stands as a non-negotiable factor. Next.js 13 shines as a beacon of innovation, placing speed and responsiveness at the forefront.

Automatic Prefetching: Navigating At The Speed Of Thought

Concurrent rendering is a performance game-changer introduced in Next.js 13. By allowing multiple tasks to be executed concurrently, even during resource-intensive computations, the framework ensures that user interactions remain fluid and the interface responsive. This is an essential leap forward for applications that require real-time updates and complex calculations.

Code Splitting: Loading Only What’s Needed

Code splitting, a technique to load only the necessary code for each page, has received a significant upgrade in Next.js 13 with automatic code splitting. This feature analyzes routes and dynamically splits code, ensuring that users are only presented with the code they need, resulting in faster initial load times.

Static Site Generation (SSG): Serving Speed And SEO

Next.js 13’s enhanced Static Site Generation (SSG) capabilities offer the ability to generate pre-rendered pages during build time. This leads to improved performance and search engine optimization (SEO), as users receive pre-rendered content, resulting in faster load times and better ranking potential.

Efficient Image Loading: Delivering High-Quality Visuals

Images are integral to web content, but they can also be performance bottlenecks. Next.js 13’s image optimization automates image formats and sizes based on user devices, ensuring fast loading without compromising quality.

Closing Thoughts

Next.js 13 isn’t just an update; it’s a glimpse into the future of performance-driven web development. With automatic prefetching, concurrent rendering, and adherence to best practices, developers can create web experiences that captivate users with speed, responsiveness, and visual excellence. As we journey towards a web world that demands seamless experiences, Next.js 13 stands as a testament to innovation and the boundless potential it holds.

By embracing Next.js 13’s performance enhancements and aligning with its best practices, developers can engineer websites that excel in both user experience and search engine rankings. In an era where milliseconds count, Next.js 13 empowers developers to navigate the fast-paced digital landscape with confidence.

Mastering Next.js: Building Powerful Web Applications With React

Based on InRhythm’s upcoming Web Workshop as part of our The Road To InRhythm’s Summer Propel Summit 2023 series.

Overview

We are pleased to announce the upcoming InRhythm Propel Summit for Summer 2023, a premier event designed to foster continuous learning and growth for your engineering teams. Over the next three weeks, we will be featuring a series of interactive coding workshops that delve into the latest technology trends and tools, designed to propel the learning and growth of engineering teams around the world.

In this workshop, we will explore Next.js, its key features, architecture, benefits, and best practices to unleash the full potential of this powerful framework.

Our Web Practice will be featuring the following InRhythm thought leadership lineup on Tuesday, August 29th, 2023 @ 12PM EST as part of their seasonal programming:

  • “Migrating from React to Next,” Hosted By Senior Software Engineer, Kevin Mongiello
  • “Page-Speed, SEO, and Performance Optimizations,” Hosted By Lead Web Engineer, Bhavan Kuchibhotla
  • “Mastering the Next Backend,” Hosted By Senior Software Engineer, Paul Pladziewicz 

If you’d like to learn more and attend this workshop, please RSVP through our Summit-exclusive Participant Form. After you fill out your guest request, you will receive a Calendar invite from our summit@inrhythm.com email address. Please be sure to check your Spam folder in case there was an Inbox filtering issue. You will receive this confirmation within 24-48 hours from your form submittal. If you have any questions, please don’t hesitate to reach out to us at summit@inrhythm.com.

Mastering Next.js: Building Powerful Web Applications With React

Next.js has rapidly gained popularity as a powerful framework for building modern web applications with React. Offering server-side rendering, automatic code splitting, and simplified routing, Next.js provides developers with a solid foundation to create performant, SEO-friendly, and scalable applications. 

  • Overview
  • Understanding Next.js
  • Benefits Of Next.js
  • Next.js Architecture
  • Best Practices For Next.js Development
  • Next.js Ecosystem And Tooling
  • Closing Thoughts

Understanding Next.js

  1. What Is Next.js?

Next.js is a React framework that enables server-side rendering (SSR) and simplifies the development of complex web applications.

  1. Key Features
  • Server-side rendering: Next.js allows rendering React components on the server, improving initial page load times and SEO performance
  • Automatic code splitting: Next.js intelligently splits JavaScript bundles, ensuring that only the required code is sent to the client, optimizing load times
  • Routing: Next.js provides a straightforward routing system that simplifies URL-based navigation in a React application
  • Static site generation (SSG): Next.js enables the generation of static HTML files at build time, offering performance benefits for content-driven websites

Benefits Of Next.js

  • Improved Performance

Next.js optimizes performance by rendering content on the server, reducing the time to first meaningful paint and improving SEO rankings.

  • Simplified Development

Next.js abstracts away complex configuration and provides a structured development environment, enabling developers to focus on building application features.

  • Scalability

Next.js applications can scale easily due to automatic code splitting and optimized server rendering, allowing for efficient resource utilization.

  • SEO-Friendly

With server-side rendering and static site generation capabilities, Next.js ensures that search engines can index the application content effectively.

Next.js Architecture

  • Pages

Next.js uses a file-based routing system, where each file in the “pages” directory represents a route in the application. This simplifies the creation of routes and enables automatic code splitting.

  • Server-Side Renderings (SSR)

Next.js leverages React’s server-side rendering capabilities to pre-render pages on the server, delivering initial content directly to the client.

  • Data Fetching

Next.js provides several methods for fetching data, including getStaticProps, getServerSideProps, and getStaticPaths, to retrieve data at build time, runtime, or for dynamic paths.

  • Dynamic Routing

Next.js allows dynamic route generation by using brackets ([ ]) in the file name to define dynamic segments in the URL.

Best Practices For Next.js Development

  • File Organization

Organize Next.js files into logical directories, following a modular approach for components, pages, styles, and utilities.

  • Code Splitting

Leverage Next.js’s automatic code splitting to ensure that JavaScript bundles are optimized for fast load times.

  • Lazy Loading

Utilize React’s lazy loading capabilities to dynamically load components only when necessary.

  • Server-Side Data Fetching

Determine the appropriate data fetching method (getStaticProps, getServerSideProps, or getStaticPaths) based on the nature of the data and performance requirements.

  • Optimizing SEO

Use Next.js’s built-in features like server-side rendering and static site generation to optimize the application for search engine indexing.

  • Caching And CDN

Utilize caching mechanisms and Content Delivery Networks (CDNs) to cache static assets and optimize content delivery for improved performance.

Next.js Ecosystem And Tooling

  • Next.js Plugins And Extensions

Next.js has a vibrant ecosystem of plugins and extensions that enhance its capabilities. Explore popular plugins like next-auth for authentication, next-i18next for internationalization, and many more.

  • TypeScript Support

Next.js has excellent TypeScript support, allowing developers to build type-safe applications and take advantage of TypeScript’s benefits, such as enhanced developer productivity and fewer runtime errors.

  • Deployment Options

Next.js applications can be deployed to various platforms, including serverless environments like Vercel (formerly Zeit Now), traditional servers, or containerized solutions like Docker.

  • DevTools And Debugging

Next.js integrates seamlessly with popular development tools like React DevTools and VSCode, providing powerful debugging and development experiences.

Closing Thoughts

Next.js empowers developers to build performant, SEO-friendly, and scalable web applications with React. By leveraging its server-side rendering, automatic code splitting, and simplified routing capabilities, developers can create delightful user experiences and optimize application performance. With a strong ecosystem, excellent tooling, and a focus on developer productivity, Next.js continues to be a go-to framework for modern web development.

What You Can Expect From React 18

Based on a Lightning Talk by: Godfrey Best, Senior Software Engineer @ InRhythm on March 29th, 2023 as part of the Propel Spring Quarterly Summit 2023

Author: Paris Leach, Senior Software Engineer @ InRhythm

Overview

Recently we had an exciting Lightning Talk led by Godfrey Best, who walked us through the changes introduced by React 18.

React 18 ushers in structural changes to the library that will help developers create more performant applications. Among these changes are the highly anticipated concept of concurrent rendering, which gives the developer fine-grain control over how their components render. We will discuss these changes at a (mostly) high level, in the hopes that you walk away from this article with a solid understanding of the changes that this version introduces.

What Is React?

Before we dive into React 18, we’re going to take a brief look at what React is for those who are not familiar. Feel free to skip this section if you already have a good grasp of React.

React is, succinctly, a JavaScript library for building user interfaces. It was created at Meta in 2011 (many of you will remember that it was called Facebook, at the time) and open sourced in 2013. It swiftly became the most popular frontend library/framework.

It provides a declarative, component-based API so that you don’t need to worry about page changes on every update. You pass data to the components, and React determines how they should render. React renders a Virtual DOM (not to be confused with the Shadow DOM), listens for changes in component data, and by default re-renders only those components whose data has changed.

React data is generally passed unilaterally (from parent to child, and not vice-versa), and is usually either a component property (data that is passed from a parent to a child) or a part of component state (internal data that belongs to a specific component and can only be directly changed by that same component).

For most of React’s lifespan, it has relied on synchronous rendering, which means that once an application has begun rendering, the user must wait for the render to be completed before they can interact with the components (these render methods and their callbacks are pushed to JavaScript’s single-threaded call stack).

About Version 18

React 18 was released on March 29th, 2022, and among other changes, it adds features that allow the developer to switch from synchronous rendering to asynchronous rendering, or as React has coined it, concurrent features. This allows React to render and re-render its components outside of the call stack, unblocking the user’s opportunity to interact while the render process occurs. In addition, the developer can establish priority for certain renders, giving them more granular control over their applications. React concurrent features:

  • are opt-in (when upgrading to React 18, components are not automatically set to render concurrently)
  • are backwards compatible
  • employ reusable state
  • are interruptible

How Can We Use These New Features?

There are a number of new hooks introduced in React 18, most which are expected to be implemented by framework authors, such as Next.js, Hydrogen and Remix. A few of the new hooks made available are:

  • useId
    • Used for generating unique ids on both the client and server to prevent hydration mismatches
  • useInsertionEffect
    • Allows for CSS and JavaScript libraries to address performance issues while they are injecting styles during rendering
  • useSyncExternalStore
    • Allows external stores to support concurrent reads by forcing updates to the stores to be synchronous (useful for state management libraries like Redux)
  • useTransition
    • Allows the library’s authors to mark certain actions as low priority (such as switching between pages) *We’ll be taking a closer look at this hook later in the article

React 18 also splits the rendering API (ReactDOM) into 2 parts:

  • ReactDOM/client
  • ReactDOM/server

What Features Can We Use Today?

Not all of these features require time for frameworks (or us) to implement; some of them can be used today, out-of-box:

Automatic Batching

Before React 18, if you had multiple state updates that were called inside of a React event handler function, they would be batched automatically, and the component would only be re-rendered once. This formerly only applied to React state handlers, and not, for example, setTimeouts or native event handlers. React 18 changes this by automatically batching all state updates inside any function by default. This reduces unnecessary re-renders.

useDeferredValue()

This tells React to only render a value when it’s convenient, similar to debounce, though this feature has superior performance to the former. Unlike debounce, there is no fixed time delay before this fires; additionally, this can be interrupted and does not block user input.

useTransition()

This hook is similar to useDeferredValue(), except that it tells React to render a state update when it’s convenient. It can also show if a transition is pending, which is a useful status to have awareness of within your application.

Suspense For Data Fetching

This feature actually existed in previous versions of React, but it was only used for code splitting. In React 18, suspense is available for data fetching, allowing for a declarative fallback ui in scenarios when the application is waiting on an asynchronous action to complete.

Conclusion

React 18 brings some long awaited performance boons and quality-of-life improvements. The move away from synchronous to concurrent rendering is something React has been working on since 2017 and now developers can finally avail themselves of its benefits. React also has some future developments in the pipeline:

  • Rendering components offscreen, allowing a developer to prepare ui to render in advance of the ui being on the page
  • Improvements around suspense for data fetching, such as more exposed primitives to make it easier to access your data, as well as the ability to use the feature without a framework having to implement it
  • Server components (an experimental but upcoming feature), allowing developers to build apps spanning both the client and the server

Why You Should Migrate Away From AngularJS

Overview

With the legacy experience of the Angular Javascript framework, web developers have grown to lean on the framework as a go-to tool. Today, we wanted to go through a few of the reasons why you should look to migrate your existing AngularJS projects (any Angular release version under 2) to a more modern and actively supported framework (or library).

Even though AngularJS is a fantastic piece of technology that surely was top of its class when it came out (October 2010) and despite the fact that we’ve enjoyed working with its successor Angular.io (also known as Angular 2+), AngularJS has become outdated (EOL December 2021), and a risk to your company in a variety of different ways.

No alt text provided for this image
@2017, Scott Adams, Inc.

The framework has reached end of support (Version Support Status). This means that it has become read-only mode, therefore it will not be updated further. The framework has not been developed for over a year now (Release 1.8.2 happened in October 2020), and even though extended support was supposed to end mid-2021, it was extended to December 2021 due to the global pandemic. Here’s a blog post by the Angular team regarding discontinued long term support.

To add some support to the point, Angular was created and mainly maintained by Google. Google recognized the shortcomings of AngularJS, and completely rewrote it to release Angular.io. AngularJS only made it to version 1.8.3, however Angular.io has already made it to major version 13 (current at time of writing), with many more versions to come.

What Could Be Making You Hold On To Your Existing AngularJS Apps

No alt text provided for this image
@2016, Scott Adams, Inc.

Trust us, we’ve been there. You have a perfectly functioning application which needs little maintenance, and you have engineers who know it in and out already. Why invest a part of your budget in fixing something that’s not broken? Why bring in new people that don’t know the product? Why push your engineers to do something new/different to what they’ve been doing?

The Reasons

No alt text provided for this image
  • Technology: As stated earlier, AngularJS is outdated. This means that in its feature-set, performance, and just keeping up with latest developments in Javascript and the web browsers, AngularJS has clearly lagged behind, mainly due to the fact that it has been in maintenance mode and not actively developed on for years. If you stay on this framework, you won’t take advantage of the rapidly evolving web world, and the evolving smart devices, and their new features.
  • Support: As the framework is no longer maintained, any new issues or limitations you encounter will not only lack an answer/help from the AngularJS team (again, not supported anymore), you most probably also won’t have a huge community online to help you with it, like you would have with any modern framework. This could mean a longer time to fix issues that come up in your application, and a rough experience for your engineers and users.
  • Security: Perhaps the biggest reason why you should move away from AngularJS. Like any unsupported package out there, you won’t be protected when any new security exploits are identified, be it within the framework itself, or any of its thousands of dependencies and indirect dependencies (yes, your app can be exploited by vulnerabilities in the dependencies of the dependencies of AngularJS which is your app’s dependency… you get the point). Usually when something like this happens in an actively supported package, a fix will be published quite swiftly in response to it, or any dependency that includes the vulnerability will be updated with a newer version.
  • Talent: Not only do you want to provide the best possible experience for your users, but also for your app engineers. When you are trying to retain or expand your software team, AngularJS will weigh on any engineer’s decision. Engineers will want to work with quality, cutting edge technology. It is hard for engineers to get or even stay excited about working on a framework that has reached end of life. It will be much easier for you to retain and hire engineers if your apps run on modern technologies and following best practices and industry trends. I cannot stress how much easier it will be to fill open positions when your tech stack is attractive for the engineers. You can also think about what will happen once you actually find someone willing to do the job on your legacy system, they will play hard to get and you’ll end up paying more for an engineer that is probably not up to date on industry standards.
  • Business: For current technologies, the help you will get from the online community is massive, which speeds up the time it takes to fix and implement new features, and to resolve critical situations that may arise. Not only your engineers will be happier and more engaged in what they are doing, it also impacts your branding. Are you a company that invests in and works with the latest and greatest? Or a company that settles with whatever is there?

Closing Thoughts

No alt text provided for this image

With confidence, we have seen the impact that migrating legacy applications has had for many of our customers, and it is massive. Not only do applications come alive and look and feel more modern, but engineers come to work in a better mood and eager to get things done, and a true engineering culture is fostered.