Introducing NextMaster
An open-source ecommerce @nextjs template inspired by McMaster-Carr, optimized for performance with over 1 million products.
A thread on how I built this with @rhyssullivan and @ksw_arman 🧵
(video is not sped up)
An open-source ecommerce @nextjs template inspired by McMaster-Carr, optimized for performance with over 1 million products.
A thread on how I built this with @rhyssullivan and @ksw_arman 🧵
(video is not sped up)
https://twitter.com/KennethCassel/status/1847034096062710087
First, check it out for yourself:
It features 1 million AI-generated products, with login, search,
categories, cart, and other features to mimic the original website's complexity.next-master.vercel.app
It features 1 million AI-generated products, with login, search,
categories, cart, and other features to mimic the original website's complexity.next-master.vercel.app
Major kudos, respect, and appreciation for the McMaster-Carr team. What they built is incredible.
It was interesting to learn their perf techniques and see how they applied to Next.js.
So, how is ours so fast?
It uses many of the same optimizations the original site does, but where the McMaster devs hand wrote these with jquery, Next.js automates a lot of this for you with strong defaults.
The site heavily uses Partial Prerendering, where the static 'shell' of a dynamic page is prerendered at build time and served immediately on request, with the dynamic parts streamed in.
Our site also avoids loading spinners entirely- something the original actually has quite a lot of
It was interesting to learn their perf techniques and see how they applied to Next.js.
So, how is ours so fast?
It uses many of the same optimizations the original site does, but where the McMaster devs hand wrote these with jquery, Next.js automates a lot of this for you with strong defaults.
The site heavily uses Partial Prerendering, where the static 'shell' of a dynamic page is prerendered at build time and served immediately on request, with the dynamic parts streamed in.
Our site also avoids loading spinners entirely- something the original actually has quite a lot of
Check out this difference between our site and the original:
The original has a flash of the 'default' content, and waits to fetch the data from the client
Ours has no flash, starts the fetch on the server and streams it to the client as soon as its ready
The original has a flash of the 'default' content, and waits to fetch the data from the client
Ours has no flash, starts the fetch on the server and streams it to the client as soon as its ready
Images are everything for sites like this. We spent a ton of time on image optimization—mostly around loading strategies.
In order to push the limits, we don't just prefetch HTML content, but we also prefetch the images of pages.
Check out this side by side demo to see what a difference prefetching makes in reducing flashing
In order to push the limits, we don't just prefetch HTML content, but we also prefetch the images of pages.
Check out this side by side demo to see what a difference prefetching makes in reducing flashing
Additionally, we made things feel even faster by triggering links `onMouseDown`, as opposed to the default: `onMouseUp`.
Our storage layer is powered by Neon Postgres through Vercel, Vercel KV, and Vercel Blob.
We used @v0 to scaffold many of the initial UIs for the project- most often by just providing a screenshot of the original and asking for a recreation:
• Home/product page ui - v0.dev/chat/vAPl132ZV…
• Login page ui - v0.dev/chat/tijwMFByN…
• Cart page ui - v0.dev/chat/RTBa8dXhx…
Our storage layer is powered by Neon Postgres through Vercel, Vercel KV, and Vercel Blob.
We used @v0 to scaffold many of the initial UIs for the project- most often by just providing a screenshot of the original and asking for a recreation:
• Home/product page ui - v0.dev/chat/vAPl132ZV…
• Login page ui - v0.dev/chat/tijwMFByN…
• Cart page ui - v0.dev/chat/RTBa8dXhx…
All of the over 1 million products (present in a live Postgres db) on the site were generated using gpt-4o-mini via the OpenAI batch API with the Vercel AI SDK
Images were generated with stable-diffusion-v1-5
AI is an incredible tool to simulate a large real world dataset like this.
Images were generated with stable-diffusion-v1-5
AI is an incredible tool to simulate a large real world dataset like this.
Thanks to @cramforce, @wyatt, @styfle from the Vercel team who provided advice and mentorship throughout the process
It was great learning about all these optimizations and being able to figure out what can be contributed back into Next.js to make it fast for everyone
Source: github.com/ethanniser/Nex…
It was great learning about all these optimizations and being able to figure out what can be contributed back into Next.js to make it fast for everyone
Source: github.com/ethanniser/Nex…
• • •
Missing some Tweet in this thread? You can try to
force a refresh
