►
Description
CharlestonJS Meetup
Travis presents NextJS with Vercel and how Incremental Static Builds work with ISRs.
Github Source Code:
https://github.com/tnez/demo-nextjs-isr
Purchase your CHS JS T-Shirt here
https://shop.hyper.io/#/collections/charleston-js
B
B
B
Why
it's,
why
you
should
care
about
it
or
why
it
matters
why
it's
useful
go
through
kind
of
like
a
canonical
type
use
case
and
then
just
talk
kind
of
about
when
you
maybe
wouldn't
want
to
use
it.
And
then
I
took
a
shot
at
kind
of
creating
a
non-typical
kind
of
weird
use
case
with
it
just
to
kind
of
explore
a
little
bit.
B
So
briefly,
I
guess
my
my
name
is
travis.
I'm
a
software
developer
here
in
charleston,
I
work
at
a
company
called
sovereign
with
some
some
cool
people
here.
Just
jess
is
in
here
and
we've
basically
built
a
couple
of
things.
We
built
said:
rayquok.com,
comparecredit.com
recentlybusinessloans.com
and
we
use
we
use
react.
We
use
next.js
and
we
use
purcell
and
some
other
stuff,
but
we
use
these
things
in
in
production
and
on
a
daily
basis.
B
So
I
think
one
thing
to
talk
about
is
so
incremental
static.
Regeneration
is
kind
of
a
lot
of
a
lot
of
words,
kind
of
a
lot
of
modern
garble,
but
basically
the
key
to
understanding
it
or
the
key
to
understanding
why
it
might
be
useful
is
just
understanding,
static
generation
in
general,
so
the
idea
of
static
generation
in
general
is
taking
things
that
you
might
do.
You
know
typically
say
you're
gonna.
B
So
you
can
basically
you
know,
stick
it
wherever
you
need
to.
You
can
stick
it
on
a
cdn,
something
you
can
kind
of
eliminate
some
of
the
moving
moving
parts
there
and
it
really
has
kind
of
two
main
benefits
with
that.
One
one
benefit
is
that,
if
you
have
say
you're
talking
to
a
a
a
service
that
might
be
flaky
or
might
be
slow,
you
can
basically
do
all
those
expensive
operations
or
slow
operations.
B
You
know
during
the
build
time,
render
your
content
and
then,
when
the
user
goes
to
hit
your
site
they're
not
having
to
wait
for
anything
there,
you've
already
done
the
kind
of
heavy
lifting
up
front.
So
that's
that's.
Basically,
one
big
benefit.
The
other
big
benefit
of
moving
stuff
to
a
pre-deploy
kind
of
step
is
that
it
also
gives
you
an
opportunity
to
fail.
B
B
So
that's
the
the
kind
of
general
idea
of
static
generation
and
we
use
that
we
use
that
heavily
at
solver
in
most
of
our
most
of
our
sites,
to
kind
of
reduce
the
amount
of
moving
parts
and
helpless
with
performance
and
make
us
kind
of.
You
know
robust
to
things
like
traffic
spikes
and
that
kind
of
stuff.
B
But
there
are
some
limitations
of
static
generation,
so
first
before
I
get
into
the
specific
one,
so
obviously
one
one
kind
of
given
of
static
generation
is
that
it
really
only
works
well,
if
you're
giving
the
same
content
to
all
your
users.
If
you
have
a
scenario
like
a
login
experience
or
something
like
that
and
you're
you're
giving
you
have
to
maybe
authenticate
users
or
you
know,
give
different
different
content
to
different
users,
static
generation
kind
of
tends
to
to
break
down
there.
B
It
can
be
helpful,
but
even
in
that
scenario
there
are
some
some
situations
where
it
starts
to
be
kind
of
cumbersome.
Basically,
you've
moved.
You
moved
all
the
complexity
to
this
kind
of
pre-deploy
stuff,
this
this
build
stuff,
and
so,
as
you,
you
know,
continue
to
build
the
site,
work
on
things
and
things
get
more
complex.
B
B
So
it
is
the
basic
idea
is
taking
this
static,
build
process
that
previously
happened
as
a
pre-deploy
step
and
now
moving
it
into
a
lambo.
That's
going
to
get
executed
on
demands
periodically
based
on
you,
know,
requests
coming
into
your
system,
so
so,
basically
the
the
short
of
it
is
that
you
know
a
user
might
request
a
page
and
with
this
setup
the
user
will
get
the
page
from
the
cache.
First,
that's
been
basically
pre-rendered,
but
then
behind
the
scenes.
B
You
can
replace
just
you
know,
pages
at
a
time
or
different
bits
at
a
time,
so
you
don't
have
to
wait
for
a
build
to
go
out.
You
don't
have
to
fire
a
build
to
basically
get
your
your
new
content,
so
I
think
I'm
gonna
go
ahead
and
jump
into
a
little
demo
because
I'm
probably
not
making
a
ton
of
sense
as
I'm
talking
through
this.
So
I
think
it'll
be
easier
to
see.
B
B
A
B
So
it
basically
took
a
snapshot
of
these
data
over
here
and
rendered
it
into.
You
know
this
little
page
over
here
so
you're,
seeing
this
here
this
here
and
it
looks
like
this
is
a
utc
time.
But
basically
it
looks
like
that
went
out.
I
put
the
build
out
like
545.,
so
this
page,
you
know
reached
out
to
notion
grabbed
the
data
and
then
you
know
turned
it
into
markup,
so
that
is
kind
of
one
version
of
this,
and
I
can
show.
B
Yeah
next.js
gives
us
a
couple
of
convenience
functions
that
get
basically
bundled
up
and
in
in
this
scenario,
just
gets
fired
at
build
time.
Grabs
data
just
grabbing
this
data
from
over
here
on
and
then
providing
that
as
attributes
as
prompts
to
this
component,
which
in
this
just
renders
this
list.
B
B
B
Yeah
so
now,
behind
the
scenes,
the
cache
was
updated.
None
of
this
is,
you
know,
firing
in
the
user's
browser,
or
you
know,
in
the
we
don't
have
any
web
server
sitting
there.
Doing
that
what's
happening
is
a
lambda
behind
the
scene,
is
firing
pulling
in
data
and
then
pushing
that
data
over
to
the
cache,
and
now
we've
requested
this
page
again
with
this
new
data
included.
B
So
you
can
see
this
time
stamped
updating.
You
know
close
to
close
to
current.
If
we
go
back
to
the
static
version,
this
was
fired
at
build
10.
This
will
not
be
updated.
It's
still.
You
know
a
snapshot
of
that
point
in
time,
so
there's
really
only
as
far
as
the
actual
implementation
details
when
you're
using
next
it's
a
very
small
change.
You
have
to
add.
B
This
is
basically
this.
You
know
same
version
of
a
page,
but
with
one
key
difference
in
this
git
static
props
function
basically
give
it
a
parameter
that
tells
it
how
old
it
should
allow
the
cache
to
be
before
it
goes,
and
re-fetches
new
data
basically
goes
off
and
checks
for
new
data,
and
that's
it
if
you're,
you
know
using
next
in
versailles.
You
know
it
all
plays
super
nicely
together,
so
that
that
is,
you
know.
B
You
know
you're
not
you're,
not
pushing
anything
expensive,
you
don't
have
any.
You
still
don't
have
any
moving
parts.
Really.
You
have
kind
of
the
same
kind
of
simple
setup.
As
you
know,
just
the
static
generated
content.
So
if
you
you
know,
go
down
and
pull
this
page,
the
static
version
is
going
to
look.
B
B
Yeah
important,
but
you
can
kind
of
see
the
you
know
each
time,
you're,
refreshing,
you're,
still
getting
the
first
time
you
hit
after
that,
new
data
goes
in
you're
still
getting
you
know,
data
from
the
cache
you're
still
getting
that
page
from
the
cache,
and
then
you
know,
following
that,
you
get
the
updated
version,
so
there
there's
a
couple
that
are,
I
mean.
Obviously
one
of
the
big
benefits
of
this
is
performance
like
you
could
have
your
data
fetching
be
relatively
slow
or
relatively
expensive.
B
You
know
reaching
out
to
a
bunch
of
different
services
and
each
one.
You
know
if
you're
the
performance
of
your
site
is
dependent
on
that
service
being
available
100
of
the
time
as
you're
adding
more
services
each
one
basically
has
the
potential
to
you
know
impact
the
user's
experience
on
your
site.
B
B
B
B
So
you
see
this,
you
know
this
is
basically
succeeding,
sometimes
failing
other
times,
but
on
the
user's
end
of
that
they're
not
impacted
at
all.
Besides,
you
know,
maybe
data's
a
little
bit
slower
getting
to
them,
but
you
know
they
still
get
get
what
they
need
and
then
you
know
have
a
have
a
pretty
good
experience
there.
So
we
can
go
ahead
and
continue
to
add.
B
B
Okay,
so
didn't
know
how
well
I
spoke
about
that,
but
that,
I
think,
is
the
kind
of
the
you
know
again.
The
kind
of
two
big
benefits
are
better
performance
on
the
user's
end,
hiding
slow
things
from
them
and
hiding
buggy
things
hiding
flanky
things
so
that
their
experiences
is
pretty
good
and
you've
just
moved
the
you
know,
you
moved
things
that
might
be
impacting
their
performance
or
might.
A
B
I
mean
they
provide
provide
these
kind
of
convenience
functions.
These
you
know
these
data
fetching
functions
that
you
can
stick
on
your
page
on
your
page
components
and
next
that
make
it
really
easy
to
interact
with
this
and
purcell,
basically
kind
of
takes
care
of
all
the
complexity,
and
you
know,
deploys
things
to
lambdas
and
also
the
interpreting
the
caching
directives
on
the
cdn
and
does
what
it
needs
to
do.
But
you
can
actually
use
this
outside
of
next.
B
That
kind
of
treats
this
in
the
same
way
and
I'm
not
entirely
sure
which
which
ones
are
doing
it.
I
know
we
we
specifically
moved
to
purcell
to
support
this
feature
from
netlify,
which
wasn't
doing
it
at
the
time,
but
but
but
basically,
there's
there's
nothing
specific
about
next.
That
allows
this
feature.
There
are
just
some
kind
of
conveniences
in
it
that
make
it
make
it
kind
of
possible
or
make
it
easier
to
use.
B
B
So
what
we
have
here
is
actually
a
just
basically
hey.
I
mean
it's
a
it's
a
api
route
in
next,
but
you
can
think
of
it,
as
this
is
essentially
just
a
you
know,
the
lambda
that
gets
gets
deployed
to
aws
and
run,
and
here
we're
setting
the
these
caching
directives
this
stale,
while
revalidate
and
going
ahead
and
sticking
it
on
the
response.
B
Some
some
data,
so
we're
kind
of
using
the
cdn,
as
you
know,
kind
of
some
some
pseudostate
that
we're
that
we're
putting
there.
So
this
is
it's
kind
of
wonky.
You
wouldn't
really
want
to
use
this
in
real
life,
but
this
is
kind
of
like
a
visitor
counter.
So
if
you
look
at
it
it's
you
know
we're
going
we're
hitting
an
end
point
and
then
the
endpoint
is
kind
of
recursively
hitting
itself
getting
data
back
and
then
incrementing
that
data
so
incrementing
a
counter
there.
B
B
B
B
B
You
know
it
simplifies
things
and
lets
you
remove
some
of
the
moving
parts.
If
that
works,
if
you
need
something
where
you
need
accurate
data
at
any
moment,
you
have
fast-moving
data,
it's
not
a
very
good,
not
a
very
good
fit,
and
you
also
kind
of
need
a
situation
where
you
have
enough
traffic
to
kind
of
keep
things
fresh.
B
If
you
have
a
scenario
where
you
know
say
like
a
personal
blog
or
something
you
know,
and
a
user
comes
and
then
you
don't
get
another
user
for
say
three
days
or
something
now,
the
first
user
that
comes
and
hits
your
site
again
is
going
to
get
data
from
three
days
ago
as
they
posted
it
and
until
they
start
interacting
with
the
site
more.
That's
when
you
know
things
get
updated
behind
the
scenes.
But
if
you
don't
have
that
kind
of
baseline
level
of
traffic,
then
you
know
there's.
B
B
B
B
Yeah
there
we
go
rather
than
having,
if
there's
not
a
web
server
in
the
sense
that
you
have
a
box
somewhere
sitting
there
processing
things,
but
it
does
fill
that
kind
of
same
space.
It's
a,
I
guess,
I'd
call
it
a
deployment
platform,
so
it
is
deploying
functions
that
you're
writing
to
a
serverless,
runtime
environment.
So
something
like
aws
and
running
those
functions
and
then
the
results
of
that
it
is
caching
and
sticking
on
a
cdn.
So
it's
it's
playing
the
same
role
as
a
web.
B
Server
would
be
would
be
playing,
but
in
kind
of
a
a
different
way.
Sometimes
there's
not
a
box
running
24
7,
but
yeah,
and
then
next
js
is
a
a
particular
type
of
javascript
react
framework
for
building
websites
web
applications
so
yeah.
I
guess
you
could
think
of
next.js
as
the
application
framework
and
versailles
as
the
hosting.
A
B
B
They
were
basically
re-they're
firing
at
each
time
and
then
not
not
kind
of
updating
the
cache
behind
the
scenes.
So
those
have
changed
it
really
recently,
but
as
of
like
a
couple
months
ago,
they
would
you
know,
support
those
same
functions
that
you
know
index.js,
that
they
provide.
You
know,
get
static,
props
get
server-side
props,
they
supported
both
those
functions
and
they
would
work
but
get
static.
B
A
A
B
Yeah
yeah,
I
think
so
so
one,
the
the
big,
the
big
caveat
is,
if
you're
doing,
if
you're,
generating
your
content
statically
in
the
first
place,
and-
and
that
is
something
that
I
think
always
makes
sense,
if
you
can,
because
it
reduces
the
amount
of
moving
parts
and
the
criteria
to
if
you
can
do
that
is
basically
the
big
one
is.
Can
you
give
the
same
content
to
everybody?
B
B
B
B
A
A
A
B
I
I
think
I
really
think
within
react.
Next
is
just
so
not
a
couple
of
things
with
that
I
mean
it
basically
takes
care
of.
You
know
webpack
configs
and
you
get
to
kind
of
just
jump
in
and
get
started,
and
you
kind
of
get
code
splitting
by
design,
because
you
know
everything
is
split
on
a
page
by
page
level,
they're
all
kind
of
think
of
them
as
like
each
little
mini
applications
or
many
single
page
applications.
B
B
Yeah
remix
might
be
interesting
because
it's
a
little
different.
I
I
think
I
think,
between
next
and
gatsby,
because
they're
kind
of
filling
a
similar
spot
for
a
while,
but
I
think
between
those
two
next
kind
of
allows
you
to
go
in
a
couple
of
different
directions
where
gatsby
kind
of
fits
better
with
you
know
only
doing
static
generation
and
next
kind
of
allows.
A
mix
of
you
know.
Do
these
things
static.
This
thing
we
need
dynamically
all
the
time,
so
I
feel
like
next
kind
of
went
out
between
those
two.
B
A
A
You
would
have
to
manually
do
static,
server,
rendering
or
server-side
rendering,
but
but
you
can
I've
done
it
before
and
it
it's
super
painful.
So,
like
travis,
said
to
get
page
splitting
get
server-side,
rendering
incremental
static,
rendering
regeneration,
whatever
all
of
that
is
in
the
box
with
next
js
and
brazil.
So.
A
A
A
A
If
you're
available,
casey
wilson
will
be
doing
a
presentation
on
tensorflow
or
ai
and
javascript.
So
even
if
you
know,
I
think
it
would
be
worth
checking
out
tensorflow
and
and
see
what
you
can
do
with
ai
and
javascript.
Of
course,
if
you
can
do
anything
in
computer
science,
then
you
can
do
it
in
javascript.
A
Yeah
react
charting
libraries
I'll
I'll,
dig
into
that
david.
That's
a
good
suggestion
and
yeah
angular
is
is
similar
to
react.
Trey,
I
think
you'll
find
the
component
architecture
model
are,
are
very
similar
just
a
little
bit
of
different
opinions,
one
way
or
another,
but
yeah
react
is
definitely
worth
digging
into.