I'm a React Developer and I joined Next.js project for 6 month, which developed a new web application from scratch. I summarized good points for me through the project.
server side rendering (SSR) and static site generation (SSG) capabilities ◦ Can switch these strategies (including client side rendering) per page ◦ Allows you to develop more scalable and flexible application with React
traditional React application) Server send client JavaScript only (Also Provides small HTML,CSS But not complete ) HTML CSS Client contrcuts HTML, (CSS) to show user dynamically JS JS
traditional React application) Huge bundle JS, slow render on first serve Server send client JavaScript only (Also Provides small HTML,CSS But not complete ) HTML CSS Client constructs HTML, (CSS) to show user dynamically JS Huge JS
HTML CSS JS JS HTML CSS JS HTML CSS First arrive On page transition within app JS CSS HTML CSS JS Server sends additional data JSON Render new page on client side runtime
UserProfilePage = ({ user }) => { return ( <Layout> <UserBasicProfile user={user} /> <UserContact user={user} /> </Layout> ); }; export const getServerSideProps = (ctx) => { const userId = ctx.query.id; const user = fetch(`/users/${userId}`); return { props: { user } }; }; export default UserProfilePage; getServerSideProps is called in server to get props for page component On first arrives Pass props to component and render on server side On page transition within app Send props to client
default Code splitting Bundled JS So, need to pay attention to code splitting Initial JS Additional JS Load everything on access Load a part of codes on access Load the rest when need
default And pre-fetch additional code for the pages whose links current page has Allow the client to switch page fast Code splitting JS for index JS for about On access to index Load automatically Index page Link to about
runtime So you can start project without independent API Styling and UI library Can use css-in-js library (e.g. styled-components) But need setting for SSR Supports local css importing (v9.3, 20th March 2020)
CSS JS Only if cache is expired JS HTML CSS Cached data JS HTML CSS Cached data Return data from cache If cache is expired, render on server side in background
use in many cases Server Side Generating Doesn’t change many times and depends on external data sources (e.g. Contact, FAQ page) Incremental Static Regeneration The page many users access to (e.g. index)
Many plugins and themes If you want to develop small static site quickly, Gatsby.js is better But if you want to use SSR and develop with flexibility Next.js is better