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