Slide 1
Slide 1 text
Have fun writing Web Application
with Next.js!
kourin
Slide 2
Slide 2 text
About me
Feel free to follow me on Twitter
@Kourin1996
Slide 3
Slide 3 text
What is Next.js?
Slide 4
Slide 4 text
What is Next.js ?
● A framework for React with 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
Slide 5
Slide 5 text
Differences of CSR (SPA), SSR, SSG
Client Side Rendering (SPA, 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
Slide 6
Slide 6 text
Differences of CSR (SPA), SSR, SSG
Client Side Rendering (SPA, 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
Slide 7
Slide 7 text
Differences of CSR (SPA), SSR, SSG
Server Side Rendering (SSR)
Server constructs HTML,CSS
on access
HTML
CSS
Client just render with received
HTML, CSS, JS
JS
JS
HTML
CSS
JS
HTML
CSS
First arrive runtime
Slide 8
Slide 8 text
Differences of CSR (SPA), SSR, SSG
Server Side Rendering (SSR)
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
Slide 9
Slide 9 text
Differences of CSR (SPA), SSR, SSG
Static Site Generating (SSG)
HTML
CSS
JS
Build-time
On access
HTML
CSS
JS
Server sends static data Render page
build-time
JS
HTML
CSS
Slide 10
Slide 10 text
Why we use Next.js ?
Slide 11
Slide 11 text
No problem with SPA
No need SSR, SSG
Slide 12
Slide 12 text
No,
Next.js is great tool for many use-cases
Slide 13
Slide 13 text
Next.js
solves common problems
we face on development with React
Slide 14
Slide 14 text
Routing
Slide 15
Slide 15 text
Routing
Even if you develop SPA, Routing is necessary part...
const AppRouter = ({ onChange }) => (
);
// Nested Router
const UsersRouter = () => (
<>
);
But
● Routing is not simple
● Need to consider lifecycle
on page transition
(Data fetch, Redirect, Reset
State, ...)
Slide 16
Slide 16 text
Routing
Next.js provides file system based router
src
└ pages
├ index.jsx
└ users
└ [id]
└ profile.jsx
/
/users
└ [id]
└ profile
File paths in project Routing paths
One jsx file, one page
Slide 17
Slide 17 text
Routing
Just add getServerSideProps in page component
// /src/pages/users/[id]/profile.jsx
const UserProfilePage = ({ user }) => {
return (
);
};
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
Slide 18
Slide 18 text
Routing
Just add getServerSideProps in page component
// /src/pages/users/[id]/profile.jsx
const UserProfilePage = ({ user }) => {
return (
);
};
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
Slide 19
Slide 19 text
Routing
Just add getServerSideProps in page component
// /src/pages/users/[id]/profile.jsx
const UserProfilePage = ({ user }) => {
return (
);
};
export const getServerSideProps = (ctx) => {
const userId = ctx.query.id;
const user = fetch(`/users/${userId}`);
return { props: { user } };
};
export default UserProfilePage;
React component doesn’t contain
Data fetch for initial contents
You don’t need to consider reset
state
Slide 20
Slide 20 text
Code splitting
Slide 21
Slide 21 text
In SPA, a huge bundled file will be loaded as 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
Slide 22
Slide 22 text
For code splitting on SPA, we use dynamic import, lazy load, and
suspense and set manually
Code splitting
import React, { Suspense } from 'react';
const LazyComponent = React.lazy(()
=> import('./LazyComponent'));
const Component () => {
return (
Loading...}>
);
};
Wrap component you want
to delay to render with lazy()
Wrap lazy component with
Suspense to show fallback
(e.g. Loading Spinner)
Slide 23
Slide 23 text
In Next.js, code will be splitted per page base as default
Code splitting
JS for
index
JS for
about
On access to index
On access to about
Slide 24
Slide 24 text
In Next.js, code will be splitted per page base as 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
Slide 25
Slide 25 text
Other features
API
You can create API running on next.js 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)
Slide 26
Slide 26 text
Other features
Development Experience
● Hot Reloading
● Visualized Debug Information
● Separated config
○ serverRuntimeConfig
○ publicRuntimeConfig
Slide 27
Slide 27 text
Other features
Incremental Static Regeneration (v9.5, 28th July 2020)
HTML
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
Slide 28
Slide 28 text
Summary
Next.js provides SSR, SSG
Also gives developer helpful features to solve annoying
common problems
Keeps code simple and allows developer to focus
developing what you want/need
Slide 29
Slide 29 text
Thank you for your attention
@Kourin1996
Slide 30
Slide 30 text
When to use SSR, SSG, ISR?
Server Side Rendering
Can 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)
Slide 31
Slide 31 text
Actual cases
Server Side Rendering
● User profile/Item page
○ Data changes frequently and update page
ASAP
Server Side Generating
● Personal Blog site
○ Limited pages and not update frequently
Slide 32
Slide 32 text
vs Gatsby.js
Gatsby.js is static site generator for React
● 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
Slide 33
Slide 33 text
Font: Cosmic Sans
#fef6e3 #69C2C7 #008899 #FFB284
Font: Verdana 1234