🎨 Improve performance #1059

sanityv3/schemas/documents/route.tsx

@@ -118,6 +118,13 @@ export default (isoCode: string, title: string) => {
         type: 'excludeFromSearch',
         name: 'excludeFromSearch',
       },
+      {
+        type: 'boolean',
+        name: 'includeInBuild',
+        title: 'Include in static build',
+        description: 'Enable this if this route should be generated at build time',
+        initialValue: false,
+      },
     ],
     preview: {
       select: {

sanityv3/schemas/documents/routeHomepage.tsx

@@ -34,7 +34,13 @@ export default (isoCode: string, title: string) => ({
       readOnly: true,
       initialValue: { current: '/', _type: 'slug' },
     },
+    {
+      name: 'includeInBuild',
+      type: 'boolean',
+      initialValue: true,
+    },
   ],
+
   preview: {
     select: {
       title: 'content.title',

web/common/helpers/getPaths.ts

@@ -26,6 +26,23 @@ const getTopicRoutesForLocale = async (locale: string) => {
   )
   return data
 }
+const getTopicRoutesForLocaleToStaticallyBuild = async (locale: string) => {
+  const lang = getNameFromLocale(locale)
+  // Empty array as fallback for satelittes
+  const blacklist = topicSlugBlackList[lang as keyof typeof topicSlugBlackList] || []
+  const data: { slug: string; _updatedAt: string }[] = await sanityClient.fetch(
+    groq`*[_type match "route_" + $lang + "*" && (!(slug.current in $blacklist)) && includeInBuild && defined(slug.current) && !(_id in path("drafts.**"))][] {
+      _updatedAt,
+      "slug": slug.current,
+    }`,
+    {
+      lang,
+      blacklist,
+    },
+  )
+  console.log('data', data)
+  return data
+}
 
 const getDocumentsForLocale = async (type: 'news' | 'localNews' | 'magazine', locale: string) => {
   const lang = getNameFromLocale(locale)
@@ -64,6 +81,19 @@ export type PathType = {
   locale: string
 }
 
+export const getStaticBuildRoutePaths = async (locales: string[]): Promise<PathType[]> => {
+  const fetchPaths = locales.map(async (locale) => {
+    const pages = await getTopicRoutesForLocaleToStaticallyBuild(locale)
+    return pages.map((page) => ({
+      slug: page.slug.split('/').filter((p) => p),
+      updatedAt: page._updatedAt,
+      locale,
+    }))
+  })
+
+  return (await Promise.all(fetchPaths)).flat()
+}
+
 export const getRoutePaths = async (locales: string[]): Promise<PathType[]> => {
   const fetchPaths = locales.map(async (locale) => {
     const pages = await getTopicRoutesForLocale(locale)

web/components/src/Link/ButtonLink.tsx

@@ -29,7 +29,7 @@ export const ButtonLink = forwardRef<HTMLAnchorElement, ButtonLinkProps>(functio
   ref,
 ) {
   return (
-    <NextLink href={href} locale={locale}>
+    <NextLink href={href} locale={locale} prefetch={false}>
       <StyledButtonLink color="secondary" variant="outlined" ref={ref} {...rest}>
         {children}
       </StyledButtonLink>

web/components/src/Link/Link.tsx

@@ -117,13 +117,13 @@ export const Link = forwardRef<HTMLAnchorElement, LinkProps>(function Link(
 ) {
   if (variant === 'contentLink') {
     return (
-      <ContentLink href={href} ref={ref} {...rest}>
+      <ContentLink href={href} prefetch={false} ref={ref} {...rest}>
         {children} <Icon data={getIconData(type)} />
       </ContentLink>
     )
   } else if (variant === 'readMore') {
     return (
-      <ReadMoreLink href={href} ref={ref} {...rest}>
+      <ReadMoreLink href={href} prefetch={false} ref={ref} {...rest}>
         {children} <Icon data={getIconData(type)} />
       </ReadMoreLink>
     )
@@ -140,6 +140,7 @@ export const Link = forwardRef<HTMLAnchorElement, LinkProps>(function Link(
         } as CSSProperties
       }
       $textDecoration={underline ? 'underline' : 'none'}
+      prefetch={false}
       {...rest}
     >
       {children} {type === 'externalUrl' ? <Icon data={external_link} size={16} /> : null}

web/next.config.js

@@ -39,6 +39,16 @@ export default withBundle(
     experimental: {
       largePageDataBytes: 300 * 1000,
       scrollRestoration: true,
+      optimizePackageImports: [
+        '@components',
+        '@chakra-ui',
+        '@chakra-ui/skip-nav',
+        '@emotion/react',
+        '@emotion/styled',
+        '@equinor/eds-core-react',
+        '@equinor/eds-icons',
+        'hls.js',
+      ],
     },
     eslint: {
       // Warning: Dangerously allow production builds to successfully complete even if

web/pageComponents/cards/FeaturedEventCard.tsx

@@ -58,7 +58,7 @@ const FeaturedEventCard = ({ data, fitToContent = false, ...rest }: FeaturedEven
   const plainTitle = title ? toPlainText(title as PortableTextBlock[]) : ''
 
   return (
-    <StyledLink href={slug} {...rest}>
+    <StyledLink href={slug} {...rest} prefetch={false}>
       <StyledCard
         style={
           {

web/pageComponents/cards/MagazineCard.tsx

@@ -62,7 +62,7 @@ const MagazineCard = ({ data, fitToContent = false, ...rest }: MagazineCardProp)
   if (!thumbnail) return null
 
   return (
-    <StyledLink href={slug} {...rest}>
+    <StyledLink href={slug} prefetch={false} {...rest}>
       <StyledCard
         style={
           {

web/pageComponents/cards/NewsCard.tsx

@@ -52,7 +52,7 @@ const NewsCard = ({ data, fitToContent = false, ...rest }: NewsCardProp) => {
   if (!heroImage) return null
 
   return (
-    <StyledLink href={slug} {...rest}>
+    <StyledLink href={slug} prefetch={false} {...rest}>
       <StyledCard
         style={
           {

web/pageComponents/cards/SimpleCard.tsx

@@ -50,7 +50,7 @@ function getLink(linkData: MenuLinkData, label: string) {
 const SimpleCard = ({ data }: SimpleCardData) => {
   const { id, label, image } = data
   return (
-    <CardLink key={id} href={getLink(data, label)}>
+    <CardLink key={id} href={getLink(data, label)} prefetch={false}>
       <StyledCard
         style={
           {

web/pageComponents/cards/TopicPageCard.tsx

@@ -34,7 +34,7 @@ const TopicPageCard = ({ data, fitToContent = false, ...rest }: TopicPageCardPro
   const pageTitle = title ? toPlainText(title as PortableTextBlock[]) : ''
 
   return (
-    <StyledLink href={slug} {...rest}>
+    <StyledLink href={slug} prefetch={false} {...rest}>
       <StyledCard
         style={
           {

web/pageComponents/pageTemplates/newsroom/Hit.tsx

@@ -47,7 +47,7 @@ const Hit = ({ hit }: { hit: any }) => {
   const pageTitle = Array.isArray(hit.pageTitle) ? toPlainText(hit.pageTitle as PortableTextBlock[]) : hit.pageTitle
 
   return (
-    <StyledHitLink href={hit.slug}>
+    <StyledHitLink href={hit.slug} prefetch={false}>
       <article>
         <Date>{hit.publishDateTime && <FormattedDate datetime={hit.publishDateTime} uppercase />}</Date>
         <StyledHeading level="h3" size="md">

web/pageComponents/search/EventHit.tsx

@@ -47,7 +47,7 @@ const EventHit = ({ hit }: HitProps) => {
   // @TODO: A more generic Hit component for more than events. Or multiple components???
   return (
     <article>
-      <StyledHitLink href={slug}>
+      <StyledHitLink href={slug} prefetch={false}>
         {eventDate && <StyledFormattedDate datetime={eventDate} uppercase></StyledFormattedDate>}
         <HitHeading level="h2" size="sm">
           <Highlight hit={hit} attribute="title" />

web/pageComponents/search/MagazineHit.tsx

@@ -52,7 +52,7 @@ const MagazineHit = ({ hit }: HitProps) => {
 
   return (
     <article>
-      <StyledHitLink href={slug}>
+      <StyledHitLink href={slug} prefetch={false}>
         <HitHeading level="h2" size="sm">
           <Highlight hit={hit} attribute="pageTitle" />
         </HitHeading>

web/pageComponents/search/NewsHit.tsx

@@ -60,7 +60,7 @@ const NewsHit = ({ hit }: HitProps) => {
 
   return (
     <article>
-      <StyledHitLink href={slug}>
+      <StyledHitLink href={slug} prefetch={false}>
         {hit.publishDateTime && <StyledFormattedDate datetime={hit.publishDateTime} uppercase />}
         <HitHeading level="h2" size="sm">
           <Highlight hit={hit} attribute="pageTitle" />

web/pageComponents/search/TopicHit.tsx

@@ -37,7 +37,7 @@ const TopicHit = ({ hit }: HitProps) => {
   // @TODO: A more generic Hit component for more than events. Or multiple components???
   return (
     <article>
-      <StyledHitLink href={slug}>
+      <StyledHitLink href={slug} prefetch={false}>
         <HitHeading level="h2" size="sm">
           <Highlight hit={hit} attribute="pageTitle" />
         </HitHeading>

web/pageComponents/shared/Footer.tsx

@@ -144,7 +144,7 @@ const Footer = forwardRef<HTMLDivElement, FooterProps>(function Footer({ footerD
                 const icon = type === 'someLink' && someType ? getSomeSvg(someType) : null
 
                 return (
-                  <FooterLink key={id} href={url || getLink(link)}>
+                  <FooterLink key={id} href={url || getLink(link)} prefetch={false}>
                     {icon && <SomeIcon aria-hidden={true}>{icon}</SomeIcon>}
                     {label}
                   </FooterLink>

web/pageComponents/shared/Header.tsx

@@ -130,7 +130,7 @@ const HeadTags = ({ slugs }: { slugs: AllSlugsType }) => {
 const AllSites = () => {
   const allSitesURL = getAllSitesLink('external')
   return (
-    <StyledAllSites href={allSitesURL}>
+    <StyledAllSites href={allSitesURL} prefetch={false}>
       <FormattedMessage id="all_sites" defaultMessage="All Sites" />
     </StyledAllSites>
   )
@@ -172,7 +172,7 @@ const Header = ({ slugs, menuData }: HeaderProps) => {
             >
               {hasSearch && (
                 <ControlChild>
-                  <NextLink href="/search">
+                  <NextLink href="/search" prefetch={false}>
                     <StyledSearchButton variant="ghost_icon" aria-expanded="true" aria-label="Search">
                       <Icon size={24} data={search} />
                     </StyledSearchButton>

web/pageComponents/shared/Hero/LoopingVideo.tsx

@@ -1,10 +1,19 @@
-import { HLSPlayer } from '@components'
+import { HLSPlayer } from '../../../components/src/HLSPlayer'
 import { useSanityLoader } from '../../../lib/hooks/useSanityLoader'
 import styled from 'styled-components'
 import { LoopingVideoData, LoopingVideoRatio } from '../../../types'
+import dynamic from 'next/dynamic'
 
 const DEFAULT_MAX_WIDTH = 1920
 
+const DynamicHLSVideoComponent = dynamic<React.ComponentProps<typeof HLSPlayer>>(
+  () => import('../../../components/src/HLSPlayer').then((mod) => mod.HLSPlayer),
+  {
+    ssr: false,
+    loading: () => <p>Loading...</p>,
+  },
+)
+
 const Container = styled.div<{ $aspectRatio: LoopingVideoRatio }>`
   position: relative;
   ${({ $aspectRatio }) =>
@@ -27,7 +36,7 @@ const StyledFigure = styled.figure`
   position: absolute;
 `
 
-const StyledHLSPlayer = styled(HLSPlayer)`
+const StyledHLSPlayer = styled(DynamicHLSVideoComponent)`
   position: absolute;
   width: 100%;
   height: 100%;

web/pageComponents/shared/LocalizationSwitch.tsx

@@ -97,7 +97,7 @@ type LocaleLinkProps = {
 const LocaleLink: React.FC<React.PropsWithChildren<LocaleLinkProps>> = ({ href, title, locale, active, children }) => {
   if (!active) {
     return (
-      <StyledLink href={href} locale={locale} aria-label={title}>
+      <StyledLink href={href} locale={locale} aria-label={title} prefetch={false}>
         {children}
       </StyledLink>
     )

web/pageComponents/shared/LogoLink.tsx

@@ -29,7 +29,7 @@ type LogoLinkProps = AnchorHTMLAttributes<HTMLAnchorElement>
 
 export const LogoLink = ({ ...rest }: LogoLinkProps) => {
   return (
-    <StyledLogoLink href="/" aria-label="Equinor home page" {...rest} className="logo">
+    <StyledLogoLink href="/" aria-label="Equinor home page" {...rest} className="logo" prefetch={false}>
       <AlignedLogoSecondary />
     </StyledLogoLink>
   )

web/pageComponents/shared/VideoPlayer.tsx

@@ -1,17 +1,27 @@
 /* eslint-disable jsx-a11y/media-has-caption */
 import styled from 'styled-components'
+import dynamic from 'next/dynamic'
 import {
   VideoControlsType,
   VideoPlayerData,
   VideoPlayerRatios,
   VideoType,
   VideoDesignOptionsType,
 } from '../../types/types'
-import { BackgroundContainer, HLSPlayer } from '@components'
+import { BackgroundContainer } from '@components'
 import TitleText from '../shared/portableText/TitleText'
 import { urlFor } from '../../common/helpers'
 import IngressText from './portableText/IngressText'
 import { ButtonLink } from './ButtonLink'
+import { HLSPlayer } from '../../components/src/HLSPlayer'
+
+const DynamicHLSVideoComponent = dynamic<React.ComponentProps<typeof HLSPlayer>>(
+  () => import('../../components/src/HLSPlayer').then((mod) => mod.HLSPlayer),
+  {
+    ssr: false,
+    loading: () => <p>Loading...</p>,
+  },
+)
 
 const StyledHeading = styled(TitleText)`
   padding: 0 0 var(--space-large) 0;
@@ -84,7 +94,7 @@ const ButtonWrapper = styled.div`
   margin-bottom: var(--space-xLarge);
 `
 
-const StyledHLSPlayer = styled(HLSPlayer)`
+const StyledHLSPlayer = styled(DynamicHLSVideoComponent)`
   object-fit: cover;
   width: inherit;
 

web/pageComponents/topicPages/Breadcrumbs.tsx

@@ -94,7 +94,9 @@ export const Breadcrumbs = ({
           }
           return (
             <BreadcrumbsListItem key={item.slug}>
-              <StyledNextLink href={item.slug}>{item.label}</StyledNextLink>
+              <StyledNextLink href={item.slug} prefetch={false}>
+                {item.label}
+              </StyledNextLink>
             </BreadcrumbsListItem>
           )
         })}

web/pageComponents/topicPages/FullWidthVideo.tsx

@@ -1,6 +1,16 @@
 import { FullWidthVideoData, FullWidthVideoRatio } from '../../types/types'
 import styled from 'styled-components'
-import { BackgroundContainer, HLSPlayer } from '@components'
+import { BackgroundContainer } from '@components'
+import { HLSPlayer } from '../../components/src/HLSPlayer'
+import dynamic from 'next/dynamic'
+
+const DynamicHLSVideoComponent = dynamic<React.ComponentProps<typeof HLSPlayer>>(
+  () => import('../../components/src/HLSPlayer').then((mod) => mod.HLSPlayer),
+  {
+    ssr: false,
+    loading: () => <p>Loading...</p>,
+  },
+)
 
 const Container = styled.div<{ $aspectRatio: FullWidthVideoRatio }>`
   position: relative;
@@ -35,7 +45,7 @@ const StyledFigure = styled.figure`
   position: absolute;
 `
 
-const StyledHLSPlayer = styled(HLSPlayer)`
+const StyledHLSPlayer = styled(DynamicHLSVideoComponent)`
   position: absolute;
   top: 0;
   left: 0;

web/pages/[[...slug]].tsx

@@ -11,7 +11,7 @@ import { defaultLanguage } from '../languages'
 import Header from '../pageComponents/shared/Header'
 import { FormattedMessage } from 'react-intl'
 import getIntl from '../common/helpers/getIntl'
-import { getRoutePaths } from '../common/helpers/getPaths'
+import { getStaticBuildRoutePaths } from '../common/helpers/getPaths'
 import getPageSlugs from '../common/helpers/getPageSlugs'
 import { getComponentsData } from '../lib/fetchData'
 import { useContext, useEffect } from 'react'
@@ -123,7 +123,8 @@ export const getStaticProps: GetStaticProps = async ({ params, preview = false,
 }
 
 export const getStaticPaths: GetStaticPaths = async ({ locales = [] }) => {
-  const routePaths = await getRoutePaths(locales)
+  // Not changing getRoutePaths(locales) because its used in sitemap.xml
+  const routePaths = await getStaticBuildRoutePaths(locales)
 
   const paths = routePaths.map((path) => ({
     params: { slug: path.slug },