Performance Optimizing for Web applications

Next.js's dynamic works seamlessly with SSR, provides more configuration options and automatically handles loading states.

import dynamic from 'next/dynamic';

// This component will only be loaded when it's actually rendered
const HeavyComponent = dynamic(() => import('../components/HeavyComponent'), {
  loading: () => <div>Loading...</div>,
  // Disable SSR for components that don't need it
  ssr: false
});

function ProductPage() {
  return (
    <div className="container">
      <h1>Product Details</h1>
      <HeavyComponent />
    </div>
  );
}

Angular: Using lazy loading with ViewContainerRef

const { HeavyComponent } = await import('./heavy.component');
this.viewContainerRef.createComponent(HeavyComponent);

Next.js's use next/font/foogle

import { Inter } from 'next/font/google';

// Load Inter font with subset optimization
const inter = Inter({
  subsets: ['latin'],
  display: 'swap',
});

export default function MyApp({ Component, pageProps }) {
  return (
    <main className={inter.className}>
      <Component {...pageProps} />
    </main>
  );
}

Angular standard approach.

 @import url('https://fonts.googleapis.com/css2?family=Inter&display=swap');

The Sitecore JSS SDK provides a specialized NextImage component that combines the performance benefits of Next.js image optimization with Sitecore's media handling capabilities:

import { NextImage } from '@sitecore-jss/sitecore-jss-nextjs';

const MyComponent = (props) => (
  <div>
    <NextImage
      field={props.fields.image}
      editable={false}
      unoptimized={true}
      imageParams={{ mw: 100, mh: 50 }}
      height="50"
      width="94"
    />
  </div>
);

export default MyComponent;

For more details on all available options and additional examples, refer to the complete documentation on configuring the NextImage component.

Angular's standard approach:

    import { Image } from '@sitecore-jss/sitecore-jss-angular'

    @Component({
      template: `
        <sc-image [imageField]="fields.image"
                  width="50"
                  height="94">
        </sc-image>
      `
    })

The following is an abbreviated example of a Horizontal Image Scroller component that uses next/link within a custom component:

import React, { useRef, useState } from 'react'
import { 
  StyledGridWrapper, CarouselItemView, CarouselItemEdit 
} from './horizontal-image-scroller.styles'
import { useSitecoreContext } from '@sitecore-jss/sitecore-jss-nextjs'
import { Image } from '@sitecore-jss/sitecore-jss-nextjs'
import SectionHeader from '@components/common/section-header/section-header'
import Link from 'next/link'

const HorizontalImageScroller = ({ fields, params }) => {
  // Process items from Sitecore datasource
  const items = fields.data.datasource.children.results.map((r, idx) => ({
    ...r,
    _idx: idx + 1,
    _clone: false,
  }))

  const { sitecoreContext } = useSitecoreContext()
  const [clonesCount, setClonesCount] = useState(null)
  const refShouldCancelClick = useRef(false)
  
  // Create clones for infinite scrolling effect
  let clonesBefore = []
  let clonesAfter = []
  
  if (clonesCount !== null && clonesCount > 0) {
    // Clone creation logic for infinite scrolling
    // ...abbreviated for example
  }

  // Prevent link navigation during scroll/drag interactions
  const onLogoLinkClick = (ev) => {
    if (refShouldCancelClick.current) {
      ev.preventDefault()
    }
  }

  // Choose the right carousel item component based on editing mode
  const CarouselItem = sitecoreContext.pageEditing ? CarouselItemEdit : CarouselItemView

  return (
    <StyledGridWrapper backgroundColor={params?.BackgroundColor}>
      <SectionHeader
        subtitle={fields.data?.datasource?.subHeadingField?.subHeading}
        heading={fields.data?.datasource?.headingField?.heading}
        // Additional props abbreviated
      />
      
      <div className="scroller-container">
        {[...clonesBefore, ...items, ...clonesAfter].map((brand, index) => (
          <CarouselItem
            key={index}
            data-logo-index={brand._idx}
            data-is-clone={brand._clone}
          >
            {/* Using next/link for carousel items */}
            <Link
              href={sitecoreContext.pageEditing ? '#' : `${brand?.linkField?.link?.value.href}`}
              onClick={onLogoLinkClick}
              draggable={false}
            >
              <Image
                field={brand.imageField.image}
                alt={brand.linkField.link.value.text}
                draggable={false}
              />
            </Link>
          </CarouselItem>
        ))}
      </div>
      
      {/* Footer and CTA button abbreviated */}
    </StyledGridWrapper>
  )
}

export default HorizontalImageScroller

Angular's standard approach:

    import { RouterLink } from '@angular/router'

    @Component({
      template: `
        <a [routerLink]="fields.link.value.href"
          [target]="fields.link.value.target">
          {{fields.link.value.text}}
        </a>
      `
    })