Here's your first look at Solid Start, a meta-framework for Solid.js that supports server-side rendering and advanced data fetching. Learn how to build a full stack web application with a hot new tool that's similar to Next.js, SvelteKit, and Nuxt. 

#programming #javascript #TheCodeReport

💬 Chat with Me on Discord

https://discord.gg/fireship

🔗 Resources

SolidStart Announcement https://www.solidjs.com/blog/introducing-solidstart
Solid in 100 Seconds https://youtu.be/hw3Bx5vxKl0
Next.js 13 First Look https://youtu.be/_w0Ikk4JY7U

🔥 Get More Content - Upgrade to PRO

Upgrade at https://fireship.io/pro
Use code YT25 for 25% off PRO access 

🎨 My Editor Settings

- Atom One Dark 
- vscode-icons
- Fira Code Font

🔖 Topics Covered

- What is Solid.js?
- SSR with Solid.js
- Solid Start vs Next.js
- Solid Start vs SvelteKit
- Solid Start vs Nuxt
- What is the best JS framework?
2024-02-04T05:17:16.863Z
nova-2
2-general-nova
2024-01-09.29447
30089e05-99d1-4376-b32e-c263170674af
24265558-a40f-4b43-8f4c-47cccbfa9303
2ea2e3d8d9abd00113463f6929e305882541d2f374039d5a8b38df9d17db57d1
67875a7f-c9c4-48a0-aa55-5bdb8a91c34a
deprecated
It is November 11, 2022, and you're watching The Code Report.
No great JavaScript framework would be complete without its own meta framework for server side rendering to go along with it.
React has Next, Vue has Nuxt, Angular has Analog, Svelte has Kit, quick has city, and as of yesterday, Solid has start.
As a latecomer to the JavaScript framework war, it has the luxury of taking the best features from its peers and puts them into one beautiful package.
And refreshingly, it graciously gives all of them credit in its announcement blog.
Like, when the Germans used mustard gas in World War 1, I don't seem to recall the French giving them any credit when they totally copied this game changing, blazingly deadly feature.
I think it says a lot about the team behind Solid giving credit credit is due, but they've also done a lot of their own innovation with a UI framework that's already very solid.
Like other meta frameworks, it uses file system routing and ports nested layouts in the same way that Nuxt does, where a file can shadow a directory then has an outlet component that projects all the content from the sub routes.
This differs from Next 13, which has a layout file for each of your layouts.
Both Next.
Js and SpellKit have a variety of naming conventions for the files in the routing system, but one major criticism of this is that it leads to a bunch of files with the same name in your project, like you'll have a 100 page dot JS files.
Solid start takes the approach more like the old Next.
Where a file name will represent a route.
And it even takes things one step further where instead of having a bunch of index files, you can wrap the file name in parentheses to give it a more descriptive name.
That's pretty cool, but things get a lot more interesting when we start talking about data fetching.
Like many other meta frameworks, you can export a function, in this case called route data that can fetch data on the server or client when the user navigates to a new route.
What felt kind of weird at first to me was that you also need to use this create route data function that takes a callback that does the actual data fetching.
My initial thought was why not just simplify this API and return the data from the route data function, but it turns out there's a good reason for this that will make sense in just a minute.
But first, after we fetch this data, we can then go into the UI component and access it with the use route data hook while providing us with end to end type safety.
Now it doesn't just return the object itself, but rather a resource.
The resource has useful properties on it like loading that we can use with built in components like show to easily handle the loading UI.
That's extremely useful, but things get even better.
If we go back into the create route data function.
It also takes a second argument that contains 1 or more keys, which allows you to refetch this data in a granular way later.
If you've or used React Query, this will feel very familiar.
For example, we can use the refetch route data function with that key without needing to load the entire page.
And we can also do more advanced things with it like optimistic updates and handle multiple data fetchers at the same time.
That's what data fetching looks like, but what about mutations?
First, I'll point out that you can create API routes anywhere in the project by simply exporting a function that has a matching HTTP like we could export API routes from the same file.
We can't do a git request here because the components are already doing that, but we could easily add a git API route from any other file.
That's pretty cool, but we can also set up RPC or remote procedure calls directly in a component.
There's a function called server with a dollar sign, the dollar sign representing that only runs on the server, and that gives us a way to write server side code literally anywhere without having to create a new file and follow a bunch of restful PI conventions that we don't really need.
This is a really cool innovation by Solidstar that I think has the potential to really simplify the way we think about server side code in a meta framework like this, but we're not done yet.
The framework also has actions very similar to Remix.
Actions allow you to mutate data, and when the mutation is complete, it will automatically fetch the existing data on the page, and it also provides an object to monitor the state of that update.
I really appreciate their emphasis on data fetching because that tends to be the hardest thing to get and when you get it right, it often eliminates the need for these wacky wavy inflatable arm flailing state management systems that can often lead developers to an involuntary 72 hour psychiatric hold.
The bottom line is that solid start could 73 72 hour psychiatric hold.
The bottom line is that solid start could be your best hope for survival if you are a refugee fleeing the war torn React ecosystem.
It only ships 5 kilobytes of JavaScript as opposed to nearly 80 for Next.
Js.
It doesn't have a shadow DOM and is truly reactive.
Watch my 100 second video for more details on that because if We don't end this war, this war will end us.
This has been the Code Report.
Thanks for watching, and I will see you in the next one.

