►
From YouTube: Deno + React 18 with SSR and Suspense
Description
In this CHS JS Meetup, Tom Wilson demos using React 18 with Deno and how to configure SSR and use Suspense.
A
All
right,
so
this
is
the
charleston
js
react
meetup
and
today
we're
going
to
talk
about
dino
and
react.
18
alpha
react.
18
alpha
announcement,
I
guess
earlier
in
june,
was
released
and
they're
working
in
a
work
group
fashion
to
move
from
react
alpha
to
a
full
release
and
this
version's
exciting,
because
it
really
will
be
the
first
release
that
makes
suspense
kind
of
a
stable
feature
in
react,
and
it's
been
several
years
in
the
works
to
get
suspense
in
and
there
is
some
excitement
about
that
and
there's
another
side
is
dino.
A
A
so
ask
questions
as
I
go
through
this,
but
basically
I'm
going
to
step
through
a
working
kind
of
plain
jane
react
application,
make
it
server-side,
renderable
and
then
add
suspense
and
hopefully
it'll
make
sense.
As
I
go.
What
you
see
on
the
screen
is
an
app.jsx
which
you
may
be
familiar
with
and
then
kind
of
this
index
html,
which
reads
the
you
know,
kind
of
bundled
script
of
your
react,
app
and
kind
of
injects
it
in
here.
A
A
A
So
what
we're
going
to
do
is
step
through
that
first,
we're
going
to
make
react,
server,
side,
renderable,
so
we'll
render
it
and
and
just
keep
note
of
where
we
are
performance
wise.
So
if
we
refresh
this
and
I've
got
cache
disabled
we've
got,
you
know
kind
of
this
download
the
document.
And
then
we've
got
the
download
of
the
script
to
paint
this
hello
world
so
with
server-side,
rendering
we're
actually
going
to
generate
the
html
and
the
react
content
on
the
first
pass.
A
So
what
we
have
to
do
is
get
rid
of
the
h
index
html
file
out
of
our
public,
we're
going
to
get
rid
of
that
and
we're
going
to
create
an
html
component.
So
we're
going
to
create
this
component
called
html.jsx,
and
this
html
component
is
going
to
really
be
like
an
html
file
in
jsx
and
I'm
just
going
to
copy
and
paste
it
because
I
think
we've
all
seen
an
html
file
before.
A
So
we
have
this
function
that
we're
exporting
as
html
and
it's
going
to
take
assets,
children
and
title
children
is
what
will
be
in
the
inner
tag
area
or
or
the
content
area
of
this,
and
this
html
component
will
wrap
around
that
content
and
just
put
it
here
and
it's
going
to
name
our
title
of
our
page.
So
instead
of
react,
it'll
be
whatever
we
give
it
and
then
it's
going
to
also
create
the
script
tag.
That'll
pull
in
our
client
code
dynamically.
A
A
Html
from
html.jsx
like
that,
and
just
to
make
this
a
little
bit
easier
to
read
because
I'm
going
to
add
some
stuff
later,
I'm
going
to
create
this
function
called
content
and
it's
a
react
component.
So
it's
going
to
just
return
some
content
right,
hello,
ssr
and
then
in
our
app
we're
going
to
do
html
and
set
the
prop
assets
equal
to
the
assets
prop
of
this
app.
A
A
But
it
could
also
be
stylesheets
and
can
be
any
other
things
that
you
want
to
attach
to
your
header
of
your
index
html
or
your
html
component.
So
that's
what
we
need
to
do
there.
Now
we
have
to
change
the
server
a
little
bit
and
we're
going
to
use
a
component.
This
render
js
component.
So
the
nice
thing
about
dino
is
dino,
compiles
your
your
jsx.
A
It
compiles
it
as
part
of
its
runtime,
just
like
it
compiles
typescript,
so
you
don't
need
an
extra
extra
way
to
compile
your
jsx
or
convert
your
your
node
code
to
jsxcode,
etc.
You
don't
need
like
babel,
or
things
like
that
to
transpile,
so
we're
just
going
to
import
react
from
react
and
we're
going
to
import.
A
A
B
A
A
B
A
A
Server,
so
that's
one
typo
and
then
the
other
thing
is
is
in
our
build
script.
When
we
run
the
server,
we
need
to
tell
it
where
the
import
maps
are.
Import
map
equals
import,
map.json,
okay,
those
are
the
two
things
that
I
know
needs
changed:
okay,
cool,
so
that's
a
good
sign.
So
we
we
pulled
down,
react,
dom
and
react,
dom
server
version,
18
and
so
now
hopefully
yep
all
right,
hello,
ssr!
B
A
B
A
A
This
is
just
a
weird
error
with
my
grammarly
plugin
and
I
don't
know
why
it's
doing
that
maybe
grammarly
uses
react
or
something,
but
that's
nothing
regarding
this
demo,
so
we
that
is,
react
server-side,
rendering.
Now
it's
great.
It's
super
fast
for
demos,
but
in
the
real
world
it
kind
of
breaks
down
a
little
bit,
because
what
happens
is
it
it
has
to
in
order
for
the
page
to
be
active,
it
still
has
to
download
1.2
meg
to
be
fully
active
right.
So
what
happens?
A
Is
you
see
the
page,
but
you
can't
really
do
anything
until
the
hydration
bits
happen.
So
suspense
is
there's
two
pieces
that
are
going
to
help
with
that.
One
is
suspense,
and
the
other
is
called
server
components
and
server
components
is
coming
in
a
later
version
of
react
that
will
really
help
the
data
side
but
I'll
be
able
to
demo
the
suspense
part
today,
and
I
think
it'll
give
you
an
idea
of
how
just
that
piece
can
can
make
a
difference.
A
So
what
we
have
to
do
in
order
to
demo.
That
is,
we
need
to
kind
of
create
a
time
delay
and
instead
of
like
calling
a
database
and
waiting,
I'm
just
gonna,
you
know
really
create
a
fake
time
delay
in
the
in
the
rendering
part
of
the
application.
So
you
can
kind
of
see
how
it
paints
one
bit
but
doesn't
paint
the
other.
A
A
And
this
is
basically
like
the
quickest
way.
I
can
show
this
without
being
you
know,
super
time
consuming
and
annoying.
So
we've
got
our
data
provider.
We're
gonna,
create
a
data
component.
That's
just
a
react.
Content
context
implementation.
So
if
you've
worked
with
react
con
text,
this
should
look
pretty
normal.
A
A
We
instantiate
the
data
context,
calling
create
context
passing
null,
and
then
we
export
a
data
provider
and
it
wraps
the
value
of
data
and
does
the
children
with
the
pass
through
and
then
our
function
use
data
just
basically
grabs.
The
use
context
puts
data
context
in
it
and
then
it
calls
the
read
function
and
then
returns
this
fake
data
so
and
it's
going
to
wait
for
2
000
milliseconds
before
it
returns.
A
Okay,
so
now
we
want
to
implement
suspense,
so
I
think
I've
got
everything
set
up
now
to
implement
it.
We
can
go
to
our
app
jsx
file
and
what
we
want
to
do
is
pull
down
suspense
and
lazy.
So
we're
actually,
when
I
say
suspense
we're
also
going
to
lazy
load,
the
component,
which
is
code
splitting
right,
so
so
we'll
lazy
load
the
component
instead
of
directly
importing
it.
So
we'll
do
const
suspense.
A
A
A
Hopefully,
let's
see
if
we
get
a
message:
yeah,
okay,
so
it's
broken
so
so,
basically,
what's
going
to
happen
is
with
this
import
it's
going
to
look
for
scripps
lazycomponent.jsx
and
if
we
go
to
our
server
we'll
see
that
we
don't
have
an
endpoint
for
that.
So
that's
what
we
have
to
do
is
we
have
to
bundle
that
we
have
to
code
split.
Basically,
we
have
to
bundle
from
that
component
and
then
we
need
to
return
that
in
our
server,
so
we'll
say,
const
lazy
and
await
and
we'll
bundle
components,
lazy
component.
A
C
B
A
A
It's
still
getting
the
image
on
the
server
side,
so
you're
getting
that
suspense
functionality
on
the
server
side,
as
well
as
on
the
client
side,
and
what's
really
important
about
that,
is
let's
say
you
know
here
we
only
have
one
suspense
item,
but
let's
say
your
page
is
calling
multiple
different
components.
You
can
wrap
each
one
of
those
components
in
suspense
and
it
one
will
not
be
blocking
the
other.
A
A
B
A
A
Let
me
see
if
I
can't
there
we
go
so.
The
react
team
is
put
together
a
much
better
demo
with
this
stuff
that
I
invite
you
to
to
look
at
they've
got
this
demo
site
and
you
see
the
comments,
loading
and
but
everything
else
paints
and
the
one
thing
that
that
they
have
that
that
I
was
unable
to
implement
is
what's
called
html
streaming.
A
Writable
will
take
your
component,
the
response
object,
and
then
this
object
here,
which
will
this
own
ready
to
stream,
will
actually
start
to
send
your
content
down
the
wire,
and
this
start
writing,
and
so
it
will
actually
chunk
all
your
html
up
and
send
it
down
the
wire
and
the
hydrate
function
can
take
advantage
of
that.
So
as
soon
as
html
is
presented,
it
can
wire
up
that
html.
A
I
assume
that
I'm
doing
something
wrong
not
to
get
it
to
work
into
in
dino,
but
I
wasn't
able
to
find
it
and
again.
This
is
alpha
software,
so
it
it
quite
possibly
could
be
something
changed
from
the
time
that
this
demo
was
written
in
the
time
that
that
I
wrote
my
little
demo,
but
that's
that's
the
gist,
but
I
do
think
that
even
just
this
piece
that
that
I
implemented
showing
the
suspense
has
some
value
most
likely.
A
You
know
if
you
use
a
tool
like
next
js
or
remix
or
astro
or
whatever
they're,
going
to
implement
this
for
you,
and
you
won't
have
to
worry
about
some
of
these
internal
moving
pieces.
But
you
could,
just
you
know,
use
suspense
use
your
data
provider
etc
and
and
away
you
go.
But
I
do
think
it's
worth
looking
at
to
see
how
kind
of
this
happens
behind
the
scenes
and
see
how
it
comes
together.
I
thought
it
was
pretty
cool.
A
C
A
Yeah
and
it
really
is
kind
of
a
three-part
journey,
the
the
one
part
was
getting
suspense
stable.
The
second
part
is
getting
server-side,
rendering
and
suspense
stable,
and
then
the
third
part
is
getting
server.
Components
are
really
the
data
fetching
side
of
all
of
this,
those
apis
stable.
So
I
think.
A
Over
time
in
the
next
two
years
or,
however
long
it
takes
to
get
those
three
pieces
in
that's
where
it's
going
to
be
a
game,
changer
is
with
all
three
of
those
pieces,
but
at
the
same
time,
if,
if
you
keep
up,
then
it
won't
be
such
a
huge
change
to
get
there
in
the
future.
So
I
think
that's
what
their
their
strategy
is
is
to
try
to
roll
these
things
out
without
you
know,
really
breaking
everybody,
so
they're
sort
of
creating
this
react
legacy.
A
A
Yeah,
I
I
think,
with
the
the
new
apps
that
they're
they're,
targeting
you
know,
with
gaspi
and
next
js
and
all
the
you
know,
kind
of
focus
on
that
and
and
they're.
You
know
really
kind
of
moving
towards
the
e-commerce
space
and
some
of
the
other
spaces
that
really
requires
kind
of
that
server-side
rendering.
But
if
you're
not
you
know
in
that,
you
know
just
doing
the
client-side
will
always
still
work
and
it'll
work.