►
From YouTube: NextJS The Serverside React Framework - Daniel Edwards
Description
NextJS is a new a upcoming framework that puts a server-side rendering spin on ReactJS framework. While it is a powerful framework, it is not very well known. We have chosen to use NextJS as our primary front-end framework and we can definitely see the fruits of this choice such as better performance in terms of time to interactive among others. I will talk about why we have chosen NextJS, what projects we have used it in and show an analysis of the increased performance that the NextJS framework offers.
This talk was recorded at the Jozi.JS meetup group on 22 August 2019.
https://www.meetup.com/Jozi-JS/events/263022807/
Disclaimer: The opinions in this talk are those of the individual and do not necessarily represent those of this channel, the meetup group, or its sponsors.
A
So
it's
nuts
I'm
going
to
be
talking
about
the
suicide
rendered
react
framework
called
next
jeaious
and
I'll.
Give
you
just
a
brief
explanation
about
server-side
and
client-side
rating,
just
so
make
sure
you're
on
the
same
page,
and
this
will
also
help
us
understand
why
we
should
use
server-side
rendering
and
obviously
there
are
a
lot
of
different
server-side
and
client-side
frameworks,
but
we've
chosen
X,
J's
and
I'm
going
to
hopefully
show
you
why.
A
So
just
a
brief
introduction
about
myself.
I'm
a
software
engineer
and
I
worked
for
a
company
called
Tirat
II
now
I'm
one
of
the
founding
members-
and
we
started
the
company
at
the
beginning
of
this
year,
and
one
of
the
great
things
about
starting
a
company
is
that
you
get
to
choose
the
technology
that
you
want
to
use
which
is
really
exciting.
A
So
I
studied
adverts
and
I
finished.
My
engineering
degree
that
in
the
last
year
so
to
get
started.
I'll
just
give
you
a
brief
overview
of
what
next
is.
So
it's
fundamentally
a
react
framework,
and
then
you
add
some
spice
and
some
server-side
rendering
magic,
and
then
you
end
up
with
next
JS.
That's
the
gist
of
it,
and
so
what
this
really
means
is
that
next
Chase
is
a
pure
server-side
rendering
framework.
That's
both
for
react,
so
this
is
hopefully
now
we
can
go.
A
Look
at
some
things
that
clear
up
the
difference
between
server-side
and
client-side,
some
of
the
rendering
and
what
it
means
and
how
it
impacts
our
performance.
So,
in
the
first
scenario,
we're
gonna
look
at
some
client-side
rendering.
So
what
happens
in
the
user
first
sends
a
request
to
the
website.
It
just
returns.
A
It
saying:
hey,
listen,
I'm
here
and
then
downloads
all
the
JavaScript
that
they
need
from
the
server
and
then
the
page
begins
to
render,
and
once
all
of
this
is
complete,
the
user
can
eventually
see
the
page
and
what's
interesting
and
over
here,
that's
something
only
really
happens
with
the
user
at
the
very
last
stage.
So
there's
the
majority
of
these
steps,
the
user
doesn't
know
what's
happening
and
they're
just
waiting
for
something
to
happen.
A
So
if
we
take
a
little
bit
more
technical
view
of
what's
happening,
there
are
other
things
to
consider
so
you've
got
a
one
of
the
main.
Things
is
obviously
distance
between
the
two
devices,
the
physical
distance.
This
is
important
because
the
number
of
back-and-forth
transactions
means
increased
of
waste
waste
time
and
the
user
just
waiting
for
things
to
happen.
So
we
primarily
use
AWS
and
we
have
a
data
center
out
in
Frankfurt,
which
is
about
eight
thousand
seven
hundred
kilometres
away
and
say:
oh,
it's
not
exactly
a
cross
through
it.
A
So
it's
something
it's
definitely
used
to
be
considered,
so
you
can
see
from
a
client-side
draining
perspective.
The
browsers
will
send
a
request
to
the
server
and
there's
several
responds
back
with
an
empty
HTML
document.
The
server,
then,
is
the
browser,
then
requests
to
reach
the
data,
which
then
is
sent
back
over
that
channel
and
then
only
at
this
point
can
the
rangering
actually
start.
So
a
lot
of
lot
of
stuff
has
had
to
happen
before
we
can
get
to
a
point
where
you
can
start
making
our
page.
A
Now,
when
you
look
at
server-side
rendering
it's
it's
a
bit
different.
So
in
this
case
the
server
is
already
performed.
All
of
the
the
processing
and
operations
need
to
happen
to
generate
the
HTML
page,
and
so
it
sends
it
straight
to
the
browser,
and
now
the
browser
browser
receives
it.
Now,
it's
completely
viewable
so
that
the
user
gets
presented
with
a
page.
They
can
see
straight
away
after
that's
the
rest
of
the
javascript
is
downloaded
and
once
it's
downloaded
it
becomes
interactable.
So
now
the
user.
A
Can
you
strike
with
your
page,
and
so
what's
great
about
this?
Is
that
from
the
from
right
from
the
beginning,
the
user
can
see
the
page
they're
getting
something
and
they
can
really
experience
what
your
content
is
about.
So
if
you
do
the
same
thing
and
we
look
at
the
timing
diagram,
the
right,
the
browser
makes
a
request
and
it
immediately
satans
really
runs
all
the
computations
and
then
sends
it
back.
The
rendered
HTML
back
to
your
browser.
So,
as
you
can
see
it
already,
and
there
we
are,
we
can
see
it.
A
A
So
they
could
be
using
something
great
or
something
useless,
and
that's
something
that's
an
important
variable
at
it
would
be
great
if
you
could
could
if
you
could
control
and
so
that's
what
service
our
training
is
a
really
good
step
to
take
if
you're
looking
for
performance,
wise,
so
I
think
after
this
we
can
kind
of
agree
that
the
performance
makes
sense.
Three
bits
are
using
server-side
rendering,
and
this
means
that's
also.
A
The
the
user
gets
a
better
experience,
because
they're
not
waiting
six
years
for
the
page
to
Raph
and
also
you
know,
hindered
but
obviously
the
device,
the
users
devices
performance.
So
if
you're
not
hindered
by
the
device,
that's
quite
a
from
an
engineering
point
of
view.
That's
quite
a
nice
variable
that
you
control.
So
now,
if
we
take
a
look
at
the
framework
themselves,
so
I
mentioned
earlier.
That
mixture
is,
is
a
react
framework.
So
you
get
all
the
benefits
of
react.
A
Obviously,
it's
a
component
based
framework
which
is
great.
It
has
a
nice
tree
based
virtual
Dom,
which
makes
rendering
components
separately
really
great.
It
has
a
flexibility
of
being
client
side
or
server
side.
It's
usually
opted
for
client-side
rendering
because
of
the
just
the
independent,
independent,
independent
loading.
That
just
happens
at
the
same
time
like
if
you
look
on
Facebook
you'll,
see
that
the
your
newsfeed
and
your
chat
feature
will
update
so
somewhat
tenuously
is
because
they're
independent
and
that's
the
brilliance
of
the
component
based
nature
yeah.
A
A
bit
of
a
mission-
okay,
I'll,
just
talk
you
through
it,
doesn't
want
to
go
back
so
from
the
right
from
the
downside
of
react.
Is
that
there's
a
long
now
we're
all
going
all
the
way
wrong
way?
Okay
over
here?
Let's
start
so
it
will
react.
It's
there's
a
lot
of
painful
time
for
developers
a
lot
of
set-up
time
and
for
us
it
doesn't
really
particularly
work
because
you're
trying
to
optimize
our
turnaround
time
so
anytime
that
you're
spending
setting
up
is
just
wasting
our
money.
A
So
what's
the
from
the
digital
marketing
and
digital
waiting
as
friends
having
something
on
the
client-side,
is
you
struggle
with
it
with
SEO,
because
of
when
the
web
Quarters
comes
through?
You
don't
actually
have
HTML
to
crawl
through
you've
got
JavaScript
files,
so
the
only
really
company,
that's
and
facility
is
really
doing.
It
is
Google
which
they'll
search
through
some
of
your
JavaScript
files
to
find
your
content
search.
A
You
can
get
better
ranked
on
your
index
better,
so
next
days
should
be
an
improvement
on
react
and
at
least
in
some
of
the
cases,
otherwise
I've
just
wasted
all
our
events,
your
time.
So
when
dealing
with
next
chase,
the
one
thing
that
jumps
out
is
just
simplicity.
It's
absolutely
simple:
you
can
literally
get
a
project
running
up
and
running
in
five
minutes.
It's
1:00
in
p.m.
install.
A
A
Also,
your
routing
is
taken
care
of
the
way
you
structure
a
directory
of
your
pages,
the
determines
how
you,
how
your
joy,
your
routing
works,
so
you
create
an
index
page.
You
want
to
create
another
subdirectory,
you
do
it
add
another
javascript
file
in
and
it's
done,
you
don't
need
to
worry
about
it
whatsoever.
A
A
That
is
the
the
golden
ticket
of
next
J's,
so
you
get
that
superior
performance
because
you're
handling
the
computation
yourself
and
you're,
not
trusting
the
users
devices
to
do
it
for
you,
if
discoverable,
because
all
your
hTML
is
really
pre-rendered
on
your
server,
so
the
wave
coders
can
find
it
and
then
you're
indexing
just
becomes
a
lot
better
and
then
so.
Your
visibility
on
search
engines
and
social
media
platforms
is
a
lot
higher.
So
it's
got
fast
deliveries.
A
The
next
prefetches,
the
initial
data
builds
the
page
on
the
server
and
a
drastically
reduces
the
number
of
calls
between
the
user
and
the
backend.
So
that
means
that
you're
saving
on
latency
and
you're
saving
on
bandwidth,
because,
obviously
making
less
calls,
it
usually
leaves
less
bandwidth
to
use
less.
You
use
less
bandwidth
as
well.
It
also
has
a
beautiful
feature
of
exporting
your
code
to
a
static
app,
which
is
great
it's.
It
builds
all
that
HTML
for
you
beforehand
and
then
you
just
simply
upload
it.
A
So
we've
used
this
a
number
of
time
and
it
works
wonderfully.
It's
super
simple.
We
just
hosted
on
an
Amazon
s3
bucket
and
you're
good
to
go
you
and
it's
done
yeah.
It's
also
an
option
to
create
a
custom
server
if
you
want
to
and
your
own
routing,
so
you
have
that
extra
flexibility
in
case
you
want
it.
So
there
are
some
more
interesting
features
about.
Next
is
that
you
have
the
ability
to
create
progressive
web
apps
and
has
done
all
for
you.
A
It
handles
all
the
heady
heady
lifting
for
you,
so
you
can
do
offline
support,
fast
navigation
nights
of
features,
push
notifications
installed
to
your
home
screen.
All
of
that
you
can
do
it,
it
can
be
done
for
you,
you
just
configure
their
ways
and
it's
a
couple
of
lines
of
code
and
you're
done.
It's
super
simple,
there's
also
a
feature
where
you
can
create
em
pages.
You
basically
harness
the
power
of
react
and
you
can
create
super
fast,
fast
pages,
with
the
thinnest
restrictions
of
amp
and
bodies.
A
So
you
are
creating
read
of
mobile
first
application
straightaway.
So
when
it
comes
to
next,
the
biggest
thing
is
doing
and
biggest
thing
is
handling.
Four
is
all
the
heavy
lifting
so
that
you
can
get
straight
into
being
productive
and
that
you
only
need
to
focus
on
building
an
actual
product.
So
you're
not
wasting
time
on
small
things
like
setting
up
costs,
all
that
kind
of
stuff
is
taken
for
you,
so
to
be
entirely
honest,
a
lot
of
you
have
prettier
got
a
lot
more
experience.
A
I
do
I've
only
been
doing
this
for
eight
months
and
what's
good
about
next
is
that
it
takes
care
of
a
lot
of
things
that
I
don't
have
to
do
it
and
that's
pretty
great
I
mean
you
don't
have
to
take
my
word
for
it.
These
are
a
couple
of
companies
that
are
using
next
at
the
moment
yesterday
and
there's
reason
to
use
it.
If
there's
any
questions
yeah,
yes,.