React vs. Next.js 12 vs. Next.js 13 and Next.js 14: Key Differences & Best Uses

NEXT JS 12 Working 

The Next 12 use page router. The data fetching is happen on the server so we call this server rendered page. The First Paint happens as soon as server sends the response to Client but the page is still not interactive. As React JS bundle is not loaded. After the React JS bundle is loaded the next js performs hydration. Hydration is the process where next js adds interactivity (event listeners) to your website.

NEXT JS 13 & 14 Working 

The Next 13 & 14 use  App router. In Next 13 & 14 by default Server Components are used and we have to use 

'use client' directive to indicate the component JS will be moved to client. Please check this example for more clarity. 

Suppose we have 200 components and each component uses 1MB of JS. Now we can divide components into two variants one is presentational which will only be used to display data and other are components which actually will be used for user interactions like button click. So 150 are for presentation purpose and each are of 1MB size which amounts to 150 MB and 50 are which will handle interaction so those components will have 50MB of size. So we will use ‘use client’ on 50 components only and That JS will be send to client and other 150MB we can save as they can just be used for presentational purposes. 

This way we can reduce the JS bundle size send to client and we will have faster interaction time.