Video Belajar
Tonton dan pelajari berbagai topik menarik melalui video pembelajaran eksklusif dari Channel Parasocial Fix.
Parasocial Fix
589
Astro 1.0 Beta in SPA mode (part 2)
In the last stream https://www.youtube.com/watch?v=TD0N2Wa8964, I tried Astro for the first time, I actually decided to use it for our blog despite some difficulties :) https://mobile.twitter.com/JLarky/status/1515855166104215552
In this stream, we will look more into the SSR+SPA configuration for Astro. Focusing on the idea of using react-router inside Astro (including SSR).
- SPA approach supported by Astro https://github.com/withastro/astro/pull/2899 using https://www.npmjs.com/package/micromorph
- video about why CRA is no longer cool https://www.youtube.com/watch?v=ToEp--KcXcA
- currently recommended way to migrate from CRA is https://nextjs.org/docs/migrating/from-create-react-app
- https://init.tips/ by Theo https://www.youtube.com/channel/UCbRP3c757lWg9M-U7TyEkXA
Chapters:
0:00 hi friends
0:48 I almost switched to Next.js from Astro
1:32 I set up CRA+Astro using Netlify redirects/proxy
5:18 BUG: base configuration option in Astro is not working
6:25 rambling about Astro Hackathon
8:04 Astro SPA integration: review draft PR
12:40 installing pnpm for the first time (using corepack)
24:27 looking into integration-spa code
30:14 astro-spa demo with micromorph/spa package
41:00 why I don't like astro-spa
43:46 astro-spa preserving state of an iframe demo
48:26 astro multiple jsx frameworks at the same time
56:44 `astro add` command for easy astro integrations
58:08 setting up SPA with react-router
1:19:20 how this react-router SPA is different from astro-spa
1:26:40 using dynamic routes in react-router
1:33:12 fixing server side rendering of react-router's StaticRouter
1:43:54 demo of react-router SPA with SSR support
1:49:21 what can I improve SPA?
1:52:33 rant about CRA (crate-react-app) and car to next.js migration
In this stream, we will look more into the SSR+SPA configuration for Astro. Focusing on the idea of using react-router inside Astro (including SSR).
- SPA approach supported by Astro https://github.com/withastro/astro/pull/2899 using https://www.npmjs.com/package/micromorph
- video about why CRA is no longer cool https://www.youtube.com/watch?v=ToEp--KcXcA
- currently recommended way to migrate from CRA is https://nextjs.org/docs/migrating/from-create-react-app
- https://init.tips/ by Theo https://www.youtube.com/channel/UCbRP3c757lWg9M-U7TyEkXA
Chapters:
0:00 hi friends
0:48 I almost switched to Next.js from Astro
1:32 I set up CRA+Astro using Netlify redirects/proxy
5:18 BUG: base configuration option in Astro is not working
6:25 rambling about Astro Hackathon
8:04 Astro SPA integration: review draft PR
12:40 installing pnpm for the first time (using corepack)
24:27 looking into integration-spa code
30:14 astro-spa demo with micromorph/spa package
41:00 why I don't like astro-spa
43:46 astro-spa preserving state of an iframe demo
48:26 astro multiple jsx frameworks at the same time
56:44 `astro add` command for easy astro integrations
58:08 setting up SPA with react-router
1:19:20 how this react-router SPA is different from astro-spa
1:26:40 using dynamic routes in react-router
1:33:12 fixing server side rendering of react-router's StaticRouter
1:43:54 demo of react-router SPA with SSR support
1:49:21 what can I improve SPA?
1:52:33 rant about CRA (crate-react-app) and car to next.js migration