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

See All 15 Episodes of "Frontend Greatness"