Phind's old look was modern but indistinctive

• Give the entire site a face lift.
• Reduce P75 page load times (Largest Contentful Paint) by almost 25%.
• Enable the richest Generative UI our new model could create.

Looksmaxing 101: Get Help from a Pro

Phind had a glow up

Performance Improvements

Layout and Rendering Issues

UI Streaming

1
2
3
4
5
6
7
const [isLoading, setIsLoading] = useState(true);

if (isLoading) {
  return <LoadingIndicator />;
}

return <DataHeavyComponent />;

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
import { Suspense } from 'react';

function Page() {
  return (
    <div>
      <Suspense fallback={<LoadingSkeleton />}>
        <DataHeavyComponent />
      </Suspense>
      <OtherContent />
    </div>
  );
}

async function DataHeavyComponent() {
  const data = await fetchData();
  return <div>{/* Render data */}</div>;
}

1
2
3
4
5
6
7
8
9
10
// app/page/loading.tsx
export default function Loading() {
  return <div>Loading...</div>;
}

// app/page/page.tsx
export default async function Page() {
  const data = await fetchData();
  return <YourComponent data={data} />;
}

Lazy Loading

1
2
3
4
5
6
7
8
9
10
11
import { lazy, Suspense } from 'react';

const HeavyComponent = lazy(() => import('./HeavyComponent'));

function MyComponent() {
  return (
    <Suspense fallback={<LoadingSkeleton />}>
      <HeavyComponent />
    </Suspense>
  );
}

Search Experience Optimization

1
2
3
useEffect(() => {
  prefetch('/search/[...id]');
}, []);

Migrating to the /app Router

• Server-centric routing
• Improved code locality
• Increased performance

Performance Metrics

• LCP (Largest Contentful Paint) by ~25%.
• FCP (First Contentful Paint) by ~20%.
• FID (First Input Delay) by ~25%.
• TTFB (Time to First Byte) by ~13%.

Streaming the Generative UI

1
2
3
4
5
6
7
<!-- Fictional tag names used for demonstration -->
<WEB_CITATION_META_DATA>
  Information about web citations and sources used in the answer
</WEB_CITATION_META_DATA>
<ANSWER_FORMAT_META_DATA>
  Information about the formatting and structure of the answer
</ANSWER_FORMAT_META_DATA>

Example of two GenUI components, each with nested content

• node_id: corresponding to an element in the GenUI
• type: the kind of mutation to be applied to the element. This could be adding new attributes or adding text. It can also denote that a node is done streaming.
• payload: the text associated with the mutation.

Shoutout to the Next.js Team

Found this Post Interesting? Come Work with Us

• ML Engineers
• Full-Stack Engineers
• Frontend Engineers