Speaker 0: It is November 11, 2022, and you're watching The Code Report. No great JavaScript framework would be complete without its own meta framework for server side rendering to go along with it. React has Next, Vue has Nuxt, Angular has Analog, Svelte has Kit, quick has city, and as of yesterday, Solid has start. As a latecomer to the JavaScript framework war, it has the luxury of taking the best features from its peers and puts them into one beautiful package. And refreshingly, it graciously gives all of them credit in its announcement blog.

Like, when the Germans used mustard gas in World War 1, I don't seem to recall the French giving them any credit when they totally copied this game changing, blazingly deadly feature. I think it says a lot about the team behind Solid giving credit credit is due, but they've also done a lot of their own innovation with a UI framework that's already very solid. Like other meta frameworks, it uses file system routing and ports nested layouts in the same way that Nuxt does, where a file can shadow a directory then has an outlet component that projects all the content from the sub routes. This differs from Next 13, which has a layout file for each of your layouts. Both Next.

Js and SpellKit have a variety of naming conventions for the files in the routing system, but one major criticism of this is that it leads to a bunch of files with the same name in your project, like you'll have a 100 page dot JS files. Solid start takes the approach more like the old Next. Where a file name will represent a route. And it even takes things one step further where instead of having a bunch of index files, you can wrap the file name in parentheses to give it a more descriptive name. That's pretty cool, but things get a lot more interesting when we start talking about data fetching.

Like many other meta frameworks, you can export a function, in this case called route data that can fetch data on the server or client when the user navigates to a new route. What felt kind of weird at first to me was that you also need to use this create route data function that takes a callback that does the actual data fetching. My initial thought was why not just simplify this API and return the data from the route data function, but it turns out there's a good reason for this that will make sense in just a minute. But first, after we fetch this data, we can then go into the UI component and access it with the use route data hook while providing us with end to end type safety. Now it doesn't just return the object itself, but rather a resource.

The resource has useful properties on it like loading that we can use with built in components like show to easily handle the loading UI. That's extremely useful, but things get even better. If we go back into the create route data function. It also takes a second argument that contains 1 or more keys, which allows you to refetch this data in a granular way later. If you've or used React Query, this will feel very familiar.

For example, we can use the refetch route data function with that key without needing to load the entire page. And we can also do more advanced things with it like optimistic updates and handle multiple data fetchers at the same time. That's what data fetching looks like, but what about mutations? First, I'll point out that you can create API routes anywhere in the project by simply exporting a function that has a matching HTTP like we could export API routes from the same file. We can't do a git request here because the components are already doing that, but we could easily add a git API route from any other file.

That's pretty cool, but we can also set up RPC or remote procedure calls directly in a component. There's a function called server with a dollar sign, the dollar sign representing that only runs on the server, and that gives us a way to write server side code literally anywhere without having to create a new file and follow a bunch of restful PI conventions that we don't really need. This is a really cool innovation by Solidstar that I think has the potential to really simplify the way we think about server side code in a meta framework like this, but we're not done yet. The framework also has actions very similar to Remix. Actions allow you to mutate data, and when the mutation is complete, it will automatically fetch the existing data on the page, and it also provides an object to monitor the state of that update.

