Please enable JavaScript.
Coggle requires JavaScript to display documents.
NextJS : - Coggle Diagram
NextJS :
Create a Next.js App
page based routing and dynamic routes
SSG and SSR per page basis
code splitting
client side routing with optimized prefetching
css and sass
fast refresh
api routes to build api endpoints with serverless
How Next.js works
Introduction
When your code runs
Build Time vs Runtime
Where rendering happens
Client vs Server
The environment where your code runs
Development vs Production
Development and Production Environments
How this applies to Next.js
Dev
Typescript, ESLint integration, Fast Refresh
prod
Make code performant and accessible
Going from dev to prod
Compile
to be compiled to JS that browsers can understand
Bundle
Resolving dependencies and multiple files/modules , components into fewer files to reduce the number of request for files from client to server
Minified
Remove unnecessary code format, spaces, comments. without changing functionality
Increase performance by reducing file size
Code split
Lazy load to avoid huge initial load
Dynamic imports using next/dynamic
React.lazy() with Suspense
Avoid re downloading the code shared between multiple pages
preloading the pages the users are likely to navigate
Build Time and Runtime
Series of steps that prepare the code for production
creating optimized files to be deployed to the server
HTML
JS code for server rendering
JS code for client rendering
CSS files
Server vs client
Rendering
React code to HTML
Can happen at
Build time
Or on every request
Three types of Rendering
Server side rendering
Pre rendering
Static site generation
Client side rendering
Client side rendering
Default react app
Client Receives an empty HTML
JS instructions to construct the UI
Can opt for client side rendering using useEffect() or data fetching hook such as useSWR
Pre rendering
Will send a constructed HTML
SSR
HTML
JSON data
JS instructions to make page interactive
React makes UI interactive with JSON data and JS instrucitons
Hydration
getServerSideProps
What is React Server Components?
SSG
Complete HTML is generated at build time and stored in CDN
like blogs
Incremental Static Regeneration - avoids rebuild of the entire site
What is Network?
Network - linked computers (or servers) which can share resources
Code can be distributed to
origin servers
CDNs
the Edge
Origin servers
when it receives a request it does some computation and send a response
the response can be moved to a CDN
CDN
store static content - html and images
multiple locations around world and placed between client and server
cache
the closest CDN can respond with the cached result
makes the app faster
The Edge
Both caching and code execution can be done closer to the user
reduces latency
Edge can be run with middleware in next and soon with server components