Rendering on the Server with Fredrik Höglund

Fredrik Höglund, the author of two React Server-Side Rendering libraries and a Frontend Lead at PriceRunner joins A-P Koponen on the Frontend Greatness podcast to talk about "rendering on the server".

In this episode:
- What should every frontend developer know about rendering on the server?
- What approaches there are for rendering React apps on the server?
- What are React Server Components?
- How are React Server Components different from Next.js SSR?
- How can you render your SPA on the server?

---

Episode Notes

Social
- Fredrik's Twitter: https://twitter.com/ephemjs
- A-P's Twitter: https://twitter.com/apkoponen

Show Notes
- Next.js :https://nextjs.org/
- Remix: https://remix.run/features
- Gatsby: https://www.gatsbyjs.com/
- RedwoodJS: https://redwoodjs.com/
- Blitz.js: https://blitzjs.com/
- React Server Components: https://reactjs.org/blog/2020/12/21/data-fetching-with-react-server-components.html
- Razzle: https://razzlejs.org/
- PriceRunner: https://www.pricerunner.com/
- Prerender.io: https://prerender.io/
- Dynamic Rendering: https://developers.google.com/search/docs/guides/dynamic-rendering

Fredrik's Recommendations
- Great reading on different types of rendering, not React specific: https://developers.google.com/web/updates/2019/02/rendering-on-the-web
- Various resources: https://reactresources.com/topics/server-side-rendering
- Learn Next.js: https://nextjs.org/learn/basics/create-nextjs-app
- Official ReactDOMServer docs: https://reactjs.org/docs/react-dom-server.html
- Avoid XSS vulnerabilities: https://medium.com/node-security/the-most-common-xss-vulnerability-in-react-js-applications-2bdffbcc1fa0

Fredrik's SSR Challenge
Easy
- Create a Razzle app and take a look at server.js.
- Razzle docs: https://razzlejs.org/

Medium
- Add React Query or Redux, fetch data on the server, and hydrate that to the client.
- React Query docs: https://react-query.tanstack.com/guides/ssr
- Redux docs: https://redux.js.org/recipes/server-rendering

Hard
- Using react-router, add multiple pages, and a page-level abstraction for data fetching.
- React Router docs: https://reactrouter.com/web/guides/server-rendering
- How after.js does it: https://github.com/jaredpalmer/after.js/blob/master/packages/after.js/src/loadInitialProps.tsx