I really appreciate their emphasis on data fetching because that tends to be the hardest thing to get and when you get it right, it often eliminates the need for these wacky wavy inflatable arm flailing state management systems that can often lead developers to an involuntary 72 hour psychiatric hold. The bottom line is that solid start could 73 72 hour psychiatric hold. The bottom line is that solid start could be your best hope for survival if you are a refugee fleeing the war torn React ecosystem. It only ships 5 kilobytes of JavaScript as opposed to nearly 80 for Next. Js.

It doesn't have a shadow DOM and is truly reactive. Watch my 100 second video for more details on that because if We don't end this war, this war will end us. This has been the Code Report. Thanks for watching, and I will see you in the next one.
It is November 11, 2022, and you're watching The Code Report. No great JavaScript framework would be complete without its own meta framework for server side rendering to go along with it. React has Next, Vue has Nuxt, Angular has Analog, Svelte has Kit, quick has city, and as of yesterday, Solid has start. As a latecomer to the JavaScript framework war, it has the luxury of taking the best features from its peers and puts them into one beautiful package.
And refreshingly, it graciously gives all of them credit in its announcement blog. Like, when the Germans used mustard gas in World War 1, I don't seem to recall the French giving them any credit when they totally copied this game changing, blazingly deadly feature. I think it says a lot about the team behind Solid giving credit credit is due, but they've also done a lot of their own innovation with a UI framework that's already very solid.
france
germany
europe
Like other meta frameworks, it uses file system routing and ports nested layouts in the same way that Nuxt does, where a file can shadow a directory then has an outlet component that projects all the content from the sub routes. This differs from Next 13, which has a layout file for each of your layouts. Both Next. Js and SpellKit have a variety of naming conventions for the files in the routing system, but one major criticism of this is that it leads to a bunch of files with the same name in your project, like you'll have a 100 page dot JS files. Solid start takes the approach more like the old Next. Where a file name will represent a route. And it even takes things one step further where instead of having a bunch of index files, you can wrap the file name in parentheses to give it a more descriptive name.
That's pretty cool, but things get a lot more interesting when we start talking about data fetching. Like many other meta frameworks, you can export a function, in this case called route data that can fetch data on the server or client when the user navigates to a new route.
data management
data
databases
What felt kind of weird at first to me was that you also need to use this create route data function that takes a callback that does the actual data fetching. My initial thought was why not just simplify this API and return the data from the route data function, but it turns out there's a good reason for this that will make sense in just a minute. But first, after we fetch this data, we can then go into the UI component and access it with the use route data hook while providing us with end to end type safety.
Now it doesn't just return the object itself, but rather a resource. The resource has useful properties on it like loading that we can use with built in components like show to easily handle the loading UI. That's extremely useful, but things get even better. If we go back into the create route data function.
infrastructure
It also takes a second argument that contains 1 or more keys, which allows you to refetch this data in a granular way later. If you've or used React Query, this will feel very familiar. For example, we can use the refetch route data function with that key without needing to load the entire page. And we can also do more advanced things with it like optimistic updates and handle multiple data fetchers at the same time. That's what data fetching looks like, but what about mutations? First, I'll point out that you can create API routes anywhere in the project by simply exporting a function that has a matching HTTP like we could export API routes from the same file. We can't do a git request here because the components are already doing that, but we could easily add a git API route from any other file. That's pretty cool, but we can also set up RPC or remote procedure calls directly in a component. There's a function called server with a dollar sign, the dollar sign representing that only runs on the server, and that gives us a way to write server side code literally anywhere without having to create a new file and follow a bunch of restful PI conventions that we don't really need.
This is a really cool innovation by Solidstar that I think has the potential to really simplify the way we think about server side code in a meta framework like this, but we're not done yet. The framework also has actions very similar to Remix. Actions allow you to mutate data, and when the mutation is complete, it will automatically fetch the existing data on the page, and it also provides an object to monitor the state of that update.
modeling
I really appreciate their emphasis on data fetching because that tends to be the hardest thing to get and when you get it right, it often eliminates the need for these wacky wavy inflatable arm flailing state management systems that can often lead developers to an involuntary 72 hour psychiatric hold.
data management
The bottom line is that solid start could 73 72 hour psychiatric hold. The bottom line is that solid start could be your best hope for survival if you are a refugee fleeing the war torn React ecosystem.
It only ships 5 kilobytes of JavaScript as opposed to nearly 80 for Next. Js. It doesn't have a shadow DOM and is truly reactive. Watch my 100 second video for more details on that because if We don't end this war, this war will end us. This has been the Code Report. Thanks for watching, and I will see you in the next one.
war
military
It is November 11, 2022, and you're watching The Code Report. No great JavaScript framework would be complete without its own meta framework for server side rendering to go along with it. React has Next, Vue has Nuxt, Angular has Analog, Svelte has Kit, quick has city, and as of yesterday, Solid has start. As a latecomer to the JavaScript framework war, it has the luxury of taking the best features from its peers and puts them into one beautiful package. And refreshingly, it graciously gives all of them credit in its announcement blog. Like, when the Germans used mustard gas in World War 1, I don't seem to recall the French giving them any credit when they totally copied this game changing, blazingly deadly feature. I think it says a lot about the team behind Solid giving credit credit is due, but they've also done a lot of their own innovation with a UI framework that's already very solid. Like other meta frameworks, it uses file system routing and ports nested layouts in the same way that Nuxt does, where a file can shadow a directory then has an outlet component that projects all the content from the sub routes. This differs from Next 13, which has a layout file for each of your layouts. Both Next. Js and SpellKit have a variety of naming conventions for the files in the routing system, but one major criticism of this is that it leads to a bunch of files with the same name in your project, like you'll have a 100 page dot JS files. Solid start takes the approach more like the old Next. Where a file name will represent a route. And it even takes things one step further where instead of having a bunch of index files, you can wrap the file name in parentheses to give it a more descriptive name. That's pretty cool, but things get a lot more interesting when we start talking about data fetching. Like many other meta frameworks, you can export a function, in this case called route data that can fetch data on the server or client when the user navigates to a new route. What felt kind of weird at first to me was that you also need to use this create route data function that takes a callback that does the actual data fetching. My initial thought was why not just simplify this API and return the data from the route data function, but it turns out there's a good reason for this that will make sense in just a minute. But first, after we fetch this data, we can then go into the UI component and access it with the use route data hook while providing us with end to end type safety. Now it doesn't just return the object itself, but rather a resource. The resource has useful properties on it like loading that we can use with built in components like show to easily handle the loading UI. That's extremely useful, but things get even better. If we go back into the create route data function. It also takes a second argument that contains 1 or more keys, which allows you to refetch this data in a granular way later. If you've or used React Query, this will feel very familiar. For example, we can use the refetch route data function with that key without needing to load the entire page. And we can also do more advanced things with it like optimistic updates and handle multiple data fetchers at the same time. That's what data fetching looks like, but what about mutations? First, I'll point out that you can create API routes anywhere in the project by simply exporting a function that has a matching HTTP like we could export API routes from the same file. We can't do a git request here because the components are already doing that, but we could easily add a git API route from any other file. That's pretty cool, but we can also set up RPC or remote procedure calls directly in a component. There's a function called server with a dollar sign, the dollar sign representing that only runs on the server, and that gives us a way to write server side code literally anywhere without having to create a new file and follow a bunch of restful PI conventions that we don't really need. This is a really cool innovation by Solidstar that I think has the potential to really simplify the way we think about server side code in a meta framework like this, but we're not done yet. The framework also has actions very similar to Remix. Actions allow you to mutate data, and when the mutation is complete, it will automatically fetch the existing data on the page, and it also provides an object to monitor the state of that update. I really appreciate their emphasis on data fetching because that tends to be the hardest thing to get and when you get it right, it often eliminates the need for these wacky wavy inflatable arm flailing state management systems that can often lead developers to an involuntary 72 hour psychiatric hold. The bottom line is that solid start could 73 72 hour psychiatric hold. The bottom line is that solid start could be your best hope for survival if you are a refugee fleeing the war torn React ecosystem. It only ships 5 kilobytes of JavaScript as opposed to nearly 80 for Next. Js. It doesn't have a shadow DOM and is truly reactive. Watch my 100 second video for more details on that because if We don't end this war, this war will end us. This has been the Code Report. Thanks for watching, and I will see you in the next one.
It
it
is
is
November
november
11,
11
2022,
2022
and
and
you're
you're
watching
watching
The
the
Code
code
Report.
report
No
no
great
great
JavaScript
javascript
framework
framework
would
would
be
be
complete
complete
without
without
its
its
own
own
meta
meta
framework
framework
for
for
server
server
side
side
rendering
rendering
to
to
go
go
along
along
with
with
it.
it
React
react
has
has
Next,
next
Vue
vue
has
has
Nuxt,
nuxt
Angular
angular
has
has
Analog,
analog
Svelte
svelte
has
has
Kit,
kit
quick
quick
has
has
city,
city
and
and
as
as
of
of
yesterday,
yesterday
Solid
solid
has
has
start.
start
As
as
a
a
latecomer
latecomer
to
to
the
the
JavaScript
javascript
framework
framework
war,
war
it
it
has
has
the
the
luxury
luxury
of
of
taking
taking
the
the
best
best
features
features
from
from
its
its
peers
peers
and
and
puts
puts
them
them
into
into
one
one
beautiful
beautiful
package.
package
And
and
refreshingly,
refreshingly
it
it
graciously
graciously
gives
gives
all
all
of
of
them
them
credit
credit
in
in
its
its
announcement
announcement
blog.
blog
Like,
like
when
when
the
the
Germans
germans
used
used
mustard
mustard
gas
gas
in
in
World
world
War
war
1,
1
I
i
don't
don't
seem
seem
to
to
recall
recall
the
the
French
french
giving
giving
them
them
any
any
credit
credit
when
when
they
they
totally
totally
copied
copied
this
this
game
game
changing,
changing
blazingly
blazingly
deadly
deadly
feature.
feature
I
i
think
think
it
it
says
says
a
a
lot
lot
about
about
the
the
team
team
behind
behind
Solid
solid
giving
giving
credit
credit
credit
credit
is
is
due,
due
but
but
they've
they've
also
also
done
done
a
a
lot
lot
of
of
their
their
own
own
innovation
innovation
with
with
a
a
UI
ui
framework
framework
that's
that's
already
already
very
very
solid.
solid
Like
like
other
other
meta
meta
frameworks,
frameworks
it
it
uses
uses
file
file
system
system
routing
routing
and
and
ports
ports
nested
nested
layouts
layouts
in
in
the
the
same
same
way
way
that
that
Nuxt
nuxt
does,
does
where
where
a
a
file
file
can
can
shadow
shadow
a
a
directory
directory
then
then
has
has
an
an
outlet
outlet
component
component
that
that
projects
projects
all
all
the
the
content
content
from
from
the
the
sub
sub
routes.
routes
This
this
differs
differs
from
from
Next
next
13,
13
which
which
has
has
a
a
layout
layout
file
file
for
for
each
each
of
of
your
your
layouts.
layouts
Both
both
Next.
next
Js
js
and
and
SpellKit
spellkit
have
have
a
a
variety
variety
of
of
naming
naming
conventions
conventions
for
for
the
the
files
files
in
in
the
the
routing
routing
system,
system
but
but
one
one
major
major
criticism
criticism
of
of
this
this
is
is
that
that
it
it
leads
leads
to
to
a
a
bunch
bunch
of
of
files
files
with
with
the
the
same
same
name
name
in
in
your
your
project,
project
like
like
you'll
you'll
have
have
a
a
100
100
page
page
dot
dot
JS
js
files.
files
Solid
solid
start
start
takes
takes
the
the
approach
approach
more
more
like
like
the
the
old
old
Next.
next
Where
where
a
a
file
file
name
name
will
will
represent
represent
a
a
route.
route
And
and
it
it
even
even
takes
takes
things
things
one
one
step
step
further
further
where
where
instead
instead
of
of
having
having
a
a
bunch
bunch
of
of
index
index
files,
files
you
you
can
can
wrap
wrap
the
the
file
file
name
name
in
in
parentheses
parentheses
to
to
give
give
it
it
a
a
more
more
descriptive
descriptive
name.
name
That's
that's
pretty
pretty
cool,
cool
but
but
things
things
get
get
a
a
lot
lot
more
more
interesting
interesting
when
when
we
we
start
start
talking
talking
about
about
data
data
fetching.
fetching
Like
like
many
many
other
other
meta
meta
frameworks,
frameworks
you
you
can
can
export
export
a
a
function,
function
in
in
this
this
case
case
called
called
route
route
data
data
that
that
can
can
fetch
fetch
data
data
on
on
the
the
server
server
or
or
client
client
when
when
the
the
user
user
navigates
navigates
to
to
a
a
new
new
route.
route
What
what
felt
felt
kind
kind
of
of
weird
weird
at
at
first
first
to
to
me
me
was
was
that
that
you
you
also
also
need
need
to
to
use
use
this
this
create
create
route
route
data
data
function
function
that
that
takes
takes
a
a
callback
callback
that
that
does
does
the
the
actual
actual
data
data
fetching.
fetching
My
my
initial
initial
thought
thought
was
was
why
why
not
not
just
just
simplify
simplify
this
this
API
api
and
and
return
return
the
the
data
data
from
from
the
the
route
route
data
data
function,
function
but
but
it
it
turns
turns
out
out
there's
there's
a
a
good
good
reason
reason
for
for
this
this
that
that
will
will
make
make
sense
sense
in
in
just
just
a
a
minute.
minute
But
but
first,
first
after
after
we
we
fetch
fetch
this
this
data,
data
we
we
can
can
then
then
go
go
into
into
the
the
UI
ui
component
component
and
and
access
access
it
it
with
with
the
the
use
use
route
route
data
data
hook
hook
while
while
providing
providing
us
us
with
with
end
end
to
to
end
end
type
type
safety.
safety
Now
now
it
it
doesn't
doesn't
just
just
return
return
the
the
object
object
itself,
itself
but
but
rather
rather
a
a
resource.
resource
The
the
resource
resource
has
has
useful
useful
properties
properties
on
on
it
it
like
like
loading
loading
that
that
we
we
can
can
use
use
with
with
built
built
in
in
components
components
like
like
show
show
to
to
easily
easily
handle
handle
the
the
loading
loading
UI.
ui
That's
that's
extremely
extremely
useful,
useful
but
but
things
things
get
get
even
even
better.
better
If
if
we
we
go
go
back
back
into
into
the
the
create
create
route
route
data
data
function.
function
It
it
also
also
takes
takes
a
a
second
second
argument
argument
that
that
contains
contains
1
1
or
or
more
more
keys,
keys
which
which
allows
allows
you
you
to
to
refetch
refetch
this
this
data
data
in
in
a
a
granular
granular
way
way
later.
later
If
if
you've
you've
or
or
used
used
React
react
Query,
query
this
this
will
will
feel
feel
very
very
familiar.
familiar
For
for
example,
example
we
we
can
can
use
use
the
the
refetch
refetch
route
route
data
data
function
function
with
with
that
that
key
key
without
without
needing
needing
to
to
load
load
the
the
entire
entire
page.
page
And
and
we
we
can
can
also
also
do
do
more
more
advanced
advanced
things
things
with
with
it
it
like
like
optimistic
optimistic
updates
updates
and
and
handle
handle
multiple
multiple
data
data
fetchers
fetchers
at
at
the
the
same
same
time.
time
That's
that's
what
what
data
data
fetching
fetching
looks
looks
like,
like
but
but
what
what
about
about
mutations?
mutations
First,
first
I'll
i'll
point
point
out
out
that
that
you
you
can
can
create
create
API
api
routes
routes
anywhere
anywhere
in
in
the
the
project
project
by
by
simply
simply
exporting
exporting
a
a
function
function
that
that
has
has
a
a
matching
matching
HTTP
http
like
like
we
we
could
could
export
export
API
api
routes
routes
from
from
the
the
same
same
file.
file
We
we
can't
can't
do
do
a
a
git
git
request
request
here
here
because
because
the
the
components
components
are
are
already
already
doing
doing
that,
that
but
but
we
we
could
could
easily
easily
add
add
a
a
git
git
API
api
route
route
from
from
any
any
other
other
file.
file
That's
that's
pretty
pretty
cool,
cool
but
but
we
we
can
can
also
also
set
set
up
up
RPC
rpc
or
or
remote
remote
procedure
procedure
calls
calls
directly
directly
in
in
a
a
component.
component
There's
there's
a
a
function
function
called
called
server
server
with
with
a
a
dollar
dollar
sign,
sign
the
the
dollar
dollar
sign
sign
representing
representing
that
that
only
only
runs
runs
on
on
the
the
server,
server
and
and
that
that
gives
gives
us
us
a
a
way
way
to
to
write
write
server
server
side
side
code
code
literally
literally
anywhere
anywhere
without
without
having
having
to
to
create
create
a
a
new
new
file
file
and
and
follow
follow
a
a
bunch
bunch
of
of
restful
restful
PI
pi
conventions
conventions
that
that
we
we
don't
don't
really
really
need.
need
This
this
is
is
a
a
really
really
cool
cool
innovation
innovation
by
by
Solidstar
solidstar
that
that
I
i
think
think
has
has
the
the
potential
potential
to
to
really
really
simplify
simplify
the
the
way
way
we
we
think
think
about
about
server
server
side
side
code
code
in
in
a
a
meta
meta
framework
framework
like
like
this,
this
but
but
we're
we're
not
not
done
done
yet.
yet
The
the
framework
framework
also
also
has
has
actions
actions
very
very
similar
similar
to
to
Remix.
remix
Actions
actions
allow
allow
you
you
to
to
mutate
mutate
data,
data
and
and
when
when
the
the
mutation
mutation
is
is
complete,
complete
it
it
will
will
automatically
automatically
fetch
fetch
the
the
existing
existing
data
data
on
on
the
the
page,
page
and
and
it
it
also
also
provides
provides
an
an
object
object
to
to
monitor
monitor
the
the
state
state
of
of
that
that
update.
update
I
i
really
really
appreciate
appreciate
their
their
emphasis
emphasis
on
on
data
data
fetching
fetching
because
because
that
that
tends
tends
to
to
be
be
the
the
hardest
hardest
thing
thing
to
to
get
get
and
and
when
when
you
you
get
get
it
it
right,
right
it
it
often
often
eliminates
eliminates
the
the
need
need
for
for
these
these
wacky
wacky
wavy
wavy
inflatable
inflatable
arm
arm
flailing
flailing
state
state
management
management
systems
systems
that
that
can
can
often
often
lead
lead
developers
developers
to
to
an
an
involuntary
involuntary
72
72
hour
hour
psychiatric
psychiatric
hold.
hold
The
the
bottom
bottom
line
line
is
is
that
that
solid
solid
start
start
could
could
73
73
72
72
hour
hour
psychiatric
psychiatric
hold.
hold
The
the
bottom
bottom
line
line
is
is
that
that
solid
solid
start
start
could
could
be
be
your
your
best
best
hope
hope
for
for
survival
survival
if
if
you
you
are
are
a
a
refugee
refugee
fleeing
fleeing
the
the
war
war
torn
torn
React
react
ecosystem.
ecosystem
It
it
only
only
ships
ships
5
5
kilobytes
kilobytes
of
of
JavaScript
javascript
as
as
opposed
opposed
to
to
nearly
nearly
80
80
for
for
Next.
next
Js.
js
It
it
doesn't
doesn't
have
have
a
a
shadow
shadow
DOM
dom
and
and
is
is
truly
truly
reactive.
reactive
Watch
watch
my
my
100
100
second
second
video
video
for
for
more
more
details
details
on
on
that
that
because
because
if
if
We
we
don't
don't
end
end
this
this
war,
war
this
this
war
war
will
will
end
end
us.
us
This
this
has
has
been
been
the
the
Code
code
Report.
report
Thanks
thanks
for
for
watching,
watching
and
and
I
i
will
will
see
see
you
you
in
in
the
the
next
next
one.
one
success
The Code Report discusses various meta frameworks and their use in the JavaScript framework. They highlight the benefits of each one, including a UI framework that uses file system routing and ports nested layouts, and the use of route data hook. They also discuss the use of APIs and the potential risks of using them in a framework like this. The report concludes with a recommendation for a better framework for server side code.
a solid start
It is November 11, 2022, and you're watching The Code Report. No great JavaScript framework would be complete without its own meta framework for server side rendering to go along with it. React has Next, Vue has Nuxt, Angular has Analog, Svelte has Kit, quick has city, and as of yesterday, Solid has start. As a latecomer to the JavaScript framework war, it has the luxury of taking the best features from its peers and puts them into one beautiful package. And refreshingly, it graciously gives all of them credit in its announcement blog. Like, when the Germans used mustard gas in World War 1, I don't seem to recall the French giving them any credit when they totally copied this game changing, blazingly deadly feature. I think it says a lot about the team behind Solid giving credit credit is due, but they've also done a lot of their own innovation with a UI framework that's already very solid. Like other meta frameworks, it uses file system routing and ports nested layouts in the same way that Nuxt does, where a file can shadow a directory then has an outlet component that projects all the content from the sub routes. This differs from Next 13, which has a layout file for each of your layouts. Both Next. Js and SpellKit have a variety of naming conventions for the files in the routing system, but one major criticism of this is that it leads to a bunch of files with the same name in your project, like you'll have a 100 page dot JS files. Solid start takes the approach more like the old Next. Where a file name will represent a route. And it even takes things one step further where instead of having a bunch of index files, you can wrap the file name in parentheses to give it a more descriptive name. That's pretty cool, but things get a lot more interesting when we start talking about data fetching. Like many other meta frameworks, you can export a function, in this case called route data that can fetch data on the server or client when the user navigates to a new route. What felt kind of weird at first to me was that you also need to use this create route data function that takes a callback that does the actual data fetching. My initial thought was why not just simplify this API and return the data from the route data function, but it turns out there's a good reason for this that will make sense in just a minute. But first, after we fetch this data, we can then go into the UI component and access it with the use route data hook while providing us with end to end type safety. Now it doesn't just return the object itself, but rather a resource. The resource has useful properties on it like loading that we can use with built in components like show to easily handle the loading UI. That's extremely useful, but things get even better. If we go back into the create route data function. It also takes a second argument that contains 1 or more keys, which allows you to refetch this data in a granular way later. If you've or used React Query, this will feel very familiar. For example, we can use the refetch route data function with that key without needing to load the entire page. And we can also do more advanced things with it like optimistic updates and handle multiple data fetchers at the same time. That's what data fetching looks like, but what about mutations? First, I'll point out that you can create API routes anywhere in the project by simply exporting a function that has a matching HTTP like we could export API routes from the same file. We can't do a git request here because the components are already doing that, but we could easily add a git API route from any other file. That's pretty cool, but we can also set up RPC or remote procedure calls directly in a component. There's a function called server with a dollar sign, the dollar sign representing that only runs on the server, and that gives us a way to write server side code literally anywhere without having to create a new file and follow a bunch of restful PI conventions that we don't really need. This is a really cool innovation by Solidstar that I think has the potential to really simplify the way we think about server side code in a meta framework like this, but we're not done yet. The framework also has actions very similar to Remix. Actions allow you to mutate data, and when the mutation is complete, it will automatically fetch the existing data on the page, and it also provides an object to monitor the state of that update. I really appreciate their emphasis on data fetching because that tends to be the hardest thing to get and when you get it right, it often eliminates the need for these wacky wavy inflatable arm flailing state management systems that can often lead developers to an involuntary 72 hour psychiatric hold. The bottom line is that solid start could 73 72 hour psychiatric hold. The bottom line is that solid start could be your best hope for survival if you are a refugee fleeing the war torn React ecosystem. It only ships 5 kilobytes of JavaScript as opposed to nearly 80 for Next. Js. It doesn't have a shadow DOM and is truly reactive. Watch my 100 second video for more details on that because if We don't end this war, this war will end us. This has been the Code Report. Thanks for watching, and I will see you in the next one.
The Code Report discusses various meta frameworks and their use in the JavaScript framework. They highlight the benefits of each one, including a UI framework that uses file system routing and ports nested layouts, and the use of route data hook. They also discuss the use of APIs and the potential risks of using them in a framework like this. The report concludes with a recommendation for a better framework for server side code.