NextJS Is NOT Just About Routing
/pages Routes
NextJS helps with building
“fullstack React apps”
By default, NextJS pre-renders all
pages (~ server-side rendering: SSR)
Page Pre-Rendering
Request /some-route
Hydrate with React
Good for SEO! Return pre-rendered page
code once loaded
Page / App is
interactive
Two Forms of Pre-Rendering
Static Generation Server-side Rendering
Data is prepared before the page
is sent back to the client
Data fetching is NOT performed in
client-side code
Static Generation
Pre-generate a page (with data prepared on the
server-side) during build time
Pages are prepared ahead to time and can be
cached by the server / CDN serving the app
export async function getStaticProps(context) { … }
Server-side code is NOT included
in the client-side code bundle
Incremental Static Generation
Pre-generate Page
Re-generate it on every request,
at most every X seconds
Serve “old” page if re-generation Generate, store and serve “new”
is not needed yet page otherwise
Pre-Generated Paths (Routes)
Dynamic pages ([id].js etc) don’t just need data:
You also need to know which [id] values will be
available
Multiple concrete [id] page instances (e.g. id = 1, id
= 2 etc.) are pre-generated
export async function getStaticPaths() { … }
Server-side Rendering
Sometimes, you need to pre-render for every
request OR you need access to the request object
(e.g. for cookies)
NextJS allows you to run “real server-side
code” as well
export async function getServerSideProps(context) { … }
Client-side Data Fetching
Some data doesn’t need to be pre-
rendered
Data changing with high Highly user-specific data (e.g. Partial data (e.g. data that’s
frequency (e.g. stock data) last orders in an online shop) only used on a part of an page)
Pre-fetching the data for page generation might
not work or be required
“Traditional” client-side data fetching (e.g.
useEffect() with fetch() is fine)
