Next.JS 13

[tlgimenes]

This is an RFC for migration to Next.JS 13 with the goal of drastically improving performance and overall ergonomics by using Server Components and Layouts.

TLDR

After this RFC:

1. Components will be revisited for becoming RSC (React Server Components)
2. A segment cookie will be created and middleware function will be used
3. Conditional routes for plps and cms pages.

Performance

Currently, our PSI performance is haunted by a huge TBT. This is because how React hydration works. Hopefully, Next.JS 13 and React 18 help solving this issue by the introduction of React Server Components (RSC).

With RSC, I hope to remove all components from the frontend except:

1. Login button
2. Minicart
3. Top Searches and autocomplete
4. Search filter on mobile.

With that said, we will have to rethink the ProductShelf. To make ProductShelf be able to render on the server, I propose the creation of a new cookie called fs_segment. This cookie will carry region/sales-channel/locale info and will be treated by a middleware.ts function, choosing which page to render for each user, making it possible to render shelfs on the server side.

CMS Integration and Routing

One of the issues we currently have is that the [...slug].tsx file maps on-to-one with categories on the VTEX platform. This is bad because, sometimes, the user wants to create and declare a new page on the CMS, like institutional page etc. To solve this issue, I propose using conditional routes so plps get detached from CMS pages.

[emersonlaurentino]

A segment cookie will be created and middleware function will be used

this is possible today without n13 right? what do you think about implementing all this in parts, starting with that?

[tlgimenes]

A segment cookie will be created and middleware function will be used

this is possible today without n13 right? what do you think about implementing all this in parts, starting with that?

I think so. We can do it in parallel!

[eduardoformiga]

Hey, what about we use the new https://nextjs.org/blog/next-13#data-fetching, one flexible way to fetch, cache, and revalidate data at the component level, along with middleware to generate tailored components/pages for each user?

[teobler]

Hi, thanks for update, any update on Nextjs13 'app' folder?